mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 00:29:12 +08:00
44e1493db6
* docs: init * feat: support inherit * test: update snapshot
2.9 KiB
2.9 KiB
category | subtitle | group | title | cover | coverDark | demo | tag | ||
---|---|---|---|---|---|---|---|---|---|
Components | 水印 | 反馈 | Watermark | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*duAQQbjHlHQAAAAAAAAAAAAADrJ8AQ/original |
|
New |
给页面的某个区域加上水印。
何时使用
- 页面需要添加水印标识版权时使用。
- 适用于防止信息盗用。
代码演示
基本
多行水印
图片水印
自定义配置
Modal 与 Drawer
API
通用属性参考:通用属性
Watermark
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
width | 水印的宽度,content 的默认值为自身的宽度 |
number | 120 | |
height | 水印的高度,content 的默认值为自身的高度 |
number | 64 | |
inherit | 是否将水印传导给弹出组件如 Modal、Drawer | boolean | true | 5.11.0 |
rotate | 水印绘制时,旋转的角度,单位 ° |
number | -22 | |
zIndex | 追加的水印元素的 z-index | number | 9 | |
image | 图片源,建议导出 2 倍或 3 倍图,优先级高 (支持 base64 格式) | string | - | |
content | 水印文字内容 | string | string[] | - | |
font | 文字样式 | Font | Font | |
gap | 水印之间的间距 | [number, number] | [100, 100] | |
offset | 水印距离容器左上角的偏移量,默认为 gap/2 |
[number, number] | [gap[0]/2, gap[1]/2] |
Font
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
color | 字体颜色 | CanvasFillStrokeStyles.fillStyle | rgba(0,0,0,.15) | |
fontSize | 字体大小 | number | 16 | |
fontWeight | 字体粗细 | normal | light | weight | number |
normal | |
fontFamily | 字体类型 | string | sans-serif | |
fontStyle | 字体样式 | none | normal | italic | oblique |
normal | |
textAlign | 指定文本对齐方向 | CanvasTextAlign | 5.10.0 |
主题变量(Design Token)
FAQ
处理异常图片水印
当使用图片水印且图片加载异常时,可以同时添加 content
防止水印失效(自 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>