This sample uses Calcite to create a basemap editing workspace with one main map view and three supporting views.
Using Shell, Action Bar, Shell Panel, and Panel, the sample demonstrates how to create a flexible layout that can adapt to different viewport sizes and user preferences.
Layout considerations
This application simulates an editing workflow where a user compares the same basemap at multiple zoom levels.
A Shell Panel in the "panel-start" slot of Shell contains an Action Bar and a Panel. Within the Panel, controls are grouped into Blocks components. In this sample, a List is used to provide controls to a user.
Application behavior
The application provides editing controls in a Shell Panel, along with the ability to switch between different map arrangements.
To support creative workflows, state controls are prominently placed in an Action Bar, and administrative controls such as saving and duplication are kept close at hand.
Responsive behavior
Responsive behaviors are built into many Calcite components. In this sample, the Action Bar within the Shell Panel can overflow vertically as available space changes, helping keep its actions available via Action Menu.
Adaptive behavior
Adaptive design refers to making decisions as to when and how to adjust content at different viewport sizes.
At small viewport widths, the Shell Panel is switched from display of "dock" to "overlay", the open editing Panel is closed, and the layout toggle Action Group is hidden. Additionally, the map samples are consolidated into a single layout arrangement.
The application further adapts by removing the Navigation Logo's heading property and removing properties set on Navigation User.
Implementation details
This sample relies on CSS and JavaScript working together. JavaScript tracks layout, panel, theme, and viewport state, then updates component properties and page classes.
CSS defines the map arrangements and the compact stacked layout. The sample also assigns view-transition-name values to each map tile so layout switches can use the View Transitions API when supported.