Shell

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

3 samples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>
v3.0.0

API reference

Properties

PropertyAttributeDescriptionTypeDefault
contentBehindcontent-behindPositions the center content behind any calcite-shell-panels.booleanfalse

Slots

NameDescription
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.
headerA slot for adding header content. This content will be positioned at the top of the component.
panel-startA slot for adding the starting calcite-shell-panel.
panel-endA slot for adding the ending calcite-shell-panel.
panel-topA slot for adding the top calcite-shell-panel.
panel-bottomA slot for adding the bottom calcite-shell-panel.
center-row
deprecated Use the "panel-bottom" slot instead. A slot for adding the bottom calcite-shell-center-row.
modalsA slot for adding calcite-modal components. When placed in this slot, the modal position will be constrained to the extent of the calcite-shell.
dialogsA slot for adding calcite-dialog components. When placed in this slot, the dialog position will be constrained to the extent of the calcite-shell.
alertsA slot for adding calcite-alert components. When placed in this slot, the alert position will be constrained to the extent of the calcite-shell.
sheetsA 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

NameDescription
--calcite-shell-tip-spacingThe left and right spacing of the calcite-tip-manager when slotted in the component.

Events

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close