npm i @velkin/react
import { VuDrawer } from "@velkin/react/drawer";| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Whether the drawer is visible. Default: `false`. |
| closable | boolean | false | Shows a dismiss control on the panel. Default: `false`. |
| closeLabel | string | "" | Accessible name for the dismiss control; empty uses locale catalog. Default: `""`. |
| ariaLabel | string | "" | Accessible name when the header slot is empty. Default: `""`. |
| side | VuDrawerSide | "left" | Edge the panel slides in from. Default: `"left"`. |
| variant | VuDrawerVariant | "elevated" | Surface paint recipe. Default: `"elevated"`. |
| tone | VuDrawerTone | "normal" | Neutral surface weight. Default: `"normal"`. |
| size | VuDrawerSize | "md" | Padding scale for header, body, and footer. Default: `"md"`. |
| radius | VuDrawerRadius | "md" | Panel corner preset (`sm`/`md`/`lg`; Role C′ omits `none`/`full`). Default: `"md"`. |
| divider | boolean | false | Hairlines between shown regions. Default: `false`. |
| persistent | boolean | false | Blocks backdrop and Escape close. Default: `false`. |
| closeOnEsc | boolean | true | Escape emits `vu-close` when topmost. Default: `true`. |
| Event | Detail | Description |
|---|---|---|
| vu-close | VuDrawerCloseDetail | Cancelable close intent; parent sets `open` false when not prevented. |
| vu-open | CustomEvent<void> | When the drawer begins opening. |
| vu-afteropen | CustomEvent<void> | After the open transition finishes. |
| vu-afterclose | CustomEvent<void> | After the close transition finishes. |
| Slot | Description |
|---|---|
| header | Top region (title or toolbar). |
| body | Main scrollable content. |
| footer | Bottom actions region. |
| Part | Description |
|---|---|
| overlay | Backdrop behind the panel. |
| panel | Sliding surface. |
| close-button | Dismiss control when `closable`. |
| header | Header slot wrapper. |
| header-divider | Hairline below the header when `divider` is set. |
| body | Body slot wrapper. |
| footer-divider | Hairline above the footer when `divider` is set. |
| footer | Footer slot wrapper. |
| Method | Description |
|---|---|
| show | - Sets `open` to true. |
| hide | - Sets `open` to false. |
| toggle | - Toggles `open`. |
| focus | - Focuses the panel container. |
| Name | Definition |
|---|---|
| VuDrawerCloseDetail | |
| VuDrawerRadius | |
| VuDrawerSide | |
| VuDrawerSize | |
| VuDrawerTone | |
| VuDrawerVariant | |