Page layout patterns provide consistent and familiar experiences within and between applications. Effective layouts offer guidance for an application's content and functionality while maintaining visual hierarchy and balance.
Calcite's layout patterns enable responsive, adaptive, and accessible interfaces that work across various screen sizes and contexts.
Foundational components
Shell is a foundational layout component in Calcite that can be used to create consistent and compelling applications. When combined with components such as Shell Panel, Panel, Block, Action Bar, and Sheet, it provides the underlying structure for app layouts ranging from simple to highly complex.
Components including Shell Panel, Dialog, Alert, and Sheet can be configured to display in various ways depending on application needs. For example, you can adjust placement, sizing, and resizability in Shell Panel. Placement can also be configured in Alert, Dialog, and Sheet.
Foundational components can be useful in creating solutions with maps. Explore mapping application layouts with ArcGIS Maps SDK for JavaScript for designing mapping apps.
Components and their responsibilities
When building apps, choosing a consistent layout ensures predictable structure, usability, and scalability. Calcite provides a set of layout components that define application regions, panel behavior, and navigation zones. Understanding the conceptual roles of each component helps you make deliberate layout decisions.
-
Shell: The application frame, which defines the overall structure of the application. It establishes primary regions such as slots for headers and content areas. Shell serves as the canvas on which your application lives, where other structural components are contained within the component.
-
Shell Panel: Useful for side regions. Shell Panels live inside the Shell and provide dockable or collapsible regions for controls, filters, legends or supporting content. Shell Panels are ideal for content that is important but secondary to the main content. They can be positioned at the start, end, top, or bottom.
-
Panel: Provides a visual and functional hierarchy. Panel offers a content container, which can be slotted inside Shell Panels or other layout regions to organize related content, usually grouped using Blocks. Use Panels to group controls, charts, tables, or descriptive information.
Shell slots
Shell slots are specific, named locations within the Shell where content and other components can be inserted. Slots are a common web components concept and enable developers to control the orientation of content within a user interface. Refer to the Core Concepts slot section to learn more.
The following Shell demonstrates its various slot locations, which are generally used for Shell Panel and Panel components. Components can be included in each slot of the Shell by denoting a slot name.
In the following sample, a Shell Panel is used for each available slot. The default, or non-slotted content, is using a Panel, commonly used for slotting a map, and is automatically positioned in the middle of the other slotted components.
Responsive and adaptive design
Responsive design
Responsive design defines the composition of components and layouts with built-in fluidity, where internal logic is used to automatically adjust the display and functionality based on the available width. For instance:
- Action Bar: Dynamically collapses Actions into an ellipsis overflow menu.
- Carousel: Visual navigation items are automatically reduced as its available width decreases.
- Card Group: Cards are wrapped to multiple lines as the component's available width decreases.
Adaptive design
Adaptive design refers to adjusting content placement or component configuration in an application based on viewport or modality. For instance:
- Component swapping: Render content in a Dialog for large screens and via Sheet on mobile devices.
- Slot relocation: Programmatically move a Shell Panel from Shell's
"panel-start"slot to the"panel-bottom"slot based on screen size. - Property overrides: Change properties, such as
scaleoralignment, to fit a different spatial context.