Dialog 弹窗

对话框

使用指南

对话框是用于在不离开主路径的情况下,提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。

基本

第一个对话框

嵌套表单

弹层出内嵌表单

When the height of the dialog exceeds the viewport height of the browser, whether to show the scroll bar:

内容较多的对话框

当对话框高度超过浏览器视口高度时,默认会让对话框 Body 区域出现滚动条,以保证底部按钮可以直接出现在视口内,方便操作,如果你想不想出现滚动条,而是展示对话框内所有内容,请设置 isFullScreen 为 true。

       

快捷调用

Dialog 提供 notice,warning,error,success的快捷调用方式,以及更底层的 show 方式。

延迟关闭

在使用 Dialog快捷调用时,如果 onOk 返回 Promise,对话框会在 Promise resolve 时关闭,除非调用 resolve(false)

无障碍

通过okPropscancelProps设置aria-label属性,屏幕阅读器读取确定和取消按钮。关于键盘操作请参考ARIA and KeyBoard

设置高度

使用 'height' 属性设置 Dialog 高度。

分步弹窗

弹窗内容分步

API

Dialog

参数说明类型默认值
visible是否显示Booleanfalse
loading是否加载中Booleanfalse
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是否显示遮罩Booleantrue
animation显示隐藏时动画的播放方式Object/Boolean{ in: 'fadeInDown', out: 'fadeOutUp', }
autoFocus对话框弹出时是否自动获得焦点Booleanfalse
minMargin对话框距离浏览器顶部间距和底部的最小间距Number56
height对话框的高度样式属性String-
noBodyPadding内容区无paddingBooleanfalse

Dialog.notice(config)/Dialog.warning(config)/Dialog.error(config)/Dialog.success(config)

以下只列举 config 可以传入的常用属性,Dialog 组件的其他属性也可以传入

属性说明类型默认值
title标题ReactNode''
content内容ReactNode''
onOk在点击确定按钮时触发的回调函数Function() => {}
onCancel在点击取消按钮时触发的回调函数Function() => {}
messageProps内嵌 Message 组件属性对象Object{}

Dialog.show

以下只列举 config 可以传入的常用属性,Dialog 组件其他属性也可以传入

属性说明类型默认值
type类型,可选值notice, warning, error, success,Stringnotice
title标题ReactNode''
content内容ReactNode''
onOk在点击确定按钮时触发的回调函数Function() => {}
onCancel在点击取消按钮时触发的回调函数Function() => {}

Dialog.StepDialog

参数说明类型默认值
visible是否显示Booleanfalse
loading是否加载中Booleanfalse
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是否显示遮罩Booleantrue
animation显示隐藏时动画的播放方式Object/Boolean{ in: 'fadeInDown', out: 'fadeOutUp', }
autoFocus对话框弹出时是否自动获得焦点Booleanfalse
minMargin对话框距离浏览器顶部间距和底部的最小间距Number56
height对话框的高度样式属性String-
noBodyPadding内容区无paddingBooleanfalse
defaultCurrent默认步骤屏id,非受控String-
current当前步骤屏id,受控String-
onStepChange步骤屏发生变化时的回调func(current) => {}

Dialog.StepView

参数说明类型默认值
id当前屏唯一标识String-
title当前屏弹窗标题ReactNode-
footer当前屏弹窗底部ReactNode-
children当前屏内容ReactNode

常见问题

ARIA and Keyboard

键盘说明
esc按下ESC键将会关闭dialog而不触发任何的动作
tab正向聚焦到任何可以被聚焦的元素, 在Dialog显示的时候,焦点始终保持在框体内
shift+tab反向聚焦到任何可以被聚焦的元素,在Dialog显示的时候,焦点始终保持在框体内