## Drawer
A side panel that slides in for a longer edit or detail view — rendered through the shared Drawer.
Tier: composite-antd. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — a CDN-React runnable page (React + antd loaded from a CDN, no build step) — React/Vue use the same shared-themed DataTable via your bundler.
Surfaces: editor, dashboard, settings.
Props:
- open: boolean, default false. Controls visibility
- title: string, default —. Panel heading
- placement: top | right | bottom | left, default right. Which edge it slides from
- width: number | string, default 378. Panel width for left/right (large ≈ 736)
- height: number | string, default 378. Panel height for top/bottom (large ≈ 480)
- size: default | large, default default. antd preset size (378/736 l·r); the DS default is 378
- footer: ReactNode, default —. Pinned actions row (keep the primary action here)
- mask: boolean, default true. Dim + scroll-lock the page behind the panel
- closable: boolean, default true. Show the header close (X)
- onClose: () => void, default —. Dismiss handler
Tokens: colorPrimary, borderRadius, colorText, Drawer.colorBgElevated.
Use when: Drawer (a longer edit form or detail panel where keeping page context matters); Modal (a short, blocking decision the user must complete first); a page (the task is large enough to deserve its own route).