mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 16:19:15 +08:00
6f83c63d74
* feat: New Component Watermark * docs: add watermark docs * docs: add watermark demo * test: add watermark test * test: add watermark snapshot * chore: add jest-canvas-mock * feat: Watermark calculates the width and height of content by default * docs: update docs * docs: update demo * test: update snapshot * docs: update docs * chore: update bundlesize * chore: Optimize code logic * chore: update size-limit * test: update watermark snapshot
1.8 KiB
1.8 KiB
| category | subtitle | group | title | cover | demo | ||
|---|---|---|---|---|---|---|---|
| Components | 水印 | 其他 | Watermark | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAAAAAAAADrJ8AQ/original |
|
给页面的某个区域加上水印。
何时使用
- 页面需要添加水印标识版权时使用。
- 适用于防止信息盗用。
代码演示
基本
多行水印
图片水印
自定义配置
API
Watermark
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| width | 水印的宽度，content 的默认值为自身的宽度 |
number | 120 | |
| height | 水印的高度，content 的默认值为自身的高度 |
number | 64 | |
| rotate | 水印绘制时，旋转的角度，单位 ° |
number | -22 | |
| zIndex | 追加的水印元素的 z-index | number | 9 | |
| image | 图片源，建议导出 2 倍或 3 倍图，优先级高 | string | - | |
| content | 水印文字内容 | string | string[] | - | |
| font | 文字样式 | Font | Font | |
| gap | 水印之间的间距 | [number, number] | [200, 200] | |
| offset | 水印距离容器左上角的偏移量，默认为 gap/2 |
[number, number] | [gap[0]/2, gap[1]/2] |
Font
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| color | 字体颜色 | string | rgba(0,0,0,.15) | |
| fontSize | 字体大小 | number | 16 | |
| fontWeight | 字体粗细 | normal | light | weight | number |
normal | |
| fontFamily | 字体类型 | string | sans-serif | |
| fontStyle | 字体样式 | none | normal | italic | oblique |
normal |