示例
直接操作示例，查看组件在具体任务中的状态与反馈。
显示密度设置
使用建议
始终提供明确标题和说明
title 说明正在处理的对象或决定，description 说明影响与退出方式，避免只靠自定义 header 提供可访问名称。
由宿主持有完成结果
受控 open 只表达对话框状态；确认后的请求、错误、重试和成功反馈由宿主执行，再决定何时关闭。
限制中断和嵌套
只在必须阻断背景操作时使用模态对话框，避免连续嵌套或把长表单、长文档塞进短确认流程。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseDialog } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- titleless 或仅 custom-header 的可访问命名策略尚未定案；公开使用应同时提供非空 title。
- T17 尚缺 mobile virtual keyboard、long-content、touch、nested overlay、deterministic visual 与最终 packed React 18/19 证据。
- Deterministic visual evidence; final packed React 18/19 checks; mobile virtual keyboard, long-content, and touch-device checks; a titleless/custom-header-only accessible-name strategy; and cross-overlay nested matrices remain pending T17/T23.
API
查看组件源码export interface BaseDialogProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'defaultValue' | 'onChange' | 'style' | 'title'
> {
open?: boolean;
defaultOpen?: boolean;
title?: ReactNode;
description?: ReactNode;
header?: ReactNode;
footer?: ReactNode;
trigger?: ReactNode;
triggerLabel?: ReactNode;
triggerIcon?: ReactNode;
triggerTone?: BaseControlTone;
triggerDisabled?: boolean;
closeLabel?: string;
closeOnEscape?: boolean;
closeOnOverlayClick?: boolean;
showCloseButton?: boolean;
portal?: boolean;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseDialogClassNames;
style?: CSSProperties;
children?: ReactNode;
onOpenChange?: (open: boolean) => void;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
open | 组件当前的受控打开状态。 | boolean | — |
defaultOpen | 非受控模式下是否默认打开。 | boolean | false |
title | 对话框显示并用于可访问性关联的标题内容。 | ReactNode | — |
description | 用于补充标题或标签含义的说明内容。 | ReactNode | — |
header | 组件顶部区域呈现的内容。 | ReactNode | — |
footer | 组件底部区域呈现的内容。 | ReactNode | — |
trigger | 用于触发打开、关闭或显示内容的元素。 | ReactNode | — |
triggerLabel | 显示在触发控件中的标签内容。 | ReactNode | — |
triggerIcon | 显示在触发控件中的图标。 | ReactNode | — |
triggerTone | 对话框触发控件使用的语义色调。 | BaseControlTone | 'default' |
triggerDisabled | 是否禁用对话框触发控件。 | boolean | false |
closeLabel | 关闭按钮的可访问名称。 | string | — |
closeOnEscape | 按下 Escape 键时是否关闭对话框。 | boolean | true |
closeOnOverlayClick | 点击遮罩区域时是否关闭对话框。 | boolean | true |
showCloseButton | 是否在对话框中显示内置关闭按钮。 | boolean | true |
portal | 是否通过 Portal 将浮层挂载到外部容器。 | boolean | false |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseDialogClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
children | 在 BaseDialog 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
onOpenChange | 打开状态变化时调用的回调，参数为新的打开状态。 | (open: boolean) => void | — |