Drawer 抽屉
从屏幕底部拉起适合触屏操作的补充任务或详情面板。
使用概览
适合使用
- 移动端需要保留主页面上下文并展示短表单或操作时。
不建议使用
- 桌面端需要并排比较信息，或内容高度远超一个视口时。
真实示例
移动订单抽屉
从底部展示订单摘要并保留列表上下文。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/drawer.json基础用法
导入
import { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerDescription } from "@richardqiu/quartz/drawer";JSX
<Drawer><DrawerTrigger>查看订单</DrawerTrigger><DrawerContent><DrawerTitle>订单详情</DrawerTitle><DrawerDescription>共 3 件商品，等待发货。</DrawerDescription></DrawerContent></Drawer>状态与控制摘要
默认
键盘焦点可见
已打开
已关闭
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
dismissible | boolean | true | 决定用户能否通过手势或外部交互关闭抽屉。 |
组合结构
- 01
Drawer - 02
DrawerTrigger - 03
DrawerContent - 04
DrawerHeader - 05
DrawerTitle - 06
DrawerDescription - 07
DrawerFooter - 08
DrawerClose
键盘约定
- 继承 Dialog 的焦点陷阱、Escape 关闭与触发器焦点恢复。
可访问性契约
- 拖拽把手为装饰内容，DrawerTitle 与 DrawerDescription 提供名称和上下文。
- 当前版本没有滑动手势，必须提供可见的关闭或完成操作。