文档
抽屉
抽屉
一个用于 React 的抽屉组件。
关于
抽屉组件基于 Vaul 构建,作者是 emilkowalski_。
安装
pnpm dlx shadcn@latest add drawer
用法
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
<Drawer>
<DrawerTrigger>Open</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Are you absolutely sure?</DrawerTitle>
<DrawerDescription>This action cannot be undone.</DrawerDescription>
</DrawerHeader>
<DrawerFooter>
<Button>Submit</Button>
<DrawerClose>
<Button variant="outline">Cancel</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
示例
响应式对话框
你可以结合 Dialog
和 Drawer
组件来创建一个响应式对话框。这会在桌面端渲染 Dialog
组件,并在移动端渲染 Drawer
组件。