Dialog 对话框
在当前页面之上承载需要聚焦处理的表单、详情或短流程。
使用概览
适合使用
- 任务需要暂时离开主内容，但完成后应返回原上下文时。
不建议使用
- 内容复杂、步骤较多或需要可分享网址的完整页面时。
真实示例
编辑名称对话框
在不离开当前页面的情况下编辑项目名称。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/dialog.json基础用法
导入
import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription } from "@richardqiu/quartz/dialog";JSX
<Dialog><DialogTrigger>编辑名称</DialogTrigger><DialogContent><DialogTitle>编辑项目名称</DialogTitle><DialogDescription>名称会显示在团队工作区。</DialogDescription></DialogContent></Dialog>状态与控制摘要
默认
键盘焦点可见
已打开
已关闭
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
onOpenChange | (open: boolean) => void | 未设置 | 在打开或关闭对话框时通知受控状态。 |
组合结构
- 01
Dialog - 02
DialogTrigger - 03
DialogContent - 04
DialogHeader - 05
DialogTitle - 06
DialogDescription - 07
DialogFooter - 08
DialogClose
键盘约定
- Tab 与 Shift+Tab 保持在模态框内；Escape 关闭后焦点返回触发器。
可访问性契约
- DialogContent 必须包含 DialogTitle，并建议用 DialogDescription 补充上下文。
- 打开时由模态模式管理页面滚动和外部交互。