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.
Sheet depuis la droite
Direction par defaut. Ideal pour les panneaux de parametres et les formulaires secondaires.
Sheet depuis la gauche
Utilisez side="left" pour un menu de navigation lateral, pattern courant sur mobile.
Props
Sheet (Root)
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.
SheetTrigger
Prop
Type
Default
Description
asChild
boolean
false
Si true, rend l'enfant direct au lieu d'un <button>.
SheetContent
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.
Sous-composants
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.