模态框(Modal)是覆盖在父窗体上的子窗体,位于页面最上层。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互,如查看、创建、编辑、向导等。
API
Modal
参数 |
说明 |
类型 |
默认值 |
backdrop |
是否弹出遮罩层/遮罩层点击是否触发关闭 |
boolean/"static" |
true |
backdropClosable |
遮罩层点击是否触发关闭 |
boolean |
true |
keyboard |
esc触发关闭 |
boolean |
- |
animation |
显隐时是否使用动画 |
boolean |
true |
dialogComponentClass |
传递给模态框使用的元素 |
string/element |
- |
dialogClassName |
传递给模态框的样式 |
class |
- |
autoFocus |
自动设置焦点 |
boolean |
true |
enforceFocus |
防止打开时焦点离开模态框 |
boolean |
- |
show |
是否打开模态框 |
string |
- |
width |
模态框宽度,如只传数字则会拼接默认单位 px 。例如 100px/100/100%/100rem/100em |
string/number |
- |
onHide |
关闭时的钩子函数 |
function |
- |
size |
模态框尺寸 |
sm/lg/xlg |
- |
onEnter |
开始显示时的钩子函数 |
function |
- |
onEntering |
显示时的钩子函数 |
function |
- |
onEntered |
显示完成后的钩子函数 |
function |
- |
onExit |
隐藏开始时的钩子函数 |
function |
- |
onExiting |
隐藏进行时的钩子函数 |
function |
- |
onExited |
隐藏结束时的钩子函数 |
function |
- |
container |
容器 |
DOM元素/React组件/或者返回React组件的函数 |
- |
onShow |
当模态框显示时的钩子函数 |
function |
- |
renderBackdrop |
返回背景元素的函数 |
function |
- |
onEscapeKeyUp |
响应ESC键时的钩子函数 |
function |
- |
onBackdropClick |
点击背景元素的函数 |
function |
- |
backdropStyle |
添加到背景元素的style |
function |
- |
backdropClassName |
添加到背景元素的class |
function |
- |
containerClassName |
添加到外部容器的class |
function |
- |
transition |
动画组件 |
function |
- |
dialogTransitionTimeout |
设置动画超时时间 |
function |
- |
backdropTransitionTimeout |
设置背景动画超时时间 |
function |
- |
manager |
管理模态框状态的组件 |
required |
- |
Modal.Header
参数 |
说明 |
类型 |
默认值 |
closeButton |
是否显示关闭按钮 |
boolean |
false |
已支持的键盘操作