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.
"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.