# Mask

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/mask
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Dark background layer.

## Install

```bash
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` |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt