82 lines
2.0 KiB
Markdown
82 lines
2.0 KiB
Markdown
- Home
|
|
- Components
|
|
- Drawer
|
|
|
|
# Drawer
|
|
|
|
A drawer component for React.
|
|
|
|
## Props
|
|
|
|
### Drawer
|
|
|
|
|
|
Prop Type Default Description
|
|
...Vaul props ComponentProps<typeof DrawerPrimitive.Root> - All Vaul drawer root props
|
|
|
|
### Drawer Root
|
|
|
|
|
|
Prop Type Default Description
|
|
direction 'top' | 'right' | 'bottom' | 'left' 'bottom' Which edge to slide from
|
|
...Vaul props ComponentProps<typeof DrawerPrimitive.Root> - All Vaul root props
|
|
|
|
### DrawerContent
|
|
|
|
|
|
Prop Type Default Description
|
|
...Vaul props ComponentProps<typeof DrawerPrimitive.Content> - All Vaul content props
|
|
|
|
Other parts (DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerClose) are styled wrappers around Vaul components.
|
|
|
|
## Usage
|
|
|
|
```
|
|
<Drawer>
|
|
<DrawerTrigger asChild>
|
|
<Button variant="outline">Open</Button>
|
|
</DrawerTrigger>
|
|
<DrawerContent onOpenAutoFocus={(e) => {
|
|
e.preventDefault();
|
|
}}>
|
|
<DrawerHeader>
|
|
<DrawerTitle>Edit profile</DrawerTitle>
|
|
<DrawerDescription>
|
|
Make changes to your profile here. Click save when you're done.
|
|
</DrawerDescription>
|
|
</DrawerHeader>
|
|
<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>
|
|
<DrawerFooter>
|
|
<Button variant="primary">Save</Button>
|
|
<SheetClose asChild>
|
|
<Button variant="secondary">Close</Button>
|
|
</SheetClose>
|
|
</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
```
|
|
|
|
### Example
|
|
|
|
```
|
|
<Drawer>
|
|
<DrawerTrigger asChild><Button>Open</Button></DrawerTrigger>
|
|
<DrawerContent>
|
|
<DrawerHeader>
|
|
<DrawerTitle>Title</DrawerTitle>
|
|
<DrawerDescription>Description</DrawerDescription>
|
|
</DrawerHeader>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
```
|
|
|