Sheet
Open an accessible panel from an edge of the screen.
Preview
Import
import { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@sigil-ui/components";Usage
<Sheet>
<SheetTrigger asChild><Button variant="outline">Open sheet</Button></SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Settings</SheetTitle>
<SheetDescription>Configure your preferences.</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>Sub-components
This component includes the following parts:
<SheetTrigger><SheetClose><SheetContent><SheetHeader><SheetTitle><SheetDescription>
Token integration
| CSS Variable | Purpose |
|---|---|
--s-overlay-bg | Overlay bg |
--s-overlay-blur | Overlay blur |
--s-overlay-padding | Overlay padding |
--s-overlay-surface | Overlay surface |
--s-surface | Surface |
--s-overlay-border | Overlay border |
--s-border | Border |
--s-border-style | Border style |
--s-overlay-shadow | Overlay shadow |
--s-shadow-xl | Shadow xl |
--s-duration-normal | Duration normal |
--s-radius-sm | Radius sm |