Drawer
从屏幕底部升起、可向下拖动关闭的面板（即手机上常见的底部面板），顶端带一道斜切的拖动条。
安装
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/drawer示例
从底部与右侧滑入
import { Button } from "@/components/zero/button";import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger,} from "@/components/zero/drawer";export default function DrawerRoute() { return ( <div className="flex flex-wrap gap-3"> <Drawer> <DrawerTrigger render={<Button />}>Show the route</DrawerTrigger> <DrawerContent> <DrawerHeader> <DrawerTitle>Rail yards → North gate</DrawerTitle> <DrawerDescription>2.4 km · about 18 minutes</DrawerDescription> </DrawerHeader> <DrawerBody> <ol className="grid list-decimal gap-2 ps-5 text-zero-text-2"> <li>Leave the yards by the east side.</li> <li>Keep to the canal until Tower 9.</li> <li>Sign for the crate at the north gate.</li> </ol> </DrawerBody> <DrawerFooter> <DrawerClose render={<Button />}>Start</DrawerClose> <DrawerClose render={<Button variant="secondary" />}> Not yet </DrawerClose> </DrawerFooter> </DrawerContent> </Drawer> <Drawer side="right"> <DrawerTrigger render={<Button variant="secondary" />}> From the right </DrawerTrigger> <DrawerContent> <DrawerHeader> <DrawerTitle>Notes</DrawerTitle> <DrawerDescription>Swipe it back to the right.</DrawerDescription> </DrawerHeader> <DrawerBody> <p className="text-zero-text-2">Gate 4 is closed after 21:00.</p> </DrawerBody> </DrawerContent> </Drawer> </div> );}行为
滑动时面板跟随手指移动，背后的页面随之逐渐变亮；拖动距离足够远或速度足够快时即关闭。side 可让它从其他边缘滑入；Sheet 同样可以从各边滑入，但不支持滑动手势。系统开启「减少动态效果」时仅保留淡入淡出。
属性
Drawer
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| side | "bottom" | "top" | "left" | "right" | "bottom" | 从哪一侧滑入，同时决定滑动关闭的方向。 |
DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose
另可传入 Base UI Drawer.Popup 的全部属性。