Drawer
A drag-to-dismiss overlay panel with velocity and distance thresholds. Slides in from any edge of the screen.
Default
Bottom drawer with a visible grab handle.
With Form
Drawer containing a login form.
Usage
julia
using Suite
Drawer(
DrawerTrigger(
Button(variant="outline", "Open Drawer")
),
DrawerContent(
DrawerHandle(),
DrawerHeader(
DrawerTitle("Title"),
DrawerDescription("Description text."),
),
Div(:class => "p-4", P("Drawer body content.")),
DrawerFooter(
Button("Confirm"),
DrawerClose(
Button(variant="outline", "Cancel")
),
),
),
)Keyboard Interactions
| Key | Action |
|---|---|
| Escape | Close the drawer |
API Reference
Drawer
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Drawer trigger and content |
| class | String | "" | Additional CSS classes |
DrawerTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Element that opens the drawer on click |
| class | String | "" | Additional CSS classes |
DrawerContent
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Content rendered inside the drawer panel |
| direction | String | "bottom" | Slide direction: "bottom", "top", "left", or "right" |
| class | String | "" | Additional CSS classes |
DrawerHeader
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Header content (title and description) |
| class | String | "" | Additional CSS classes |
DrawerFooter
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Footer content (action buttons) |
| class | String | "" | Additional CSS classes |
DrawerTitle
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Title text |
| class | String | "" | Additional CSS classes |
DrawerDescription
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Description text |
| class | String | "" | Additional CSS classes |
DrawerClose
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Element that closes the drawer on click |
| class | String | "" | Additional CSS classes |
DrawerHandle
| Prop | Type | Default | Description |
|---|---|---|---|
| class | String | "" | Additional CSS classes for the visual grab indicator |