# WaterMark

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

Add specific text or patterns to the page.

## 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.

Add specific text or patterns to the page.

## When to Use

Suitable for preventing information theft.

## Demos

## WaterMark

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| content | WaterMark text content | `string \| string[]` | - |
| fontColor | WaterMark text color | `string` | `rgba(0, 0, 0, .15)` |
| fontSize | WaterMark text font size | `string \| number` | `14` |
| fullPage | Whether to cover the whole page | `boolean` | `true` |
| gapX | Horizontal spacing between watermarks | `number` | `24` |
| gapY | Vertical spacing between watermarks | `number` | `48` |
| height | The height of the WaterMark | `number` | `64` |
| image | Image source, it is recommended to export 2x or 3x image, give priority to image rendering watermark | `string` | - |
| imageHeight | Image height | `number` | `64` |
| imageWidth | Image width | `number` | `120` |
| rotate | When the watermark is drawn, the angle of rotation, in ° | `number` | `-22` |
| width | The width of the WaterMark | `number` | `120` |
| zIndex | Z-index of the added watermark element | `number` | `2000` |

### CSS Variables

| Name | Description | Default | Global |
| --- | --- | --- | --- |
| --z-index | `z-index` of the water mark layer | `2000` | `--adm-water-mark-z-index` |

---

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