Modal组件呈现模态框, 模态框打开时会阻止与外部元素的交互, 直到关闭模态框.
未指定title属性,并且withCloseButton为false, 则会移除头部
size属性可以设置模态框的宽度大小. 可以是预定义的: "xs","sm","md","lg","xl", 也可以是任意CSS的长度.
特殊的, size="auto", 模态框的宽度会适应它的内容.
centered属性设置模态框垂直居中.
当内容超过屏幕高度时, 会自动显示滚动条
fullScreen属性可以全屏模式显示模态框
模态框中可以放置任何内容, 下面的例子演示了在模态框中使用表单控件.
| 属性名 | 类型 | 是否必须 | 默认值 | 说明 |
|---|---|---|---|---|
| centered | boolean | undefined | no | false | Determines whether the modal should be centered vertically |
| children | React.ReactNode | no | Modal content | |
| closeButtonProps | ModalCloseButtonProps | undefined | no | Props passed down to the close button | |
| closeOnClickOutside | boolean | undefined | no | true | Determines whether the modal/drawer should be closed when user clicks on the overlay |
| closeOnEscape | boolean | undefined | no | true | Determines whether <code>onClose</code> should be called when user presses the escape key |
| fullScreen | boolean | undefined | no | false | Determines whether the modal should be full screen |
| id | string | undefined | no | Id used to connect modal/drawer with body and title | |
| keepMounted | boolean | undefined | no | false | If set modal/drawer will not be unmounted from the DOM when it is hidden, <code>display: none</code> styles will be added instead |
| lockScroll | boolean | undefined | no | true | Determines whether scroll should be locked when <code>opened={true}</code> |
| onClose | () => void | yes | Called when modal/drawer is closed | |
| opened | boolean | yes | Determines whether modal/drawer is opened | |
| overlayProps | ModalOverlayProps | undefined | no | Props passed down to the <code>Overlay</code> component, use to configure opacity, <code>background-color</code>, styles and other properties | |
| padding | string | undefined | no | "md" | Key of <code>theme.spacing</code> or any valid CSS value to set content, header and footer padding |
| portalProps | Omit<PortalProps, "children"> | undefined | no | Props passed down to the Portal component when <code>withinPortal</code> is set | |
| radius | string | undefined | no | "md" | Key of <code>theme.radius</code> or any valid CSS value to set <code>border-radius</code> |
| removeScrollProps | RemoveScrollProps | undefined | no | Props passed down to react-remove-scroll, can be used to customize scroll lock behavior | |
| returnFocus | boolean | undefined | no | true | Determines whether focus should be returned to the last active element when <code>onClose</code> is called |
| shadow | ThemeShadow | undefined | no | "xl" | Key of <code>theme.shadows</code> or any valid CSS box-shadow value |
| size | string | undefined | no | "md" | Controls width of the content area |
| title | React.ReactNode | no | Modal title | |
| transitionProps | Omit<TransitionProps, "children"> | undefined | no | { duration: 200, transition: 'fade' } | Props added to the <code>Transition</code> component that used to animate overlay and body, use to configure duration and animation type |
| trapFocus | boolean | undefined | no | true | Determines whether focus should be trapped |
| withCloseButton | boolean | undefined | no | Determines whether the close button should be rendered, <code>true</code> by default | |
| withOverlay | boolean | undefined | no | Determines whether the overlay should be rendered, <code>true</code> by default | |
| withinPortal | boolean | undefined | no | true | Determines whether the component should be rendered inside <code>Portal</code> |
| yOffset | string | number | undefined | no | ||
| zIndex | string | number | undefined | no | 200 | <code>z-index</code> CSS property of the root element |