ant-design/index.en-US.md at 7a075a591793a46814d8bcef8e34366651336ab1

mirror of https://github.com/ant-design/ant-design.git synced 2024-12-15 17:19:11 +08:00

二货爱吃白萝卜 44e1493db6

feat: Watermark support inherit to disable passing (#45319 )

* docs: init

* feat: support inherit

* test: update snapshot

2023-10-13 15:16:08 +08:00

3.1 KiB

Raw Blame History

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

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]

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>

3.1 KiB Raw Blame History Unescape Escape