Modal 模态框
一套模态对话框组件,用于消息提示、确认消息和提交内容。 如果需要放置更多内容可以使用 Drawer。
模态框,包含下面组件:
<Modal.Header>
<Modal.Title>
<Modal.Body>
<Modal.Footer>
获取组件
import { Modal } from 'rsuite';
演示
背景板
当设置为 true,Modal 打开时会显示背景,点击背景会关闭 Modal,如果不想关闭 Modal,可以设置为 'static'
Props
<Modal>
| 属性名称 |
类型 (默认值) |
描述 |
| autoFocus |
boolean (true) |
当设置为 true, Modal 被打开是自动焦点移到其自身,辅助屏幕阅读器容易访问 |
| backdrop |
unions: boolean, 'static' |
当设置为 true,Modal 打开时会显示背景,点击背景会关闭 Modal,如果不想关闭 Modal,可以设置为 'static' |
| backdropClassName |
string |
应用于 backdrop DOM 节点的 css class |
| classPrefix |
string ('modal') |
组件 CSS 类的前缀 |
| dialogClassName |
string |
应用于 Dialog DOM 节点的 css class |
| dialogComponentClass |
React.ElementType (ModalDialog) |
以对 Dialog 使用自定义元素类型 |
| enforceFocus |
boolean (true) |
当设置为 true, Modal 将防止焦点在打开时离开,辅助屏幕阅读器容易访问 |
| full |
boolean |
撑满全屏 |
| keyboard |
boolean (true) |
按下 esc 键时关闭 Modal |
| onEnter |
() => void |
显示前动画过渡的回调函数 |
| onEntered |
() => void |
显示后动画过渡的回调函数 |
| onEntering |
() => void |
显示中动画过渡的回调函数 |
| onExit |
() => void |
退出前动画过渡的回调函数 |
| onExited |
() => void |
退出后动画过渡的回调函数 |
| onExiting |
() => void |
退出中动画过渡的回调函数 |
| onHide |
() => void |
隐藏时的回调函数 |
| onShow |
() => void |
显示时的回调函数 |
| overflow |
boolean (true) |
body 内容过长时自动设置高度 |
| show * |
boolean |
显示 Modal |
| size |
enum: 'lg', 'md', 'sm', 'xs' (sm) |
Modal 尺寸 |
| 属性名称 |
类型 (默认值 ) |
描述 |
| classPrefix |
string ('modal-header') |
组件 CSS 类的前缀 |
| closeButton |
boolean (true) |
当设置为 true, 显示关闭按钮 |
| onHide |
(event: SyntheticEvent<any>) => void |
点击关闭按钮的回调函数 |
<Modal.Title>
| 属性名称 |
类型 (默认值) |
描述 |
| classPrefix |
string ('modal-title') |
组件 CSS 类的前缀 |
| 属性名称 |
类型 (默认值) |
描述 |
| classPrefix |
string ('modal-footer') |
组件 CSS 类的前缀 |
<Modal.Body>
| 属性名称 |
类型 (默认值) |
描述 |
| classPrefix |
string ('modal-body') |
组件 CSS 类的前缀 |