Dialog

Dialog 用于在当前页面之上展示一段需要用户关注的内容。它基于 Radix Dialog 封装，提供标题、描述、关闭按钮、内容区和页脚操作的常用组合。

import {
  Dialog,
  DialogAction,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogRoot,
  DialogTitle,
  DialogTrigger
} from '@skyroc/web-ui';

何时使用

• 需要在不离开当前页面的情况下展示补充内容、表单或短流程。
• 需要用户完成一个轻量操作后再回到原页面。
• 需要自定义页脚按钮、关闭按钮或内容布局。
• 需要确认高风险操作时使用 AlertDialog；只展示页面内提示时使用 Alert。

基础用法

通过 trigger 提供打开对话框的触发元素，通过 title、description 和 children 组织内容。

页脚操作

默认页脚包含一个 OK 按钮，点击后会触发 onOk 并关闭对话框。通过 footer 可以完全替换页脚内容；设置为 null 或 false 时隐藏页脚。

尺寸

通过 size 调整对话框最大宽度、字号、内边距和各区域间距，从 xs 到 2xl 共 6 个尺寸。

自定义样式

通过 classNames 可以分别控制 overlay、content、header、title、description、close 和 footer。也可以通过 contentProps、headerProps、titleProps、descriptionProps、closeProps、footerProps、overlayProps 向对应结构组件传入额外属性。

受控状态

Dialog 透传 Radix Root 的 open、defaultOpen、onOpenChange 和 modal。当前封装会始终渲染 DialogTrigger，因此实际使用时应提供 trigger 元素。

API

Dialog

通用属性参考：基于 Radix Dialog Root，支持打开状态、模态行为、标题描述、内容区、页脚和 slot 样式配置。

子组件

Dialog 也导出基础结构组件，适合在需要更细粒度组合时使用。

类型