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
<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>
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.
"action-bar"
slot that is always visible.There are multiple display
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 display
property will yield slightly different visual displays based upon the presence of the parent Shell component's content
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 display
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
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
collapsed | collapsed | When true , hides the component's content area. | boolean | false |
displayMode | display-mode | Specifies 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" |
height | height | Specifies the height of the component. | "l" | "m" | "s" | |
heightScale | height-scale | height property instead.layout is horizontal , specifies the maximum height of the component. | "l" | "m" | "s" | |
layout | layout | The direction of the component. | "horizontal" | "vertical" | "vertical" |
messageOverrides | Use this property to override individual strings used by the component. | { resize?: string; } | ||
position | position | Specifies the component's position. Will be flipped when the element direction is right-to-left ("rtl" ). | "end" | "start" | "start" |
resizable | resizable | When true and displayMode is not float-content or float , the component's content area is resizable. | boolean | false |
width | width | Specifies the width of the component. | "l" | "m" | "s" | |
widthScale | width-scale | width property instead.layout is vertical , specifies the width of the component. | "l" | "m" | "s" | "m" |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding custom content. |
action-bar | A slot for adding a calcite-action-bar to the component. |
Styles
Name | Description |
---|---|
--calcite-shell-panel-width | Specifies the width of the component. |
--calcite-shell-panel-max-width | Specifies the maximum width of the component. |
--calcite-shell-panel-min-width | Specifies the minimum width of the component. |
--calcite-shell-panel-height | When layout is horizontal , or layout is vertical and displayMode is float-content or float , specifies the height of the component. |
--calcite-shell-panel-max-height | When 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-height | When 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-index | Specifies the z-index value for the component. |
--calcite-shell-panel-border-color | When displayMode is "float-all" , specifies the component's border color. |
--calcite-shell-panel-corner-radius | When displayMode is "float-all" , specifies the component's corner radius |
--calcite-shell-panel-shadow | When displayMode is "float-all" , specifies the component's shadow. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |