Cerca...

Cerca nella documentazione...

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

PropTipoDefaultDescrizione
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.