Drawer
Accessible side panel with focus management and portal rendering.
Installation
bash
sia-ui add drawerOu par le paquet, sans rien copier :
tsx
import { DrawerHeader, DrawerTitle, DrawerBody, DrawerFooter, SiaDrawer } from "@sia-ui/react-web";Props de SiaDrawer
Un panneau qui entre par un bord.
Il sert là où une boîte modale serait trop : un filtre qu'on ajuste en regardant la liste derrière, un formulaire qu'on remplit sans perdre sa place. Le focus y est enfermé tant qu'il est ouvert, comme dans un modal — sans quoi la tabulation continue dans la page cachée.
| Prop | Type | Défaut | Description |
|---|---|---|---|
closeOnEsc | boolean | — | |
closeOnOutsideClick | boolean | — | |
defaultOpen | boolean | — | |
onOpenChange | (open: boolean) => void | — | |
open | boolean | — | |
position | "left" | "right" | "top" | "bottom" | — | |
size | "sm" | "md" | "lg" | "xl" | — |
Voir aussi
- Le composant dans le catalogue — états, variantes, et bac à sable.
- La référence complète — tous les composants.