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
<calcite-shell>
<calcite-shell-panel slot="panel-start" position="start" id="shell-panel-start">
<calcite-action-bar slot="action-bar">
<calcite-action text="Save" icon="save" indicator></calcite-action>
<calcite-action active icon="map" text="Map"></calcite-action>
<calcite-action icon="layer" text="Layer"></calcite-action>
</calcite-action-bar>
<calcite-panel heading="Map" id="panel-start">
<calcite-block heading="Block 1" collapsible></calcite-block>
</calcite-panel>
</calcite-shell-panel>
<calcite-shell-panel slot="panel-end" position="end" id="shell-panel-end" collapsed>
<calcite-action-bar slot="action-bar">
<calcite-action text="Layer" icon="sliders-horizontal"></calcite-action>
<calcite-action text="Styles" icon="shapes"></calcite-action>
<calcite-action text="Filter" icon="layer-filter"></calcite-action>
<calcite-action text="Configure" icon="popup"></calcite-action>
</calcite-action-bar>
<calcite-panel heading id="panel-end" closable closed>
<calcite-block heading="Block 1" collapsible></calcite-block>
</calcite-panel>
</calcite-shell-panel>
<calcite-panel heading="Content"></calcite-panel>
</calcite-shell>
API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
contentBehind | content-behind | Positions the center content behind any calcite-shell-panel s. | 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-tip-spacing | The left and right spacing of the 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> |