0.1.28 • Published 4 years ago
rat-dialog v0.1.28
rat-dialog
组件介绍
- chinese: 弹窗
- category: Components
- type: 弹层
使用指南
对话框
何时使用
对话框是用于在不离开主路径的情况下，提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。
API
Dialog
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| visible | 是否显示 | Boolean | false |
| title | 标题 | ReactNode | - |
| children | 内容 | ReactNode | - |
| footer | 底部内容，设置为 false，则不进行显示 | Boolean/ReactNode | <Button type="primary">确定</Button>, <Button>取消</Button> |
| footerAlign | 底部按钮的对齐方式可选值:'left', 'center', 'right' | Enum | 'right' |
| footerActions | 指定确定按钮和取消按钮是否存在以及如何排列,可选值：'ok', 'cancel'（确认取消按钮同时存在，确认按钮在左）'cancel', 'ok'（确认取消按钮同时存在，确认按钮在右）'ok'（只存在确认按钮）'cancel'（只存在取消按钮） | Array | 'ok', 'cancel' |
| onOk | 在点击确定按钮时触发的回调函数签名:Function(event: Object) => void参数:event: {Object} 点击事件对象 | Function | () => {} |
| onCancel | 在点击取消按钮时触发的回调函数签名:Function(event: Object) => void参数:event: {Object} 点击事件对象 | Function | () => {} |
| okProps | 应用于确定按钮的属性对象 | Object | {} |
| cancelProps | 应用于取消按钮的属性对象 | Object | {} |
| closeable | 控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：close 表示点击关闭按钮可以关闭对话框mask 表示点击遮罩区域可以关闭对话框esc 表示按下 esc 键可以关闭对话框如 'close' 或 'close,esc,mask'如果设置为 true，则以上关闭方式全部生效如果设置为 false，则以上关闭方式全部失效 | String/Boolean | 'esc,close' |
| onClose | 对话框关闭时触发的回调函数签名:Function(trigger: String, event: Object) => void参数:trigger: {String} 关闭触发行为的描述字符串event: {Object} 关闭时事件对象 | Function | () => {} |
| afterClose | 对话框关闭后触发的回调函数, 如果有动画，则在动画结束后触发签名:Function() => void | Function | () => {} |
| hasMask | 是否显示遮罩 | Boolean | true |
| align | 对话框对齐方式 | String/Boolean | 'cc cc' |
Dialog.alert(config)/Dialog.confirm(config)
以下只列举 config 可以传入的常用属性，Dialog 组件的其他属性也可以传入
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | ReactNode | '' |
| content | 内容 | ReactNode | '' |
| onOk | 在点击确定按钮时触发的回调函数 | Function | () => {} |
| onCancel | 在点击取消按钮时触发的回调函数 | Function | () => {} |
| messageProps | 内嵌 Message 组件属性对象 | Object | {} |
Dialog.show
以下只列举 config 可以传入的常用属性，Dialog 组件其他属性也可以传入
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | ReactNode | '' |
| content | 内容 | ReactNode | '' |
| onOk | 在点击确定按钮时触发的回调函数 | Function | () => {} |
| onCancel | 在点击取消按钮时触发的回调函数 | Function | () => {} |
ARIA and Keyboard
| 键盘 | 说明 |
|---|---|
| esc | 按下ESC键将会关闭dialog而不触发任何的动作 |
| tab | 正向聚焦到任何可以被聚焦的元素， 在Dialog显示的时候，焦点始终保持在框体内 |
| shift+tab | 反向聚焦到任何可以被聚焦的元素，在Dialog显示的时候，焦点始终保持在框体内 |
0.1.28
4 years ago
0.1.27
5 years ago
0.1.26
5 years ago
0.1.25
5 years ago
0.1.24
5 years ago
0.1.23
5 years ago
0.1.22
5 years ago
0.1.21
5 years ago
0.1.20
5 years ago
0.1.19
5 years ago
0.1.18
5 years ago
0.1.17
5 years ago
0.1.16
5 years ago
0.1.15
5 years ago
0.1.14
5 years ago
0.1.13
5 years ago
0.1.12
5 years ago
0.1.11
5 years ago
0.1.10
5 years ago