Mask
Dark background layer.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
Dark background layer.
When to Use
Often used in the background layer of a modal window to make the visual focus stand out on the modal window itself.
Demos
Mask
Props
| Name | Description | Type | Default |
|---|---|---|---|
| afterClose | Triggered when completely closed | () => void | - |
| afterShow | Triggered after fully displayed | () => void | - |
| color | Color of the mask | 'black' | 'white' | string | 'black' |
| destroyOnClose | Destroy dom when not visible | 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 |
| onMaskClick | 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 |
CSS Variables
| Name | Description | Default | Global |
|---|---|---|---|
| --z-index | z-index of the mask element | 1000 | --adm-mask-z-index |