Shell Panel

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

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.

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

Slots

Styles