Panneau lateral qui glisse depuis un bord de l'ecran. Construit sur Radix UI Dialog avec des animations de slide. Utile pour les formulaires de parametres, la navigation mobile ou les panneaux de details.
Direction par defaut. Ideal pour les panneaux de parametres et les formulaires secondaires.
Utilisez side="left" pour un menu de navigation lateral, pattern courant sur mobile.
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Controle l'ouverture du sheet (mode controle). |
| defaultOpen | boolean | false | Etat d'ouverture par defaut (mode non-controle). |
| onOpenChange | (open: boolean) => void | — | Callback appele quand l'etat d'ouverture change. |
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Si true, rend l'enfant direct au lieu d'un <button>. |
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "right" | Cote depuis lequel le sheet apparait. Largeur max de 85vw/max-w-sm pour left/right. |
| className | string | — | Classes CSS additionnelles. |
| Prop | Type | Default | Description |
|---|---|---|---|
| SheetHeader | HTMLDivElement | — | Conteneur pour SheetTitle et SheetDescription. Flex column. |
| SheetTitle | Radix DialogPrimitive.Title | — | Titre du sheet. text-lg font-semibold. |
| SheetDescription | Radix DialogPrimitive.Description | — | Description du sheet. text-sm text-muted-foreground. |
| SheetFooter | HTMLDivElement | — | Pied du sheet. Colonne inversee sur mobile, flex-row sur desktop. |
| SheetClose | Radix DialogPrimitive.Close | — | Bouton qui ferme le sheet. Le bouton X est inclus automatiquement dans SheetContent. |