Mask represents the background modal layer.
<Mask visible={visible} onClickMask={() => setVisible(false)} /><Mask visible={visible} onClickMask={() => setVisible(false)} />Basic usage of Mask component (click screen to close mask).
Showcase more usage of Mask component.
| Properties | Description | Type | Default |
|---|---|---|---|
| afterClose | Triggered when completely closed | () => void | - |
| afterShow | Triggered after fully displayed | () => void | - |
| color | Color of the mask | 'black' | 'white' | 'black' |
| destroyOnClose | Uninstall content when invisible | boolean | false |
| disableBodyScroll | Whether to disable body scrolling | boolean | true |
| forceRender | Render content forcely | boolean | false |
| getContainer | To get the specified mounted HTML node, if null returned, it would be rendered to the current node | HTMLElement | () => HTMLElement | null | null |
| onClickMask | Triggered when the mask is clicked | (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void | - |
| opacity | Opacity | 'default' | 'thin' | 'thick' | number | 'default' |
| stopPropagation | Stop the propagation of some events. | PropagationEvent[] | ["click"] |
| visible | Whether to show or hide | boolean | true |