The Shell is a foundational layout component in Calcite, which enables the creation of rich, interactive experiences. Used in combination with components such as Shell Panel, Panel, Block, and Action Bar, the Shell can be used to create consistent, compelling applications.
Overview
Shell can be used as a full-page experience, or given defined width and height to enable you to embed applications in other experiences or narrative content.
Shell provides a default slot for your primary application content.
Sample
Usage
When embedded within other content, the "alerts", "sheets", and "dialogs" slots facilitate placement of these components in relation to the Shell. For example, you can display a Dialog within the bounds of an embedded Shell without it taking over the whole page.
Use slots for UI placement
Shell slots are specific, named locations within the component where content and other components can be referenced and placed. Refer to layout patterns to learn more.
header and footer slots for navigation and global actions. These stay pinned while the main content is interacted with.panel-start and panel-end slots for your primary tools.Component comparison
Shell and Panel house other components and content, but each have different use cases.
Best practices
Adaptive and responsive design
collapsed="true" on a Shell Panel when the viewport is under a certain width.panel-start or panel-end to the bottom of the viewport via panel-bottom to better fit the thumb zone of a phone.API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| contentBehind | content-behind | When true, positions the center content behind any calcite-shell-panels. | boolean | false |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map. |
| header | A slot for adding header content. This content will be positioned at the top of the component. |
| footer | A slot for adding footer content. This content will be positioned at the bottom of the component. |
| panel-start | A slot for adding the starting calcite-shell-panel. |
| panel-end | A slot for adding the ending calcite-shell-panel. |
| panel-top | A slot for adding the top calcite-shell-panel. |
| panel-bottom | A slot for adding the bottom calcite-shell-panel. |
| dialogs | A slot for adding calcite-dialog components. When placed in this slot, the dialog position will be constrained to the extent of the calcite-shell. |
| alerts | A slot for adding calcite-alert components. When placed in this slot, the alert position will be constrained to the extent of the calcite-shell. |
| sheets | A slot for adding calcite-sheet components. When placed in this slot, the sheet position will be constrained to the extent of the calcite-shell. |
Styles
| Name | Description |
|---|---|
| --calcite-shell-border-color | Specifies the component's border color. |
Events
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<this> |