Dialog
Dialog 适合不离开当前页面、但必须先完成的简短任务。标题直接说明任务，页脚只保留完成或退出所需的操作。
适用场景
- 确认危险操作
- 在当前页面编辑少量字段
- 展示需要确认的重要信息
需要从屏幕边缘展开面板、保留部分页面作为参考时，可以使用 Sheet。
用法
建议在 DialogTrigger 上使用 asChild，并传入 <button> 或 Button 作为触发按钮。
用法
结构
| 部件 | 作用 |
|---|---|
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。- 对话框适合简短的说明和操作。较长的表单可以放在独立页面或抽屉中。
- 对话框打开时保留触发器，关闭后焦点才能返回原处。
玻璃外观
需要透出页面背景时，为 DialogContent 设置 appearance="glass"，并根据实际背景检查文字对比度。完整示例见 液态玻璃。