Sheet 侧边面板
从屏幕边缘滑入较宽的任务面板，同时保留主页面背景语境。
使用概览
适合使用
- 导航、详情或编辑任务需要比弹出层更多空间时。
不建议使用
- 内容应永久并列展示，或任务需要独立网址与完整页面层级时。
真实示例
右侧筛选面板
从右侧打开有标题和说明的筛选任务。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/sheet.json基础用法
导入
import { Sheet, SheetTrigger, SheetContent, SheetTitle, SheetDescription } from "@richardqiu/quartz/sheet";JSX
<Sheet><SheetTrigger>打开筛选</SheetTrigger><SheetContent side="right"><SheetTitle>筛选项目</SheetTitle><SheetDescription>按负责人和状态缩小结果。</SheetDescription></SheetContent></Sheet>状态与控制摘要
默认
键盘焦点可见
已打开
已关闭
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "right" | 设置面板从哪个屏幕边缘进入。 |
组合结构
- 01
Sheet - 02
SheetTrigger - 03
SheetContent - 04
SheetHeader - 05
SheetTitle - 06
SheetDescription - 07
SheetFooter - 08
SheetClose
键盘约定
- 继承 Dialog 的焦点陷阱、Escape 关闭与触发器焦点恢复。
可访问性契约
- 每个 SheetContent 都必须包含 SheetTitle，并建议提供 SheetDescription。
- 方向只改变放置位置，不改变阅读和焦点顺序。