Shell Panel

Child component of Shell

Shell Panel is expected to be used within the "panel-start", "panel-end", "panel-top" and "panel-bottom" slots of Shell.

Overview

Shell Panels often contain configuration, controls, and selection workflows that drive the user experience within the Shell, most frequently containing Panel, Block, and Action Bar components.

Shell Panels should be used to display content to a user that is contextually related to the contents of the default content slot of Shell.

Usage

  • House primary application functionality and configuration options that drive interaction
  • Create consistent, repeatable application layouts when combined with Panel, Block, and Action Bar components

Sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<calcite-shell>
    <calcite-shell-panel slot="panel-start" position="start" id="shell-panel-start">
        <calcite-action-bar slot="action-bar">
            <calcite-action-group>
                <calcite-action text="Add" icon="plus"></calcite-action>
                <calcite-action active text="Layers" indicator icon="layers"></calcite-action>
            </calcite-action-group>
            <calcite-action-group>
                <calcite-action text="Undo" icon="undo"></calcite-action>
                <calcite-action text="Redo" indicator icon="redo"></calcite-action>
                <calcite-action text="Save" disabled icon="save"></calcite-action>
            </calcite-action-group>
            <calcite-action-group slot="bottom-actions">
                <calcite-action text="Tips" icon="question"></calcite-action>
                <calcite-action text="Settings" indicator icon="gear"></calcite-action>
            </calcite-action-group>
        </calcite-action-bar>
        <calcite-panel heading="Layers" id="panel-start" closable>
            <calcite-block collapsible heading="Symbology" description="Select type, color, and transparency"
                icon-start="map-pin">
                <calcite-notice open>
                    <div slot="message">The viewers are going to love this</div>
                </calcite-notice>
            </calcite-block>
        </calcite-panel>
    </calcite-shell-panel>
    <calcite-panel heading="Content"></calcite-panel>
</calcite-shell>
v3.0.3

Best practices

While visually similar to the Sheet component, Shell Panel has distinct capabilities and intended use cases. Multiple Shell Panel components may be in use at once, whereas it is recommended to allow only one Sheet to be open at once.

Sheet provides a page-blocking scrim and should be used to prevent interaction within the application. Sheet expects a single Panel as a child element.
Conversely, Shell Panel is not intended to interrupt the main application workflow. It does not provide a page-blocking scrim. Shell Panel supports placing an Action Bar adjacent to a slotted Panel in the "action-bar" slot that is always visible.

There are multiple displayMode options available in Shell Panel. The default, "docked", will push content slotted in the default slot of Shell to the side. The "float" and "overlay" values will place the Shell Panel on top of content slotted in the default slot of Shell. You can combine these types of Shell Panels within the application.

Note that the displayMode property will yield slightly different visual displays based upon the presence of the parent Shell component's contentBehind property. When this is true, Shell Panel will position on top of content slotted within the default slot of Shell.

Recommendations

It is expected to slot a single Panel, most often containing one or more Block components, inside the Shell Panel. A common use case is to slot an Action Bar component into the "action-bar" slot to contain Actions that correspond to an open Panel.

At smaller viewport sizes, it may be useful to change displayMode from "dock" to "float" or "overlay". It can also at times be appropriate to programmatically collapse open Shell Panels that are not currently in use by a user.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
collapsedcollapsedWhen true, hides the component's content area.booleanfalse
displayModedisplay-modeSpecifies the display mode of the component, where: "dock" displays at full height adjacent to center content, "overlay" displays at full height on top of center content, and "float" [Deprecated] does not display at full height with content separately detached from calcite-action-bar on top of center content. "float-content" does not display at full height with content separately detached from calcite-action-bar on top of center content. "float-all" detaches the calcite-panel and calcite-action-bar on top of center content."dock" | "float" | "float-all" | "float-content" | "overlay""dock"
heightheightSpecifies the height of the component."l" | "m" | "s"
heightScaleheight-scale
deprecatedUse the height property instead.
When layout is horizontal, specifies the maximum height of the component.
"l" | "m" | "s"
layoutlayoutThe direction of the component."horizontal" | "vertical""vertical"
messageOverridesUse this property to override individual strings used by the component.{ resize?: string; }
positionpositionSpecifies the component's position. Will be flipped when the element direction is right-to-left ("rtl")."end" | "start""start"
resizableresizableWhen true and displayMode is not float-content or float, the component's content area is resizable.booleanfalse
widthwidthSpecifies the width of the component."l" | "m" | "s"
widthScalewidth-scale
deprecatedUse the width property instead.
When layout is vertical, specifies the width of the component.
"l" | "m" | "s""m"

Slots

NameDescription
default (unnamed)A slot for adding custom content.
action-barA slot for adding a calcite-action-bar to the component.

Styles

NameDescription
--calcite-shell-panel-widthSpecifies the width of the component.
--calcite-shell-panel-max-widthSpecifies the maximum width of the component.
--calcite-shell-panel-min-widthSpecifies the minimum width of the component.
--calcite-shell-panel-heightWhen layout is horizontal, or layout is vertical and displayMode is float-content or float, specifies the height of the component.
--calcite-shell-panel-max-heightWhen layout is horizontal, or layout is vertical and displayMode is float-content or float, specifies the maximum height of the component.
--calcite-shell-panel-min-heightWhen layout is horizontal, or layout is vertical and displayMode is float-content or float, specifies the minimum height of the component.
--calcite-shell-panel-z-indexSpecifies the z-index value for the component.
--calcite-shell-panel-border-colorWhen displayMode is "float-all", specifies the component's border color.
--calcite-shell-panel-corner-radiusWhen displayMode is "float-all", specifies the component's corner radius
--calcite-shell-panel-shadowWhen displayMode is "float-all", specifies the component's shadow.

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