Sheet
Slide in dialog boxes from the edge of the screen
Source ↗️ Report Issue ↗️Use Sheet
components to create a dialog box that slide in from the edge of the screen, covering part of the main content, temporarily blocking interaction with the rest of the application until the sheet is closed. Use them for additional options, content preview or confirmation steps.
The Sheet
component is an extended Modal
component, therefore the API is equivalent to the Modal
component. You can use the modal
and closeModal
utility functions to handle sheets.
Once you created a Modal
component, you can trigger it by calling the modal
function with either a selector that targets the Sheet
component, or a configuration object. You can open sheets in two different ways:
- Open: Pass a configuration object with a
trigger
property that specifies a query selector for a trigger element, and pass amodal
property to target theSheet
component. Clicking on the trigger element will now open the component. The Astro example follows this approach. - Open via JS: Pass a query selector to the
modal
function that targets the component, and assign the function to a variable. You can call theopen
method on the assigned variable. This lets you trigger the component programmatically, for example, after a network request finishes. This approach is used in the Svelte/React examples above.
Titles
Sheets can be configured to have titles and subtitles by using the title
and subTitle
props:
Configuring Close
A sheet can be closed in four different ways. Using the close icon, clicking on the overlay, hitting the esc
key on the keyboard, or calling the closeModal
function from JavaScript. For example, the following sheet can only be closed with the “Close” button inside the sheet.
By default, every close option is enabled due to accessibility. Only disable these options if you’d like your users to take mandatory actions before closing the sheet.
Positions
A sheet can be configured to be displayed in four different positions: top
, bottom
, left
, and right
. By default, a Sheet
component is displayed on the right side of the screen.
Sheet Callback
When a Sheet
is created through the modal
function, you can also optionally pass an onOpen
and onClose
property to the configuration object to execute code when the sheet is opened or closed:
Both methods has access to an object with the following properties:
trigger
: The DOM node for the trigger element. This can benull
if the sheet was created without thetrigger
property, and instead,sheetInstance.open
is used as a means to reveal the sheet.modal
: The DOM node for theSheet
component.
API
Prop | Purpose |
---|---|
title | Set a title for the sheet. |
subTitle | Set a subtitle for the sheet. |
showCloseIcon | Shows a close icon in the top-right corner of the sheet. Defaults to true . |
closeOnEsc | Makes the sheet closable by hitting the esc key. Defaults to true . |
closeOnOverlay | Makes the sheet closable by clicking on the overlay. Defaults to true . |
id | Pass an ID for the sheet. |
className | Pass additional CSS classes for the sheet. |
position | Set the position of your sheet. Can be one of top , bottom , left . |
Property | Purpose |
---|---|
config.trigger | Query selector that targets the trigger element. |
config.modal | Query selector that targets the Sheet component. |
config.onOpen | Callback function executed after a sheet is opened. |
config.onClose | Callback function executed after a sheet is closed. |
instance.open | Open the sheet programmatically. |
instance.remove | Remove the event listeners created for the sheet. |
Request improvement for this page