Dialog
适用场景
- 确认危险操作
- 不离开当前页，改一组很短的字段
- 用户必须看到的信息
如果内容应该贴着屏幕一边，或者用户还要对照后面的页面，用 Sheet。
用法
触发器必须是真正的 button。DialogTrigger 建议配合 asChild。
用法
结构
| 部件 | 作用 |
|---|---|
Dialog | 打开状态 |
DialogTrigger | 打开对话框 |
DialogContent | 传送门、遮罩和面板 |
DialogHeader / DialogTitle / DialogDescription | 无障碍标题 |
DialogFooter | 操作区 |
DialogClose | 显式关闭 |
无障碍必须有 DialogTitle。DialogContent 右上角已经带关闭按钮。
API 参考
触发器支持 asChild。DialogContent 已经包含关闭按钮。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
asChild | boolean | false | 用于 DialogTrigger 和 DialogClose，将 props 合并到真正的 button 子节点。 |
open | boolean | — | Dialog 的受控打开状态。 |
defaultOpen | boolean | — | Dialog 非受控模式的初始打开状态。 |
onOpenChange | (open: boolean) => void | — | Dialog 打开或关闭时调用。 |
说明
asChild的子节点必须是 button，不要再包一层div。- 对话框文案要短。长表单放到页面或抽屉里。