Shell

Overview

Shell provides a default slot for any content. Shell also has a slot for a header, a slot for a footer, and slots for leading and trailing content—which can be populated using Calcite Shell Panel.

Calcite Shell Panel has slots for Action Bar and Panel.

Usage

  • Provides a base layout framework for your app

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

API reference

calcite-shell
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
contentBehindcontent-behind

Positions the center content behind any calcite-shell-panels.

booleanA boolean property should be present, or not
truefalse

Slots

NameDescription
default (unnamed)

A slot for adding content to the shell. This content will appear between any leading and trailing panels added to the shell. (eg. a map)

center-row

A slot for adding custom content in the center row.

contextual-panel

A slot for adding the trailing `calcite-shell-panel`.

header

A slot for adding header content. This content will be positioned at the top of the shell.

primary-panel

A slot for adding the leading `calcite-shell-panel`.

Styles

NameDescriptionCSS Variable
--calcite-shell-tip-spacing

the left/right positioning of the tip-manager when slotted within a shell

--calcite-shell-tip-spacing

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