WaterMark
Add specific text or patterns to the page.
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.
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 |