11<div align =" center " >
22 <h1 >@rc-component/dialog</h1 >
3- <p ><sub >Ant Design 生态的一部分。</sub ></p >
4- <img alt =" Ant Design " height =" 32 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " />
3+ <p ><sub ><img alt =" Ant Design " height =" 14 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " style =" vertical-align : -0.125em ;" /> Ant Design 生态的一部分。</sub ></p >
54 <p >💬 可组合的 React 对话框组件。</p >
65</div >
76
2928
3029## 特性
3130
32- - 支持 controlled visibility, mask, keyboard close, and focus restoration.
31+ - 支持受控可见性、遮罩、键盘关闭和焦点恢复。
3332- 支持自定义标题、页脚、关闭图标、容器、动画和弹窗内容渲染。
34- - 提供 semantic ` classNames ` and ` styles ` hooks for the dialog structure.
33+ - 为对话框结构提供语义 ` classNames ` 和 ` styles ` 挂钩。
3534- 提供编译后的 JavaScript、TypeScript 类型定义和 CSS 资源。
3635
3736## 安装
@@ -70,33 +69,33 @@ npm start
7069
7170| 参数 | 说明 | 类型 | 默认值 |
7271| --- | --- | --- | --- |
73- | afterClose | Callback after close animation ends | ` () => void ` | - |
74- | animation | Dialog animation name | string | - |
75- | className | Additional dialog class name | string | - |
76- | classNames | Semantic class names | ` { header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string } ` | - |
77- | closable | Whether to show close button, or close button props | boolean \| object | true |
78- | closeIcon | Custom close icon | ` React.ReactNode ` | - |
79- | destroyOnHidden | Unmount children after dialog closes | boolean | false |
80- | focusTriggerAfterClose | Focus trigger element after close | boolean | true |
72+ | afterClose | 关闭动画结束后回调 | ` () => void ` | - |
73+ | 动画片 | 对话框动画名称 | string | - |
74+ | className | 附加对话框className | string | - |
75+ | classNames | 语义className | ` { header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string } ` | - |
76+ | closable | 是否显示关闭按钮,或关闭按钮属性 | boolean \| object | true |
77+ | closeIcon | 自定义关闭图标 | ` React.ReactNode ` | - |
78+ | destroyOnHidden | 对话框关闭后卸载子项 | boolean | false |
79+ | focusTriggerAfterClose | 关闭后聚焦触发元素 | boolean | true |
8180| footer | Dialog footer | ` React.ReactNode ` | - |
82- | forceRender | Render dialog before it is first shown | boolean | false |
83- | getContainer | Container where dialog is mounted | ` () => HTMLElement ` | - |
84- | keyboard | Whether pressing Esc closes the dialog | boolean | true |
85- | mask | Whether to show mask | boolean | true |
86- | maskAnimation | Mask animation name | string | - |
87- | maskClosable | Whether clicking mask closes the dialog | boolean | true |
88- | maskTransitionName | Mask transition class name | string | - |
89- | modalRender | Custom modal content renderer | ` (node: React.ReactNode) => React.ReactNode ` | - |
90- | mousePosition | Mouse position used for transform origin | ` { x: number; y: number } ` | - |
91- | prefixCls | Component class name prefix | string | ` rc-dialog ` |
92- | scrollLock | Whether to lock body scroll when open | boolean | true |
93- | style | Root dialog style | ` React.CSSProperties ` | - |
81+ | forceRender | 在首次显示之前渲染对话框 | boolean | false |
82+ | getContainer | 装载对话框的容器 | ` () => HTMLElement ` | - |
83+ | keyboard | 按 Esc 是否关闭对话框 | boolean | true |
84+ | mask | 是否显示面具 | boolean | true |
85+ | maskAnimation | 蒙版动画名称 | string | - |
86+ | maskClosable | 单击蒙版是否关闭对话框 | boolean | true |
87+ | maskTransitionName | 掩码转换className称 | string | - |
88+ | modalRender | 自定义模态内容渲染器 | ` (node: React.ReactNode) => React.ReactNode ` | - |
89+ | mousePosition | 用于变换原点的鼠标位置 | ` { x: number; y: number } ` | - |
90+ | prefixCls | 组件className前缀 | string | ` rc-dialog ` |
91+ | scrollLock | 打开时是否锁定body滚动 | boolean | true |
92+ | 风格 | 根对话框样式 | ` React.CSSProperties ` | - |
9493| styles | Semantic styles | ` { header?: React.CSSProperties; body?: React.CSSProperties; footer?: React.CSSProperties; mask?: React.CSSProperties; content?: React.CSSProperties; wrapper?: React.CSSProperties } ` | - |
9594| title | Dialog title | ` React.ReactNode ` | - |
96- | transitionName | Dialog transition class name | string | - |
97- | visible | Whether the dialog is visible | boolean | false |
95+ | transitionName | 对话框转换className | string | - |
96+ | 可见的 | 对话框是否可见 | boolean | false |
9897| zIndex | Dialog z-index | number | - |
99- | onClose | Callback when close button or mask is clicked | ` (event: React.SyntheticEvent) => void ` | - |
98+ | onClose | 点击关闭按钮或遮罩时的回调 | ` (event: React.SyntheticEvent) => void ` | - |
10099
101100## 本地开发
102101
@@ -119,8 +118,8 @@ npm run build
119118npm run prepublishOnly
120119```
121120
122- The release flow is handled by ` @rc-component/np ` through the ` rc-np ` command after the package build.
121+ 包构建完成后,发布流程由 ` @rc-component/np ` 通过 ` rc-np ` 命令处理。
123122
124123## 许可证
125124
126- @rc-component/dialog is released under the [ MIT] ( ./LICENSE.md ) license.
125+ @rc-component/dialog 基于 [ MIT] ( ./LICENSE.md ) 许可证发布。
0 commit comments