Sheet
Sheet
Un Dialog di Radix sotto il cofano, stilizzato per scorrere da un bordo invece di apparire centrato — un cassetto di navigazione mobile, un pannello filtri, un riquadro dettagli.
import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose } from "@pompeitech/vesuvius-ui";Da destra (default)
Da sinistra
API
Ogni parte corrisponde a quella di Dialog (stessa radice open/onOpenChange/modal, stessa forma di Trigger/Header/Title/Description/Footer/Close), con un'aggiunta:
SheetContent
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
side | "right" | "left" | "top" | "bottom" | "right" | Da quale bordo scorre. |
Più ogni prop accettata da DialogContent — renderizzato in Portal, con focus intrappolato, si chiude con Esc o click esterno.
Accessibilità
Come Dialog: role="dialog" con aria-modal="true", SheetTitle obbligatorio per il nome accessibile (dagli una className="sr-only" invece di ometterlo se nessun titolo visibile si adatta al design), focus intrappolato mentre è aperto e restituito al trigger alla chiusura.