@@ -801,44 +783,32 @@ exports[`renders components/watermark/demo/multi-line.tsx correctly 1`] = `
exports[`renders components/watermark/demo/portal.tsx correctly 1`] = `
Array [
;
@@ -29,23 +29,17 @@ const App: React.FC = () => {
});
const { content, color, fontSize, zIndex, rotate, gap, offset } = config;
- const watermarkProps = useMemo(
- () => ({
- content,
- font: {
- color: typeof color === 'string' ? color : color.toRgbString(),
- fontSize,
- },
- zIndex,
- rotate,
- gap,
- offset,
- }),
- [config],
- );
+ const watermarkProps: WatermarkProps = {
+ content,
+ zIndex,
+ rotate,
+ gap,
+ offset,
+ font: { color: typeof color === 'string' ? color : color.toRgbString(), fontSize },
+ };
return (
-
+
@@ -73,24 +67,13 @@ const App: React.FC = () => {
-
+
-
+
-
+
);
};
diff --git a/components/watermark/demo/image.md b/components/watermark/demo/image.md
index a1ace81b1464..4cd9573dc85a 100644
--- a/components/watermark/demo/image.md
+++ b/components/watermark/demo/image.md
@@ -4,4 +4,4 @@
## en-US
-Specify the image address via 'image'. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.
+Specify the image address via `image`. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.
diff --git a/components/watermark/demo/multi-line.md b/components/watermark/demo/multi-line.md
index 1207f337976c..8f6ade4eaedb 100644
--- a/components/watermark/demo/multi-line.md
+++ b/components/watermark/demo/multi-line.md
@@ -4,4 +4,4 @@
## en-US
-Use 'content' to set a string array to specify multi-line text watermark content.
+Use `content` to set a string array to specify multi-line text watermark content.
diff --git a/components/watermark/demo/portal.tsx b/components/watermark/demo/portal.tsx
index 64bd52e82ef4..bd9e3391d64a 100644
--- a/components/watermark/demo/portal.tsx
+++ b/components/watermark/demo/portal.tsx
@@ -1,19 +1,15 @@
import React from 'react';
-import { Button, Drawer, Modal, Space, Watermark } from 'antd';
+import { Button, Drawer, Flex, Modal, Watermark } from 'antd';
-const placeholder = (
-
- A mock height
-
-);
+const style: React.CSSProperties = {
+ height: 300,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: 'rgba(150, 150, 150, 0.2)',
+};
+
+const placeholder =
A mock height
;
const App: React.FC = () => {
const [showModal, setShowModal] = React.useState(false);
@@ -26,12 +22,17 @@ const App: React.FC = () => {
return (
<>
-
-
-
-
-
-
+
+
+
+
+
This component is available since `antd@5.0.0`.
+
### Watermark
| Property | Description | Type | Default | Version |
diff --git a/components/watermark/index.zh-CN.md b/components/watermark/index.zh-CN.md
index efeef1145a82..60acffaac56e 100644
--- a/components/watermark/index.zh-CN.md
+++ b/components/watermark/index.zh-CN.md
@@ -10,7 +10,7 @@ demo:
tag: New
---
-给页面的某个区域加上水印。
+给页面的某个区域加上水印。自 `5.0.0` 版本开始提供该组件。
## 何时使用
@@ -30,6 +30,8 @@ tag: New
通用属性参考：[通用属性](/docs/react/common-props)
+> 自 `antd@5.0.0` 版本开始提供该组件。
+
### Watermark
| 参数 | 说明 | 类型 | 默认值 | 版本 |