Sheet
A panel that slides in from the edge of the screen, typically used for navigation, settings, or supplementary content.
Default (Right)
A settings panel sliding in from the right side.
Left Side
A navigation panel sliding in from the left.
Bottom Side
A notification panel sliding up from the bottom.
Usage
julia
using Suite
Sheet(
SheetTrigger(
Button(variant="outline", "Open Sheet")
),
SheetContent(side="right",
SheetHeader(
SheetTitle("Title"),
SheetDescription("Description text.")
),
P("Sheet body content goes here."),
SheetFooter(
SheetClose(Button(variant="outline", "Cancel")),
Button("Confirm")
)
)
)Keyboard Interactions
| Key | Action |
|---|---|
| Escape | Closes the sheet |
API Reference
Sheet
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Sheet trigger and content |
| class | String | "" | Additional CSS classes |
SheetTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Element that opens the sheet on click |
| class | String | "" | Additional CSS classes |
SheetContent
| Prop | Type | Default | Description |
|---|---|---|---|
| side | String | "right" | Edge to slide from: "top", "right", "bottom", "left" |
| children... | Any | - | Content rendered inside the sheet panel |
| class | String | "" | Additional CSS classes |
SheetHeader
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Header content (title and description) |
| class | String | "" | Additional CSS classes |
SheetFooter
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Footer content (action buttons) |
| class | String | "" | Additional CSS classes |
SheetTitle
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Title text |
| class | String | "" | Additional CSS classes |
SheetDescription
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Description text |
| class | String | "" | Additional CSS classes |
SheetClose
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Element that closes the sheet on click |
| class | String | "" | Additional CSS classes |