diff --git a/src/watermark/defaultProps.ts b/src/watermark/defaultProps.ts new file mode 100644 index 000000000..51841ed35 --- /dev/null +++ b/src/watermark/defaultProps.ts @@ -0,0 +1,15 @@ +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdWatermarkProps } from './type'; + +export const watermarkDefaultProps: TdWatermarkProps = { + alpha: 1, + isRepeat: true, + lineSpace: 16, + movable: false, + moveInterval: 3000, + removable: true, + rotate: -22, +}; diff --git a/src/watermark/type.ts b/src/watermark/type.ts new file mode 100644 index 000000000..8caf6ee41 --- /dev/null +++ b/src/watermark/type.ts @@ -0,0 +1,122 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TNode } from '../common'; + +export interface TdWatermarkProps { + /** + * 水印整体透明度，取值范围 [0-1] + * @default 1 + */ + alpha?: number; + /** + * 水印所覆盖的内容节点，同 `content` + */ + children?: TNode; + /** + * 水印所覆盖的内容节点 + */ + content?: TNode; + /** + * 水印高度 + */ + height?: number; + /** + * 水印是否重复出现 + * @default true + */ + isRepeat?: boolean; + /** + * 行间距，只作用在多行（`content` 配置为数组）情况下 + * @default 16 + */ + lineSpace?: number; + /** + * 水印是否可移动 + * @default false + */ + movable?: boolean; + /** + * 水印发生运动位移的间隙，单位：毫秒 + * @default 3000 + */ + moveInterval?: number; + /** + * 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 `offset = [gapX / 2, gapY / 2]` + */ + offset?: Array; + /** + * 水印是否可被删除 + * @default true + */ + removable?: boolean; + /** + * 水印旋转的角度，单位 ° + * @default -22 + */ + rotate?: number; + /** + * 水印内容，需要显示多行情况下可配置为数组 + */ + watermarkContent?: WatermarkText | WatermarkImage | Array; + /** + * 水印宽度 + */ + width?: number; + /** + * 水印之间的水平间距 + */ + x?: number; + /** + * 水印之间的垂直间距 + */ + y?: number; + /** + * 水印元素的 `z-index`，默认值写在 CSS 中 + */ + zIndex?: number; +} + +export interface WatermarkText { + /** + * 水印文本文字颜色 + * @default rgba(0,0,0,0.1) + */ + fontColor?: string; + /** + * 水印文本文字字体 + * @default '' + */ + fontFamily?: string; + /** + * 水印文本文字大小 + * @default 16 + */ + fontSize?: number; + /** + * 水印文本文字粗细 + * @default normal + */ + fontWeight?: 'normal' | 'lighter' | 'bold' | 'bolder'; + /** + * 水印文本内容 + * @default '' + */ + text?: string; +} + +export interface WatermarkImage { + /** + * 水印图片是否需要灰阶显示 + * @default false + */ + isGrayscale?: boolean; + /** + * 水印图片源地址，为了显示清楚，建议导出 2 倍或 3 倍图 + * @default '' + */ + url?: string; +} diff --git a/src/watermark/watermark.en-US.md b/src/watermark/watermark.en-US.md new file mode 100644 index 000000000..5b9787666 --- /dev/null +++ b/src/watermark/watermark.en-US.md @@ -0,0 +1,44 @@ +:: BASE_DOC :: + +## API + + +### Watermark Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +alpha | Number | 1 | \- | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +height | Number | - | \- | N +isRepeat | Boolean | true | \- | N +lineSpace | Number | 16 | \- | N +movable | Boolean | false | \- | N +moveInterval | Number | 3000 | \- | N +offset | Array | - | Typescript：`Array` | N +removable | Boolean | true | \- | N +rotate | Number | -22 | \- | N +watermarkContent | Object / Array | - | Typescript：`WatermarkText\|WatermarkImage\|Array` | N +width | Number | - | \- | N +x | Number | - | \- | N +y | Number | - | \- | N +zIndex | Number | - | \- | N + +### WatermarkText + +name | type | default | description | required +-- | -- | -- | -- | -- +fontColor | String | rgba(0,0,0,0.1) | \- | N +fontFamily | String | - | font-family configuration for watermark text | N +fontSize | Number | 16 | \- | N +fontWeight | String | normal | options: normal/lighter/bold/bolder | N +text | String | - | \- | N + +### WatermarkImage + +name | type | default | description | required +-- | -- | -- | -- | -- +isGrayscale | Boolean | false | \- | N +url | String | - | \- | N diff --git a/src/watermark/watermark.md b/src/watermark/watermark.md new file mode 100644 index 000000000..681a7bdd5 --- /dev/null +++ b/src/watermark/watermark.md @@ -0,0 +1,44 @@ +:: BASE_DOC :: + +## API + + +### Watermark Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +alpha | Number | 1 | 水印整体透明度，取值范围 [0-1] | N +children | TNode | - | 水印所覆盖的内容节点，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | 水印所覆盖的内容节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +height | Number | - | 水印高度 | N +isRepeat | Boolean | true | 水印是否重复出现 | N +lineSpace | Number | 16 | 行间距，只作用在多行（`content` 配置为数组）情况下 | N +movable | Boolean | false | 水印是否可移动 | N +moveInterval | Number | 3000 | 水印发生运动位移的间隙，单位：毫秒 | N +offset | Array | - | 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 `offset = [gapX / 2, gapY / 2]`。TS 类型：`Array` | N +removable | Boolean | true | 水印是否可被删除 | N +rotate | Number | -22 | 水印旋转的角度，单位 ° | N +watermarkContent | Object / Array | - | 水印内容，需要显示多行情况下可配置为数组。TS 类型：`WatermarkText\|WatermarkImage\|Array` | N +width | Number | - | 水印宽度 | N +x | Number | - | 水印之间的水平间距 | N +y | Number | - | 水印之间的垂直间距 | N +zIndex | Number | - | 水印元素的 `z-index`，默认值写在 CSS 中 | N + +### WatermarkText + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +fontColor | String | rgba(0,0,0,0.1) | 水印文本文字颜色 | N +fontFamily | String | - | 水印文本文字字体 | N +fontSize | Number | 16 | 水印文本文字大小 | N +fontWeight | String | normal | 水印文本文字粗细。可选项：normal/lighter/bold/bolder | N +text | String | - | 水印文本内容 | N + +### WatermarkImage + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +isGrayscale | Boolean | false | 水印图片是否需要灰阶显示 | N +url | String | - | 水印图片源地址，为了显示清楚，建议导出 2 倍或 3 倍图 | N