Overlays
Drawer
The same behaviour as Modal — about fifteen lines differ. It is distinguished in CSS by `data-ck="drawer"` plus `data-placement`, since both share `data-scope="dialog"`.
data-scope="dialog"
Usage
<Drawer open={open} onOpenChange={d => setOpen(d.open)} placement="left" title="Filters">
…
</Drawer><Drawer v-model:open="open" placement="left" title="Filters">…</Drawer><Drawer bind:open placement="left" title="Filters">…</Drawer><ck-drawer [(open)]="open" placement="left" title="Filters">…</ck-drawer>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
placement | "left" | "right" | "top" | "bottom" | "right" | Which edge it slides from. |
size | "sm" | "md" | "lg" | "xl" | "full" | "md" | Panel size along its axis. |
onClose | () => void | — | React firstEscape, a press on the mask, and the close button all arrive here. |
open, defaultOpen, onOpenChange, role, modal, closeOnEscape, closeOnInteractOutside, showCloseButton, id, className, title, description | — | Identical to Modal. Listed rather than implied with an ellipsis: Modal also has centered, scrollable, width and the whole confirm/cancel set, and a Drawer has none of them. `footer` exists on both but differs — Drawer's is a plain slot with no default. |
Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop. The marked rows are the exception, and a temporary one, in both directions: React first exists in React while the other three adapters catch up, and Not in React is the prop it replaced, still live everywhere else.