78 lines
1.9 KiB
Markdown
78 lines
1.9 KiB
Markdown
- Home
|
|
- Components
|
|
- Sheet
|
|
|
|
# Sheet
|
|
|
|
Extends the Dialog component to display content that complements the main content of the screen.
|
|
|
|
## Props
|
|
|
|
### Sheet
|
|
|
|
|
|
Prop Type Default Description
|
|
...Radix props ComponentProps<typeof SheetPrimitive.Root> - All Radix Dialog root props
|
|
|
|
### SheetContent
|
|
|
|
|
|
Prop Type Default Description
|
|
side 'top' | 'right' | 'bottom' | 'left' 'right' Which edge to slide from
|
|
...Radix props ComponentProps<typeof SheetPrimitive.Content> - All Radix content props
|
|
|
|
Other parts (SheetTrigger, SheetClose, SheetHeader, SheetFooter, SheetTitle, SheetDescription) are styled wrappers around Radix components.
|
|
|
|
### Example
|
|
|
|
```
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button>Open</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="left">
|
|
<SheetHeader>
|
|
<SheetTitle>Title</SheetTitle>
|
|
<SheetDescription>Optional description</SheetDescription>
|
|
</SheetHeader>
|
|
</SheetContent>
|
|
</Sheet>
|
|
```
|
|
|
|
## Usage
|
|
|
|
```
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button variant="outline">Open</Button>
|
|
</SheetTrigger>
|
|
<SheetContent onOpenAutoFocus={(e) => {
|
|
e.preventDefault();
|
|
}}>
|
|
<SheetHeader>
|
|
<SheetTitle>Edit profile</SheetTitle>
|
|
<SheetDescription>
|
|
Make changes to your profile here. Click save when you're done.
|
|
</SheetDescription>
|
|
</SheetHeader>
|
|
<div className="grid flex-1 auto-rows-min gap-4">
|
|
<div className="grid gap-3">
|
|
<label className="text-[12px]" htmlFor="sheet-demo-name">Name</label>
|
|
<InputRoot id="sheet-demo-name" defaultValue="Pedro Duarte" />
|
|
</div>
|
|
<div className="grid gap-3">
|
|
<label className="text-[12px]" htmlFor="sheet-demo-username">Username</label>
|
|
<InputRoot id="sheet-demo-username" defaultValue="@peduarte" />
|
|
</div>
|
|
</div>
|
|
<SheetFooter>
|
|
<Button variant="primary">Save</Button>
|
|
<SheetClose asChild>
|
|
<Button variant="secondary">Close</Button>
|
|
</SheetClose>
|
|
</SheetFooter>
|
|
</SheetContent>
|
|
</Sheet>
|
|
```
|
|
|