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, 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.
Usage
- When embedded within other content, the
"alerts","sheets"and"modals"slots facilitate placement of these components in relation to the Shell. For example, you can display a Modal within the bounds of an embedded Shell without it taking over the whole page.
Sample
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| contentBehind | content-behind | 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. |
| center-row | "panel-bottom" slot instead. A slot for adding the bottom calcite-shell-center-row. |
| modals | A slot for adding calcite-modal components. When placed in this slot, the modal position will be constrained to the extent of the calcite-shell. |
| 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. |
| --calcite-shell-tip-spacing | calcite-tip-manager when slotted in the component. |
Events
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |