Sheet
A side panel that slides in from any edge of the viewport, driven by JS commands.
Edit profile
Make changes to your profile here. Click save when you're done.
This is a working side panel. Press Escape, click the overlay, or use the close button to dismiss it.
<.sheet></.sheet>Examples
Sides
The sheet can slide in from any of the four edges.
Right panel
Slides in from the right edge.
Left panel
Slides in from the left edge.
Top panel
Slides in from the top edge.
Bottom panel
Slides in from the bottom edge.
<div class="flex flex-wrap gap-2">
<.sheet id="sheet-right">
<:trigger><.button variant="outline">Right</.button></:trigger>
<.sheet_header>
<.sheet_title id="sheet-right">Right panel</.sheet_title>
<.sheet_description id="sheet-right">Slides in from the right edge.</.sheet_description>
</.sheet_header>
</.sheet>
<.sheet id="sheet-left" side="left">
<:trigger><.button variant="outline">Left</.button></:trigger>
<.sheet_header>
<.sheet_title id="sheet-left">Left panel</.sheet_title>
<.sheet_description id="sheet-left">Slides in from the left edge.</.sheet_description>
</.sheet_header>
</.sheet>
<.sheet id="sheet-top" side="top">
<:trigger><.button variant="outline">Top</.button></:trigger>
<.sheet_header>
<.sheet_title id="sheet-top">Top panel</.sheet_title>
<.sheet_description id="sheet-top">Slides in from the top edge.</.sheet_description>
</.sheet_header>
</.sheet>
<.sheet id="sheet-bottom" side="bottom">
<:trigger><.button variant="outline">Bottom</.button></:trigger>
<.sheet_header>
<.sheet_title id="sheet-bottom">Bottom panel</.sheet_title>
<.sheet_description id="sheet-bottom">Slides in from the bottom edge.</.sheet_description>
</.sheet_header>
</.sheet>
</div>Props
| Name | Type | Default | Values |
|---|---|---|---|
| class | :string | ||
| id | :string | ||
| side | :string | "right" | top | right | bottom | left |
| inner_block (slot) | :slot | ||
| trigger (slot) | :slot |