ant-design/components/watermark/index.en-US.md at abb8b94ee430bd0b47cdf2e2508695bfb8ba4f56

mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00

Files

heming abb8b94ee4 feat: Add and delete watermark callback for watermark component (#55551 )

* feat: Add and delete watermark callback for watermark component

* fix: Adjust the watermark deletion monitoring method

* fix: Optimize the deletion of watermark monitoring function

* fix: Optimize the timing of watermark callback

* fix: Remove excess code

* chore: update deps

---------

Co-authored-by: 二货机器人 <smith3816@gmail.com>

2025-11-06 23:25:56 +08:00

3.7 KiB

Raw Blame History

category, group, title, description, cover, coverDark, demo, tag

When To Use

Use when the page needs to be watermarked to identify the copyright.
Suitable for preventing information theft.

Examples

Basic Multi-line watermark Image watermark Custom configuration Modal or Drawer

API

Common props ref：Common props

This component is available since antd@5.1.0.

Watermark

Property	Description	Type	Default	Version
width	The width of the watermark, the default value of `content` is its own width	number	120
height	The height of the watermark, the default value of `content` is its own height	number	64
inherit	Pass the watermark to the pop-up component such as Modal, Drawer	boolean	true	5.11.0
rotate	When the watermark is drawn, the rotation Angle, unit `°`	number	-22
zIndex	The z-index of the appended watermark element	number	9
image	Image source, it is recommended to export 2x or 3x image, high priority (support base64 format)	string	-
content	Watermark text content	string \| string[]	-
font	Text style	Font	Font
gap	The spacing between watermarks	[number, number]	[100, 100]
offset	The offset of the watermark from the upper left corner of the container. The default is `gap/2`	[number, number]	[gap[0]/2, gap[1]/2]
onRemove	Callback when the watermark is removed by DOM mutation	`() => void`	-

Font

Property	Description	Type	Default	Version
color	font color	CanvasFillStrokeStyles.fillStyle	rgba(0,0,0,.15)
fontSize	font size	number	16
fontWeight	font weight	`normal` \| `light` \| `weight` \| number	normal
fontFamily	font family	string	sans-serif
fontStyle	font style	`none` \| `normal` \| `italic` \| `oblique`	normal
textAlign	specify the text alignment direction	CanvasTextAlign	`center`	5.10.0

Design Token

FAQ

Handle abnormal image watermarks

When using an image watermark and the image loads abnormally, you can add content at the same time to prevent the watermark from becoming invalid (since 5.2.3).

<Watermark
  height={30}
  width={130}
  content="Ant Design"
  image="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*lkAoRbywo0oAAAAAAAAAAAAADrJ8AQ/original"
>
  <div style={{ height: 500 }} />
</Watermark>

Why `overflow: hidden` style is added since version 5.18.0?

User can hide the watermark by setting the container height to 0 through the developer tool in the previous version. To avoid this situation, we added the overflow: hidden style to the container. When the container height changes, the content is also hidden. You can override the style to modify this behavior:

<Watermark style={{ overflow: 'visible' }} />

3.7 KiB Raw Blame History Unescape Escape