代码演示
如何引入
基本
点击遮罩层不可关闭
修改
maskClosable
为 false
则不可通过点击遮罩层来关闭对话框。自定义按钮文字
通过设置
okText
与 cancelText
属性可自定义按钮显示的文字。注意:命令式调用的 Modal 需要通过这两个属性来设置 i18 的文本,因为我们无法修改React组件树,命令式调用插入的Component无法消费到Locale相关的Context
自定义按钮属性
通过设置
okButtonProps
与 cancelButtonProps
属性可自定义按钮的属性。自定义对话框头部和页脚
如果需要实现更丰富的个性化需求,可以通过
header
自定义头部,footer
自定义页脚的按钮。把 header
设为 null
时则不展示头部区域;不需要显示任何按钮时,同样可以把 footer
设为 null
。自定义对话框的样式
通过设置
style
可以自定义样式及位置如 style.top
,也可以通过 centered
使对话框居中显示。
也可以通过设置 maskStyle
自定义遮罩样式,及 bodyStyle
自定义对话框内容样式。自定义的对话框
通过灵活使用使用
header
,footer
等属性可以实现一个完全自定义的对话框。全屏Modal
使用
fullScreen={true}
可以开启全屏对话框命令式调用
使用
confirm()
可以设置一个确认框。支持各种类型的信息提示。命令式调用也可以自定义 icon , 支持 string 和 ReactNode 类型。其他 Modal 支持的 props 都可以传入。Hooks用法
通过 Modal.useModal 创建支持读取 context 的 contextHolder。
API参考
Modal
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
afterClose | 对话框完全关闭后的回调函数 v1.16.0 后提供 | () => void | 无 |
bodyStyle | 对话框内容的样式 | CSSProperties | 无 |
cancelButtonProps | 取消按钮的 props | ButtonProps | 无 |
cancelText | 取消按钮的文字 | string | 无 |
centered | 是否居中显示 | boolean | false |
className | 可用于设置样式类名 | string | 无 |
closable | 是否显示右上角的关闭按钮 | boolean | true |
closeIcon | 关闭按钮的icon v1.0.0 后提供 | ReactNode | <IconClose /> |
closeOnEsc | 允许通过键盘事件Esc触发关闭 v1.0.0 后提供 | boolean | false |
confirmLoading | 确认按钮 loading | boolean | false |
content | 对话框内容 | ReactNode | 无 |
footer | 对话框底部 | ReactNode | 无 |
fullScreen | 对话是否是全屏(会覆盖 width height) v1.18.0 后提供 | boolean | false |
getPopupContainer | 指定父级 DOM,弹层将会渲染至该 DOM 中,自定义需要设置 position: relative v0.33.0 后提供 | () => HTMLElement | () => document.body |
hasCancel | 是否显示取消按钮 | boolean | true |
header | 对话框头部 | ReactNode | 无 |
height | 高度 | number | 无 |
icon | 自定义icon v1.1.0 后提供 | ReactNode | - |
keepDOM | 关闭对话框时是否销毁 v1.0.0 后提供 | boolean | false |
lazyRender | 配合 keepDOM 使用,为 true 时挂载时不会渲染对话框组件 v1.0.0 后提供 | boolean | true |
mask | 是否显示遮罩 | boolean | true |
maskClosable | 是否允许通过点击遮罩来关闭对话框 | boolean | true |
maskStyle | 遮罩的样式 | CSSProperties | 无 |
motion | 动画效果开关 | boolean | true |
okButtonProps | 确认按钮的 props | ButtonProps | 无 |
okText | 确认按钮的文字 | string | 无 |
okType | 确认按钮的类型, 可选: 'primary'、'secondary'、'tertiary'、'warning'、'danger' | string | primary |
size | 对话框宽度尺寸,支持 small (448px), medium (684px), large (920px),full-width (100vw - 64px) v1.0.0 后提供 | string | 'small' |
style | 可用于设置样式 | CSSProperties | 无 |
title | 对话框的标题 | ReactNode | 无 |
visible | 对话框是否可见 | boolean | false |
width | 宽度 | number | 448 |
zIndex | 遮罩的 z-index 值 | number | 1000 |
onCancel | 取消对话框时的回调函数 | (e: any) => void | Promise<any> | 无 |
onOk | 点击确认按钮时的回调函数 | (e: any) => void | Promise<any> | 无 |
Modal.method()
Modal.info
Modal.success
Modal.error
Modal.warning
Modal.confirm
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
bodyStyle | 对话框内容的样式 | CSSProperties | 无 |
cancelButtonProps | 取消按钮的 props | ButtonProps | 无 |
cancelText | 取消按钮的文字 | string | 无 |
centered | 是否居中显示 | boolean | false |
className | 可用于设置样式类名 | string | 无 |
closable | 是否显示右上角的关闭按钮 | boolean | true |
confirmLoading | 确认按钮 loading | boolean | false |
content | 对话框内容 | ReactNode | 无 |
footer | 对话框底部 | ReactNode | 无 |
header | 对话框头部 | ReactNode | 无 |
height | 高度 | number | 无 |
icon | 自定义icon | ReactNode | - |
mask | 是否显示遮罩 | boolean | true |
maskClosable | 是否允许通过点击遮罩来关闭对话框 | boolean | true |
maskStyle | 遮罩的样式 | CSSProperties | 无 |
okButtonProps | 确认按钮的 props | ButtonProps | 无 |
okText | 确认按钮的文字 | string | 无 |
okType | 确认按钮的类型 | string | primary |
style | 可用于设置样式 | CSSProperties | 无 |
title | 对话框的标题 | ReactNode | 无 |
width | 宽度 | number | 520 |
zIndex | 遮罩的 z-index 值 | number | 1000 |
onCancel | 取消回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | (e: any) => void | Promise<any> | 无 |
onOk | 点击确定回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | (e: any) => void | Promise<any> | 无 |
以上函数调用后,会返回一个引用,可以通过该引用更新和关闭弹窗。
Modal.destroyAll
v>=0.37.0
使用 Modal.destroyAll() 可以销毁命令式及以上
.info()
等创建的弹窗。Modal.useModal
v>=1.2.0
当你需要使用 Context 时,可以通过 Modal.useModal 创建一个 contextHolder 插入相应的节点中。此时通过 hooks 创建的 Modal 将会得到 contextHolder 所在位置的所有上下文。创建的 modal 对象拥有与 Modal.method 相同的创建通知方法。
设计变量
FAQ
- 为什么使用 LocaleProvider 后, Modal.confirm 确认、取消按钮的文本没有国际化? 在1.2版本之后,当你需要获取 context 信息,如 ConfigProvider 或者 LocaleProvider 的配置时,可以通过 Modal.useModal 方法来返回 modal 实体以及 contextHolder 节点。将 contextHolder 插入到你需要获取 context 位置即可。如果是1.2版本之前,或者不想使用 Hooks 的写法,也可以通过
okText
和cancelText
这两个属性来设置 i18 的文本。