使用指南
对话框是用于在不离开主路径的情况下,提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。
对话框是用于在不离开主路径的情况下,提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。
第一个对话框
弹层出内嵌表单
通过 footerActions 来调整确定按钮和取消按钮是否出现以及相互间的位置,通过 footerAlign 来调整底部按钮的对齐方式。
默认的 footer 为确定取消两个按钮,你可以自定义 footer 的内容。
当对话框高度超过浏览器视口高度时,默认会让对话框 Body 区域出现滚动条,以保证底部按钮可以直接出现在视口内,方便操作,如果你想不想出现滚动条,而是展示对话框内所有内容,请设置 isFullScreen 为 true。
Dialog 提供 notice,warning,error,success的快捷调用方式,以及更底层的 show 方式。
在使用 Dialog快捷调用时,如果 onOk 返回 Promise,对话框会在 Promise resolve 时关闭,除非调用 resolve(false)
。
通过okProps
与cancelProps
设置aria-label
属性,屏幕阅读器读取确定和取消按钮。关于键盘操作请参考ARIA and KeyBoard
。
使用 'height' 属性设置 Dialog 高度。
弹窗内容分步
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
visible | 是否显示 | Boolean | false |
loading | 是否加载中 | Boolean | false |
loadingTip | 加载时的提示内容 | ReactNode | - |
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 | 'cancel', 'ok' |
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,mask' |
onClose | 对话框关闭时触发的回调函数 签名: Function(trigger: String, event: Object) => void 参数: trigger: {String} 关闭触发行为的描述字符串 event: {Object} 关闭时事件对象 | Function | () => {} |
afterClose | 对话框关闭后触发的回调函数, 如果有动画,则在动画结束后触发 签名: Function() => void | Function | () => {} |
hasMask | 是否显示遮罩 | Boolean | true |
animation | 显示隐藏时动画的播放方式 | Object/Boolean | { in: 'fadeInDown', out: 'fadeOutUp', } |
autoFocus | 对话框弹出时是否自动获得焦点 | Boolean | false |
minMargin | 对话框距离浏览器顶部间距和底部的最小间距 | Number | 56 |
height | 对话框的高度样式属性 | String | - |
noBodyPadding | 内容区无padding | Boolean | false |
以下只列举 config 可以传入的常用属性,Dialog 组件的其他属性也可以传入
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 标题 | ReactNode | '' |
content | 内容 | ReactNode | '' |
onOk | 在点击确定按钮时触发的回调函数 | Function | () => {} |
onCancel | 在点击取消按钮时触发的回调函数 | Function | () => {} |
messageProps | 内嵌 Message 组件属性对象 | Object | {} |
以下只列举 config 可以传入的常用属性,Dialog 组件其他属性也可以传入
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 类型,可选值notice, warning, error, success, | String | notice |
title | 标题 | ReactNode | '' |
content | 内容 | ReactNode | '' |
onOk | 在点击确定按钮时触发的回调函数 | Function | () => {} |
onCancel | 在点击取消按钮时触发的回调函数 | Function | () => {} |
以上快捷调用函数调用后会返回一个引用,可以通过引用更新和关闭Dialog
示例
const dialog = Dialog.show({
title: '标题',
content: '内容',
});
dialog.update({
title: '新标题',
content: '新内容',
})
dialog.hide();
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
visible | 是否显示 | Boolean | false |
loading | 是否加载中 | Boolean | false |
loadingTip | 加载时的提示内容 | ReactNode | - |
title | 标题 | ReactNode | - |
children | 内容 | ReactNode | - |
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 |
animation | 显示隐藏时动画的播放方式 | Object/Boolean | { in: 'fadeInDown', out: 'fadeOutUp', } |
autoFocus | 对话框弹出时是否自动获得焦点 | Boolean | false |
minMargin | 对话框距离浏览器顶部间距和底部的最小间距 | Number | 56 |
height | 对话框的高度样式属性 | String | - |
noBodyPadding | 内容区无padding | Boolean | false |
defaultCurrent | 默认步骤屏id,非受控 | String | - |
current | 当前步骤屏id,受控 | String | - |
onStepChange | 步骤屏发生变化时的回调 | func | (current) => {} |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
id | 当前屏唯一标识 | String | - |
title | 当前屏弹窗标题 | ReactNode | - |
footer | 当前屏弹窗底部 | ReactNode | - |
children | 当前屏内容 | ReactNode |
键盘 | 说明 |
---|---|
esc | 按下ESC键将会关闭dialog而不触发任何的动作 |
tab | 正向聚焦到任何可以被聚焦的元素, 在Dialog显示的时候,焦点始终保持在框体内 |
shift+tab | 反向聚焦到任何可以被聚焦的元素,在Dialog显示的时候,焦点始终保持在框体内 |