@@ -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 a1ace81b14..4cd9573dc8 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 1207f33797..8f6ade4eae 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 64bd52e82e..bd9e3391d6 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 efeef1145a..60acffaac5 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
| 参数 | 说明 | 类型 | 默认值 | 版本 |