This sample uses Calcite to create an application layout suitable for a workspace application. The map is the focal point of the experience and can be referenced alongside more detailed content or active work. Multiple views provide the user with agency to choose the layout that best suits their needs.
Using the Shell as an application frame, this application conditionally displays content in a Shell Panel or a Dialog based on user preference.
Layout considerations
This application simulates a focused workspace experience, where a user has multiple entities open at once that reference a map, canvas, or spatial backdrop. Workflow applications, in particular ones focused on a map or spatial canvas, often empower expert users by allowing them to adjust the layout or view to best suit their needs.
Application behavior
In the default application display, the main content is contained in a Dialog. Users can dynamically move and resize the Dialog via its drag-enabled and resizable properties.
In the other display, the content from the Dialog is moved to a Shell Panel placed in the content-bottom slot of Shell. It is resizable to accommodate various content types and viewing preferences.
Responsive behavior
Responsive behaviors are built into many Calcite components. In this application scenario, the Tabs component overflows in a scrolling container and adds UI affordances to allow users to cycle through Tab Titles.
Adaptive behavior
Adaptive design refers to making decisions as to when and how to adjust content at different viewport sizes.
At small viewport sizes, the application adjusts to the Shell Panel's display of "dock", ensuring the featured and supplementary content are both visible at small viewport sizes.
The sample also programmatically hides the text in the status Chip at small viewport sizes, keeping the icon-only Chip, adding the interactive property, and adding a Tooltip. This icon and its meaning are reinforced throughout the interface — removing text and providing contextual information through the Tooltip help save space at small viewport sizes.
Implementation details
This sample relies on CSS and JavaScript to create an adaptive experience. Using JavaScript, viewport width can be monitored in order to make adjustments to component properties, move content, and set conditional styles. CSS is used to hide and show elements and to adjust the styling of components based on classes assigned with JavaScript.
In this sample, two separate components are hidden and shown — Shell Panel and Dialog — that contain the same content. In a framework-based application, consider dynamically rendering the content based on application state.
When a user interacts with the Action to change display modes, focus must be appropriately managed. When the Dialog opens, the focus trap behavior automatically sets focus to the Action in the header. When the user toggles to the Shell Panel display, the application programmatically sets focus to the reciprocal element. Explore how to continue to build and design your apps with accessibility in mind.