Sheet

Sheet is a page-blocking content container intended for focused, fleeting workflows or tasks.

Overview

Sheet provides an ephemeral container for focused workflows and tasks, while preventing interaction with the main application content through the use of a page-blocking Scrim.

Usage

  • Display focused, ephemeral content to a user
  • Present short dialogues or choice sets to a user
  • Contain navigation and menu regions, administrative or platform settings

Sample

Best practices

While visually similar to the Shell Panel and Dialog components, Sheet has distinct capabilities and intended use cases.

The primary difference is in each's ephemerality - Sheet and Dialog should command the attention of the user for a focused task - preventing interaction with other application content while open - before being dismissed.

Conversely, Shell Panels can be open and persist in that way indefinitely - in some cases never being collapsed. Shell Panels should be displayed alongside visible and interactive primary application content.

Dialog should be used for complex, multi-step interactions and workflows invoked from the primary application. Sheet should be used for more ephemeral but still focused interactions like navigating menus, displaying user or platform settings, or presenting brief choices or decisions to a user.

Recommendations

It is common to use a Sheet in the block-end value of position when presenting users options in a narrow viewport - often on a mobile device. At a larger viewport width, you may wish to provide this in an inline-start or inline-end position.

To limit the height of the component while position is "block-start" or "block-end" you can use the --calcite-shell-height, --calcite-shell-min-height, --calcite-shell-max-height css variables. While position is "inline-start" or "inline-end" position, you can instead adjust the width via --calcite-shell-width, --calcite-shell-min-width, --calcite-shell-max-width css variables.

Do use css variables to constrain the height of content of vertically short content.
Do adjust "position" and displayMode based on viewport size.
Avoid opening multiple Sheets at once.
Avoid using a Sheet for tasks that may affect primary application content.

Accessibility

It is strongly recommended to have focusable elements cycle through Sheet where focusTrapDisabled is false (default) to support assistive technology users. The expected behavior for assistive technologies is while the component is open only the contents and focusable elements are accessible.

Keyboard navigation

KeyFunction
TabMoves focus to next focusable element. If the current focus is the last element and focusTrapDisabled is false, focus will cycle to the first element.
Tab and ShiftMoves focus to previous focusable element. If the current focus is the first element and focusTrapDisabled is false, focus will cycle to the last element.
EscIf escapeDisabled is false, closes the component.

API reference

Properties

Styles

Events

Methods

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