diff --git a/packages/components/affix/affix.en-US.md b/packages/components/affix/affix.en-US.md index 030007a0e8..9adbc53cec 100644 --- a/packages/components/affix/affix.en-US.md +++ b/packages/components/affix/affix.en-US.md @@ -7,9 +7,9 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -container | String / Function | () => (() => window) | Typescript：`ScrollContainer`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +container | String / Function | () => (() => window) | Typescript：`ScrollContainer`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N offsetBottom | Number | 0 | When the distance from the bottom of the container reaches the specified distance, the trigger is fixed | N offsetTop | Number | 0 | When the distance from the top of the container reaches the specified distance, the trigger is fixed | N zIndex | Number | - | \- | N diff --git a/packages/components/affix/affix.md b/packages/components/affix/affix.md index 26d96653f4..78cdd362df 100644 --- a/packages/components/affix/affix.md +++ b/packages/components/affix/affix.md @@ -7,9 +7,9 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -children | TNode | - | 内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -container | String / Function | () => (() => window) | 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`ScrollContainer`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +container | String / Function | () => (() => window) | 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`ScrollContainer`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N offsetBottom | Number | 0 | 距离容器顶部达到指定距离后触发固定 | N offsetTop | Number | 0 | 距离容器底部达到指定距离后触发固定 | N zIndex | Number | - | 固钉定位层级，样式默认为 500 | N diff --git a/packages/components/alert/alert.en-US.md b/packages/components/alert/alert.en-US.md index e17aee5520..58c40400e9 100644 --- a/packages/components/alert/alert.en-US.md +++ b/packages/components/alert/alert.en-US.md @@ -8,12 +8,12 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -close | TNode | false | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -icon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +close | TNode | false | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +icon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N maxLine | Number | 0 | \- | N -message | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -operation | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +message | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +operation | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N theme | String | info | options：success/info/warning/error | N -title | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +title | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N onClose | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onClosed | Function | | Typescript：`(context: { e: TransitionEvent }) => void`
| N diff --git a/packages/components/alert/alert.md b/packages/components/alert/alert.md index 7a110b422c..ad9c1066d3 100644 --- a/packages/components/alert/alert.md +++ b/packages/components/alert/alert.md @@ -7,12 +7,12 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -close | TNode | false | 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +close | TNode | false | 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N maxLine | Number | 0 | 内容显示最大行数，超出的内容会折叠收起，用户点击后再展开。值为 0 表示不折叠 | N -message | TNode | - | 内容（子元素）。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -operation | TElement | - | 跟在告警内容后面的操作区。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +message | TNode | - | 内容（子元素）。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +operation | TElement | - | 跟在告警内容后面的操作区。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N theme | String | info | 组件风格。可选项：success/info/warning/error | N -title | TNode | - | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +title | TNode | - | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
关闭按钮点击时触发 | N onClosed | Function | | TS 类型：`(context: { e: TransitionEvent }) => void`
告警提示框关闭动画结束后触发 | N diff --git a/packages/components/anchor/anchor.en-US.md b/packages/components/anchor/anchor.en-US.md index 64f0b9c8b8..4cb08b896a 100644 --- a/packages/components/anchor/anchor.en-US.md +++ b/packages/components/anchor/anchor.en-US.md @@ -7,12 +7,12 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -affixProps | Object | - | Typescript：`Omit`，[Affix API Documents](./affix?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/anchor/type.ts) | N +affixProps | Object | - | Typescript：`Omit`，[Affix API Documents](./affix?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/anchor/type.ts) | N bounds | Number | 5 | \- | N -container | String / Function | () => window | Typescript：`ScrollContainer`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -cursor | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +container | String / Function | () => window | Typescript：`ScrollContainer`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +cursor | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N getCurrentAnchor | Function | - | Custom Highlighted Anchor Points。Typescript：`(activeLink: string) => string` | N -size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N targetOffset | Number | 0 | \- | N onChange | Function | | Typescript：`(currentLink: string, prevLink: string) => void`
| N onClick | Function | | Typescript：`(link: { href: string; title: string; e: MouseEvent }) => void`
| N @@ -25,7 +25,7 @@ className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N href | String | - | required | Y target | String | _self | options: _self/_blank/_parent/_top | N -title | TNode | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +title | TNode | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### AnchorTarget Props diff --git a/packages/components/anchor/anchor.md b/packages/components/anchor/anchor.md index c613d357ca..9486f4d1a5 100644 --- a/packages/components/anchor/anchor.md +++ b/packages/components/anchor/anchor.md @@ -7,12 +7,12 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -affixProps | Object | - | 透传 Affix 组件属性，即让 Anchor 组件支持所有 Affix 组件特性。TS 类型：`Omit`，[Affix API Documents](./affix?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/anchor/type.ts) | N +affixProps | Object | - | 透传 Affix 组件属性，即让 Anchor 组件支持所有 Affix 组件特性。TS 类型：`Omit`，[Affix API Documents](./affix?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/anchor/type.ts) | N bounds | Number | 5 | 锚点区域边界 | N -container | String / Function | () => window | 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`ScrollContainer`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -cursor | TElement | - | 用于自定义选中项左侧游标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +container | String / Function | () => window | 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`ScrollContainer`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +cursor | TElement | - | 用于自定义选中项左侧游标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N getCurrentAnchor | Function | - | 自定义高亮的锚点 。TS 类型：`(activeLink: string) => string` | N -size | String | medium | 组件尺寸，small(120px)，medium(200px)，large(320px)。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | 组件尺寸，small(120px)，medium(200px)，large(320px)。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N targetOffset | Number | 0 | 锚点滚动偏移量 | N onChange | Function | | TS 类型：`(currentLink: string, prevLink: string) => void`
锚点改变时触发 | N onClick | Function | | TS 类型：`(link: { href: string; title: string; e: MouseEvent }) => void`
锚点被点击时触发 | N @@ -25,7 +25,7 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N href | String | - | 必需。锚点链接, 如果是 hash 模式需要加上当前 path | Y target | String | _self | 锚点文本。可选项：_self/_blank/_parent/_top | N -title | TNode | '' | 锚点文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +title | TNode | '' | 锚点文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### AnchorTarget Props diff --git a/packages/components/auto-complete/auto-complete.en-US.md b/packages/components/auto-complete/auto-complete.en-US.md index ead6e2d60f..d0cd7b978f 100644 --- a/packages/components/auto-complete/auto-complete.en-US.md +++ b/packages/components/auto-complete/auto-complete.en-US.md @@ -10,25 +10,25 @@ className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N autofocus | Boolean | - | \- | N borderless | Boolean | false | \- | N -children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N clearable | Boolean | - | \- | N disabled | Boolean | - | \- | N -empty | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +empty | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N filter | Function | - | Typescript：`(filterWords: string, option: T) => boolean \| Promise` | N filterable | Boolean | true | \- | N highlightKeyword | Boolean | true | \- | N -inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N +inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/auto-complete/type.ts) | N options | Array | - | Typescript：`Array` | N -panelBottomContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -panelTopContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +panelBottomContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +panelTopContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N placeholder | String | undefined | \- | N -popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N +popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/auto-complete/type.ts) | N readonly | Boolean | - | \- | N -size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | options: default/success/warning/error | N -textareaProps | Object | - | Typescript：`TextareaProps`，[Textarea API Documents](./textarea?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N -tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -triggerElement | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +textareaProps | Object | - | Typescript：`TextareaProps`，[Textarea API Documents](./textarea?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/auto-complete/type.ts) | N +tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +triggerElement | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N value | String | - | \- | N defaultValue | String | - | uncontrolled property | N onBlur | Function | | Typescript：`(context: { e: FocusEvent; value: string }) => void`
| N diff --git a/packages/components/auto-complete/auto-complete.md b/packages/components/auto-complete/auto-complete.md index 44b6ab1404..2ef5fcffce 100644 --- a/packages/components/auto-complete/auto-complete.md +++ b/packages/components/auto-complete/auto-complete.md @@ -10,25 +10,25 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N autofocus | Boolean | - | 自动获取焦点 | N borderless | Boolean | false | 无边框模式 | N -children | TNode | - | 触发显示联想词下拉框的元素，同 `triggerElement`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 触发显示联想词下拉框的元素，同 `triggerElement`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N clearable | Boolean | - | 是否允许清空 | N disabled | Boolean | - | 是否禁用 | N -empty | TNode | - | 当下拉联想词列表为空时显示的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +empty | TNode | - | 当下拉联想词列表为空时显示的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N filter | Function | - | 自定义过滤规则，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。参数 `filterWords` 表示搜索词，`option`表示单个选项内容，返回值为 `true` 保留该选项，返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable`。TS 类型：`(filterWords: string, option: T) => boolean \| Promise` | N filterable | Boolean | true | 是否根据输入内容过滤联想词。默认过滤规则不区分大小写，全文本任意位置匹配。如果默认搜索规则不符合业务需求，可以更为使用 `filter` 自定义过滤规则。部分场景下输入关键词和下拉联想词完全不同，此时可以设置为 `false` | N highlightKeyword | Boolean | true | 是否高亮联想词中和输入值的相同部分 | N -inputProps | Object | - | 透传 Input 组件全部特性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N +inputProps | Object | - | 透传 Input 组件全部特性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/auto-complete/type.ts) | N options | Array | - | 下拉联想词列表。示例一：`['联想词一', '联想词二']`。示例二：`{ label: () =>
联想词元素
, text: '用于搜索的纯联想词' }`。TS 类型：`Array` | N -panelBottomContent | TNode | - | 面板内的底部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -panelTopContent | TNode | - | 面板内的顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +panelBottomContent | TNode | - | 面板内的底部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +panelTopContent | TNode | - | 面板内的顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N placeholder | String | undefined | 输入框为空时的占位提示。组件本身默认值为 `undefined`，但全局配置存在默认值，不同语言全局默认值不同 | N -popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N +popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/auto-complete/type.ts) | N readonly | Boolean | - | 是否只读 | N -size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | 输入框状态。可选项：default/success/warning/error | N -textareaProps | Object | - | 透传 Textarea 组件全部特性。TS 类型：`TextareaProps`，[Textarea API Documents](./textarea?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N -tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -triggerElement | TNode | - | 触发显示联想词下拉框的元素，默认为 Input 组件，可以使用 `trigger` 自定义为 Textarea 组件或其他组件。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +textareaProps | Object | - | 透传 Textarea 组件全部特性。TS 类型：`TextareaProps`，[Textarea API Documents](./textarea?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/auto-complete/type.ts) | N +tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +triggerElement | TNode | - | 触发显示联想词下拉框的元素，默认为 Input 组件，可以使用 `trigger` 自定义为 Textarea 组件或其他组件。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N value | String | - | 输入框的值，即当前指定的联想词 | N defaultValue | String | - | 输入框的值，即当前指定的联想词。非受控属性 | N onBlur | Function | | TS 类型：`(context: { e: FocusEvent; value: string }) => void`
失去焦点时触发 | N diff --git a/packages/components/avatar/avatar.en-US.md b/packages/components/avatar/avatar.en-US.md index 333a253908..d520ed6503 100644 --- a/packages/components/avatar/avatar.en-US.md +++ b/packages/components/avatar/avatar.en-US.md @@ -8,13 +8,13 @@ name | type | default | description | required className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N alt | String | - | show it when url is not valid | N -children | TNode | - | children, same as `content`。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | content slot or props.content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | children, same as `content`。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | content slot or props.content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N hideOnLoadFailed | Boolean | false | hide image when loading image failed | N -icon | TElement | - | use icon to fill。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TElement | - | use icon to fill。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N image | String | - | images url | N -imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N -shape | String | circle | shape。options：circle/round。Typescript：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N +imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/avatar/type.ts) | N +shape | String | circle | shape。options：circle/round。Typescript：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/avatar/type.ts) | N size | String | - | size | N onError | Function | | Typescript：`(context: { e: ImageEvent }) => void`
trigger on image load failed | N onClick | Function | | Typescript：`(context: { e: React.MouseEvent }) => void`
trigger on click | N @@ -27,8 +27,8 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -cascading | String | 'right-up' | multiple images cascading。options：left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N -collapseAvatar | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +cascading | String | 'right-up' | multiple images cascading。options：left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/avatar/type.ts) | N +collapseAvatar | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N max | Number | - | \- | N -popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N +popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/avatar/type.ts) | N size | String | - | size | N diff --git a/packages/components/avatar/avatar.md b/packages/components/avatar/avatar.md index b2866ebddd..3dd4a04e7f 100644 --- a/packages/components/avatar/avatar.md +++ b/packages/components/avatar/avatar.md @@ -8,13 +8,13 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N -children | TNode | - | 子元素内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 子元素内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 子元素内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 子元素内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N hideOnLoadFailed | Boolean | false | 加载失败时隐藏图片 | N -icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N image | String | - | 图片地址 | N -imageProps | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N -shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N +imageProps | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/avatar/type.ts) | N +shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/avatar/type.ts) | N size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定 | N onError | Function | | TS 类型：`(context: { e: ImageEvent }) => void`
图片加载失败时触发 | N onClick | Function | | TS 类型：`(context: { e: React.MouseEvent }) => void`
点击时触发 | N @@ -27,8 +27,8 @@ onContextmenu | Function | | TS 类型：`(context: { e: React.MouseEvent }) => -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -cascading | String | 'right-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N -collapseAvatar | TNode | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +cascading | String | 'right-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/avatar/type.ts) | N +collapseAvatar | TNode | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N max | Number | - | 能够同时显示的最多头像数量 | N -popupProps | Object | - | 头像右上角提示信息。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N +popupProps | Object | - | 头像右上角提示信息。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/avatar/type.ts) | N size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N diff --git a/packages/components/back-top/back-top.en-US.md b/packages/components/back-top/back-top.en-US.md index 3b3ae29d8a..433290dee6 100644 --- a/packages/components/back-top/back-top.en-US.md +++ b/packages/components/back-top/back-top.en-US.md @@ -8,15 +8,15 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -children | TNode | - | Backtop's children elements, same as `content`。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -container | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | Backtop's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -default | TNode | - | Backtop's children elements, same as `content`。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Backtop's children elements, same as `content`。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +container | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | Backtop's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +default | TNode | - | Backtop's children elements, same as `content`。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N duration | Number | 200 | \- | N offset | Array | ["24px", "80px"] | Typescript：`Array` | N -shape | String | square | shape of BackTop element。options：circle/square。Typescript：`BackTopShapeEnum ` `type BackTopShapeEnum = 'circle' \| 'square'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/back-top/type.ts) | N +shape | String | square | shape of BackTop element。options：circle/square。Typescript：`BackTopShapeEnum ` `type BackTopShapeEnum = 'circle' \| 'square'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/back-top/type.ts) | N size | String | medium | size of BackTop。options：medium/small | N -target | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +target | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N theme | String | light | theme of BackTop。options：light/primary/dark | N visibleHeight | String / Number | '200px' | \- | N onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N diff --git a/packages/components/back-top/back-top.md b/packages/components/back-top/back-top.md index 54989a0119..8d40b603b6 100644 --- a/packages/components/back-top/back-top.md +++ b/packages/components/back-top/back-top.md @@ -8,15 +8,15 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -children | TNode | - | 回到顶部内容，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -container | String / Function | 'body' | 监听滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 回到顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -default | TNode | - | 回到顶部内容，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 回到顶部内容，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +container | String / Function | 'body' | 监听滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 回到顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +default | TNode | - | 回到顶部内容，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N duration | Number | 200 | 回到顶部的耗时单位：毫秒 | N offset | Array | ["24px", "80px"] | 回到顶部相对右下角的位置偏移，示例：[10, 20] 或 ['10em', '8rem']。TS 类型：`Array` | N -shape | String | square | 回到顶部的形状。可选项：circle/square。TS 类型：`BackTopShapeEnum ` `type BackTopShapeEnum = 'circle' \| 'square'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/back-top/type.ts) | N +shape | String | square | 回到顶部的形状。可选项：circle/square。TS 类型：`BackTopShapeEnum ` `type BackTopShapeEnum = 'circle' \| 'square'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/back-top/type.ts) | N size | String | medium | 组件尺寸。可选项：medium/small | N -target | String / Function | 'body' | 指定回到该对象。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +target | String / Function | 'body' | 指定回到该对象。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N theme | String | light | 组件主题风格，浅色、主色、深色。可选项：light/primary/dark | N visibleHeight | String / Number | '200px' | 滚动高度达到此参数值才出现 | N onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击回到顶部时触发 | N diff --git a/packages/components/badge/badge.en-US.md b/packages/components/badge/badge.en-US.md index d0a623df21..7702187ca6 100644 --- a/packages/components/badge/badge.en-US.md +++ b/packages/components/badge/badge.en-US.md @@ -8,10 +8,10 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N color | String | - | \- | N -content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -count | TNode | 0 | Typescript：`string \| number \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +count | TNode | 0 | Typescript：`string \| number \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N dot | Boolean | false | \- | N maxCount | Number | 99 | \- | N offset | Array | - | Typescript：`Array` | N diff --git a/packages/components/badge/badge.md b/packages/components/badge/badge.md index 211752f705..af36b85af7 100644 --- a/packages/components/badge/badge.md +++ b/packages/components/badge/badge.md @@ -7,10 +7,10 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -children | TNode | - | 徽标内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 徽标内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N color | String | - | 颜色 | N -content | TNode | - | 徽标内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -count | TNode | 0 | 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。TS 类型：`string \| number \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +content | TNode | - | 徽标内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +count | TNode | 0 | 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。TS 类型：`string \| number \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N dot | Boolean | false | 是否为红点 | N maxCount | Number | 99 | 封顶的数字值 | N offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array` | N diff --git a/packages/components/breadcrumb/breadcrumb.en-US.md b/packages/components/breadcrumb/breadcrumb.en-US.md index 9e3d27164c..f4e934f9e9 100644 --- a/packages/components/breadcrumb/breadcrumb.en-US.md +++ b/packages/components/breadcrumb/breadcrumb.en-US.md @@ -10,7 +10,7 @@ className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N maxItemWidth | String | undefined | \- | N options | Array | - | Typescript：`Array` | N -separator | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +separator | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### BreadcrumbItem Props @@ -19,15 +19,15 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N -children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | - | \- | N href | String | - | \- | N -icon | TElement | - | prefix icon in breadcrumb item。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TElement | - | prefix icon in breadcrumb item。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N maxWidth | String | undefined | \- | N replace | Boolean | false | \- | N router | Object | - | Typescript：`any` | N target | String | _self | options: _blank/_self/_parent/_top | N -to | String / Object | - | Typescript：`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/breadcrumb/type.ts) | N -tooltipProps | Object | - | Typescript：`TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/breadcrumb/type.ts) | N +to | String / Object | - | Typescript：`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/breadcrumb/type.ts) | N +tooltipProps | Object | - | Typescript：`TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/breadcrumb/type.ts) | N onClick | Function | | Typescript：`(e: MouseEvent) => void`
trigger on click | N diff --git a/packages/components/breadcrumb/breadcrumb.md b/packages/components/breadcrumb/breadcrumb.md index 0c61f4c680..13d5513a8b 100644 --- a/packages/components/breadcrumb/breadcrumb.md +++ b/packages/components/breadcrumb/breadcrumb.md @@ -10,7 +10,7 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N maxItemWidth | String | undefined | 单项最大宽度，超出后会以省略号形式呈现 | N options | Array | - | 面包屑项，功能同 BreadcrumbItem。TS 类型：`Array` | N -separator | TNode | - | 自定义分隔符。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +separator | TNode | - | 自定义分隔符。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### BreadcrumbItem Props @@ -19,15 +19,15 @@ separator | TNode | - | 自定义分隔符。TS 类型：`string \| TNode`。[ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -children | TNode | - | 子元素，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 子元素，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | - | 是否禁用当前项点击 | N href | String | - | 跳转链接 | N -icon | TElement | - | 面板屑项内的前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TElement | - | 面板屑项内的前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N maxWidth | String | undefined | 最大宽度，超出后会以省略号形式呈现。优先级高于 Breadcrumb 中的 maxItemWidth | N replace | Boolean | false | 路由跳转是否采用覆盖的方式（覆盖后将没有浏览器历史记录） | N router | Object | - | 路由对象。如果项目存在 Router，则默认使用 Router。TS 类型：`any` | N target | String | _self | 链接或路由跳转方式。可选项：_blank/_self/_parent/_top | N -to | String / Object | - | 路由跳转目标，当且仅当 Router 存在时，该 API 有效。TS 类型：`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/breadcrumb/type.ts) | N -tooltipProps | Object | - | 透传提示组件属性。TS 类型：`TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/breadcrumb/type.ts) | N +to | String / Object | - | 路由跳转目标，当且仅当 Router 存在时，该 API 有效。TS 类型：`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/breadcrumb/type.ts) | N +tooltipProps | Object | - | 透传提示组件属性。TS 类型：`TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/breadcrumb/type.ts) | N onClick | Function | | TS 类型：`(e: MouseEvent) => void`
点击时触发 | N diff --git a/packages/components/button/button.en-US.md b/packages/components/button/button.en-US.md index 1e1bf0193a..c417d90bbb 100644 --- a/packages/components/button/button.en-US.md +++ b/packages/components/button/button.en-US.md @@ -8,17 +8,17 @@ name | type | default | description | required className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N block | Boolean | false | make button to be a block-level element | N -children | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | false | disable the button, make it can not be clicked | N form | String | undefined | native `form` attribute，which supports triggering events for a form with a specified id through the use of the form attribute. | N ghost | Boolean | false | make background-color to be transparent | N href | String | - | \- | N -icon | TElement | - | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TElement | - | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N loading | Boolean | false | set button to be loading state | N shape | String | rectangle | button shape。options：rectangle/square/round/circle | N -size | String | medium | a button has three size。options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -suffix | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | a button has three size。options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +suffix | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N tag | String | - | HTML Tag Element。options：button/a/div | N theme | String | - | button theme。options：default/primary/danger/warning/success | N type | String | button | type of button element in html。options：submit/reset/button | N diff --git a/packages/components/button/button.md b/packages/components/button/button.md index 80666d407b..75ff9210b7 100644 --- a/packages/components/button/button.md +++ b/packages/components/button/button.md @@ -8,17 +8,17 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N block | Boolean | false | 是否为块级元素 | N -children | TNode | - | 按钮内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 按钮内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | false | 禁用状态 | N form | String | undefined | 原生的form属性，支持用于通过 form 属性触发对应 id 的 form 的表单事件 | N ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N href | String | - | 跳转地址。href 存在时，按钮标签默认使用 `` 渲染；如果指定了 `tag` 则使用指定的标签渲染 | N -icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N loading | Boolean | false | 是否显示为加载状态 | N shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N -size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -suffix | TElement | - | 右侧内容，可用于定义右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +suffix | TElement | - | 右侧内容，可用于定义右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N tag | String | - | 渲染按钮的 HTML 标签，默认使用标签 ` }`。TS 类型：`Array \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/slider/type.ts) | N +marks | Object / Array | - | 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => }`。TS 类型：`Array \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/slider/type.ts) | N max | Number | 100 | 滑块范围最大值 | N min | Number | 0 | 滑块范围最小值 | N range | Boolean | false | 双游标滑块 | N showStep | Boolean | false | 控制步长刻度值显示 | N step | Number | 1 | 步长 | N -tooltipProps | Object | - | 透传提示组件属性。TS 类型：`TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/slider/type.ts) | N -value | Number / Array | - | 滑块值。TS 类型：`SliderValue` `type SliderValue = number \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/slider/type.ts) | N -defaultValue | Number / Array | - | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/slider/type.ts) | N +tooltipProps | Object | - | 透传提示组件属性。TS 类型：`TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/slider/type.ts) | N +value | Number / Array | - | 滑块值。TS 类型：`SliderValue` `type SliderValue = number \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/slider/type.ts) | N +defaultValue | Number / Array | - | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/slider/type.ts) | N onChange | Function | | TS 类型：`(value: SliderValue) => void`
滑块值变化时触发 | N diff --git a/packages/components/space/space.en-US.md b/packages/components/space/space.en-US.md index 9d1b5222d4..5b8087fe47 100644 --- a/packages/components/space/space.en-US.md +++ b/packages/components/space/space.en-US.md @@ -10,5 +10,5 @@ style | Object | - | 样式，Typescript：`React.CSSProperties` | N align | String | - | alignment。options: start/end/center/baseline | N breakLine | Boolean | false | Whether to wrap, valid only in horizontal | N direction | String | horizontal | Spacing direction。options: vertical/horizontal | N -separator | TNode | - | separator。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -size | String / Number / Array | 'medium' | Spacing。Typescript：`SpaceSize \| SpaceSize[]` `type SpaceSize = number \| string \| SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/space/type.ts) | N +separator | TNode | - | separator。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +size | String / Number / Array | 'medium' | Spacing。Typescript：`SpaceSize \| SpaceSize[]` `type SpaceSize = number \| string \| SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/space/type.ts) | N diff --git a/packages/components/space/space.md b/packages/components/space/space.md index 2c08e87261..15f6d2081b 100644 --- a/packages/components/space/space.md +++ b/packages/components/space/space.md @@ -10,5 +10,5 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N align | String | - | 对齐方式。可选项：start/end/center/baseline | N breakLine | Boolean | false | 是否自动换行，仅在 horizontal 时有效 | N direction | String | horizontal | 间距方向。可选项：vertical/horizontal | N -separator | TNode | - | 分隔符。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -size | String / Number / Array | 'medium' | 间距大小。TS 类型：`SpaceSize \| SpaceSize[]` `type SpaceSize = number \| string \| SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/space/type.ts) | N +separator | TNode | - | 分隔符。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +size | String / Number / Array | 'medium' | 间距大小。TS 类型：`SpaceSize \| SpaceSize[]` `type SpaceSize = number \| string \| SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/space/type.ts) | N diff --git a/packages/components/statistic/statistic.en-US.md b/packages/components/statistic/statistic.en-US.md index 10c618bf66..0308e00de8 100644 --- a/packages/components/statistic/statistic.en-US.md +++ b/packages/components/statistic/statistic.en-US.md @@ -7,20 +7,20 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -animation | Object | - | Animation effect control, `duration` refers to the transition time of the animation `unit: millisecond`, `valueFrom` refers to the initial value of the animation. `{ duration, valueFrom }`。Typescript：`animation` `interface animation { duration: number; valueFrom: number; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/statistic/type.ts) | N +animation | Object | - | Animation effect control, `duration` refers to the transition time of the animation `unit: millisecond`, `valueFrom` refers to the initial value of the animation. `{ duration, valueFrom }`。Typescript：`animation` `interface animation { duration: number; valueFrom: number; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/statistic/type.ts) | N animationStart | Boolean | false | Whether to start animation | N color | String | - | Color style, followed by TDesign style black, blue, red, orange, green.Can also be any RGB equivalent supported by [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)。options: black/blue/red/orange/green | N decimalPlaces | Number | - | Decimal places | N -extra | TNode | - | Additional display content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +extra | TNode | - | Additional display content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N format | Function | - | Format numeric display value。Typescript：`(value: number) => number` | N loading | Boolean | false | Loading | N -prefix | TNode | - | Prefix content, display priority is higher than trend。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +prefix | TNode | - | Prefix content, display priority is higher than trend。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N separator | String | , | The carry separator is displayed by default, and can be customized to other content. When `separator = ''` is set to an empty string/null/undefined, the separator is hidden | N -suffix | TNode | - | Suffix content, display priority is higher than trend。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -title | TNode | - | The title of Statistic。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +suffix | TNode | - | Suffix content, display priority is higher than trend。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +title | TNode | - | The title of Statistic。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N trend | String | - | trend。options: increase/decrease | N trendPlacement | String | left | Position of trending placements。options: left/right | N -unit | TNode | - | Unit content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +unit | TNode | - | Unit content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N value | Number | - | The value of Statistic | N ### StatisticInstanceFunctions 组件实例方法 diff --git a/packages/components/statistic/statistic.md b/packages/components/statistic/statistic.md index 133e2d726f..cf739fd9ad 100644 --- a/packages/components/statistic/statistic.md +++ b/packages/components/statistic/statistic.md @@ -7,20 +7,20 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -animation | Object | - | 动画效果控制，`duration` 指动画的过渡时间`单位：毫秒`，`valueFrom` 指动画的起始数值。`{ duration, valueFrom }`。TS 类型：`animation` `interface animation { duration: number; valueFrom: number; }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/statistic/type.ts) | N +animation | Object | - | 动画效果控制，`duration` 指动画的过渡时间`单位：毫秒`，`valueFrom` 指动画的起始数值。`{ duration, valueFrom }`。TS 类型：`animation` `interface animation { duration: number; valueFrom: number; }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/statistic/type.ts) | N animationStart | Boolean | false | 是否开始动画 | N color | String | - | 颜色风格，依次为 TDesign 风格的黑色、蓝色、红色、橙色、绿色。也可以为任何 [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 支持的 RGB 等值。可选项：black/blue/red/orange/green | N decimalPlaces | Number | - | 小数保留位数 | N -extra | TNode | - | 额外的显示内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +extra | TNode | - | 额外的显示内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N format | Function | - | 格式化数值显示值。TS 类型：`(value: number) => number` | N loading | Boolean | false | 是否加载中 | N -prefix | TNode | - | 前缀内容，展示优先级高于 trend。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +prefix | TNode | - | 前缀内容，展示优先级高于 trend。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N separator | String | , | 默认展示进位分隔符，可以自定义为其他内容，`separator = ''` 设置为空字符串/null/undefined 时隐藏分隔符 | N -suffix | TNode | - | 后缀内容，展示优先级高于 trend。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -title | TNode | - | 数值显示的标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +suffix | TNode | - | 后缀内容，展示优先级高于 trend。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +title | TNode | - | 数值显示的标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N trend | String | - | 趋势。可选项：increase/decrease | N trendPlacement | String | left | 趋势展示位置。可选项：left/right | N -unit | TNode | - | 单位内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +unit | TNode | - | 单位内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N value | Number | - | 数值显示的值 | N ### StatisticInstanceFunctions 组件实例方法 diff --git a/packages/components/steps/steps.en-US.md b/packages/components/steps/steps.en-US.md index 96268bb7cc..f9ea957515 100644 --- a/packages/components/steps/steps.en-US.md +++ b/packages/components/steps/steps.en-US.md @@ -24,10 +24,10 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -extra | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -icon | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -status | String | default | options：default/process/finish/error。Typescript：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/steps/type.ts) | N -title | TNode | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +extra | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +icon | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +status | String | default | options：default/process/finish/error。Typescript：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/steps/type.ts) | N +title | TNode | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N value | String / Number | - | \- | N diff --git a/packages/components/steps/steps.md b/packages/components/steps/steps.md index 2812e24cf3..42aa74e55f 100644 --- a/packages/components/steps/steps.md +++ b/packages/components/steps/steps.md @@ -23,10 +23,10 @@ onChange | Function | | TS 类型：`(current: string \| number, previous: stri -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -children | TNode | - | 步骤描述，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | '' | 步骤描述。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -extra | TNode | - | 显示在步骤描述下方的额外内容，比如：操作项。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -icon | TNode | true | 图标，默认显示内置图标，也可以自定义图标，值为 false 则不显示图标。优先级大于 `status` 定义的图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -status | String | default | 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/steps/type.ts) | N -title | TNode | '' | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 步骤描述，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | '' | 步骤描述。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +extra | TNode | - | 显示在步骤描述下方的额外内容，比如：操作项。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +icon | TNode | true | 图标，默认显示内置图标，也可以自定义图标，值为 false 则不显示图标。优先级大于 `status` 定义的图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +status | String | default | 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/steps/type.ts) | N +title | TNode | '' | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N value | String / Number | - | 当前步骤标识 | N diff --git a/packages/components/sticky-tool/sticky-tool.en-US.md b/packages/components/sticky-tool/sticky-tool.en-US.md index b5e467077e..5b575e3ba0 100644 --- a/packages/components/sticky-tool/sticky-tool.en-US.md +++ b/packages/components/sticky-tool/sticky-tool.en-US.md @@ -10,7 +10,7 @@ style | Object | - | 样式，Typescript：`React.CSSProperties` | N list | Array | [] | Typescript：`Array` | N offset | Array | - | Typescript：`Array` | N placement | String | right-bottom | options：right-top/right-center/right-bottom/left-top/left-center/left-bottom | N -popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/sticky-tool/type.ts) | N +popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/sticky-tool/type.ts) | N shape | String | square | stickytool shape。options：square/round | N type | String | normal | stickytool type。options：normal/compact | N width | String / Number | - | \- | N @@ -23,8 +23,8 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -icon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -popup | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/sticky-tool/type.ts) | N +icon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +popup | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/sticky-tool/type.ts) | N trigger | String | hover | options：hover/click | N diff --git a/packages/components/sticky-tool/sticky-tool.md b/packages/components/sticky-tool/sticky-tool.md index bd48335404..1ac5c30980 100644 --- a/packages/components/sticky-tool/sticky-tool.md +++ b/packages/components/sticky-tool/sticky-tool.md @@ -10,7 +10,7 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N list | Array | [] | 列表。TS 类型：`Array` | N offset | Array | - | 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array` | N placement | String | right-bottom | 固定位置。可选项：right-top/right-center/right-bottom/left-top/left-center/left-bottom | N -popupProps | Object | - | 透传 Popup 组件全部特性，优先级低于 StickyItem.popupProps。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/sticky-tool/type.ts) | N +popupProps | Object | - | 透传 Popup 组件全部特性，优先级低于 StickyItem.popupProps。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/sticky-tool/type.ts) | N shape | String | square | 侧边栏菜单形状，有 2 种：方形、圆形。可选项：square/round | N type | String | normal | 侧边栏菜单类型，有 2 种：常规型和紧凑型。可选项：normal/compact | N width | String / Number | - | 宽度 | N @@ -23,8 +23,8 @@ onHover | Function | | TS 类型：`(context: { e: MouseEvent; item: TdStickyIt -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -label | TNode | - | 名称。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -popup | TNode | - | 浮层内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -popupProps | Object | - | 透传浮层组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/sticky-tool/type.ts) | N +icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +label | TNode | - | 名称。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +popup | TNode | - | 浮层内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +popupProps | Object | - | 透传浮层组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/sticky-tool/type.ts) | N trigger | String | hover | 触发浮层显示的方式。可选项：hover/click | N diff --git a/packages/components/swiper/swiper.en-US.md b/packages/components/swiper/swiper.en-US.md index 7e24c5bd93..2f5d345e32 100644 --- a/packages/components/swiper/swiper.en-US.md +++ b/packages/components/swiper/swiper.en-US.md @@ -17,12 +17,12 @@ duration | Number | 300 | \- | N height | Number | - | \- | N interval | Number | 5000 | \- | N loop | Boolean | true | \- | N -navigation | TNode | - | Typescript：`SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +navigation | TNode | - | Typescript：`SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N stopOnHover | Boolean | true | \- | N theme | String | light | options：light/dark | N trigger | String | hover | options：hover/click | N type | String | default | options：default/card | N -onChange | Function | | Typescript：`(current: number, context: { source: SwiperChangeSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/swiper/type.ts)。
`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`
| N +onChange | Function | | Typescript：`(current: number, context: { source: SwiperChangeSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/swiper/type.ts)。
`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`
| N ### SwiperNavigation @@ -31,4 +31,4 @@ name | type | default | description | required placement | String | inside | options：inside/outside | N showSlideBtn | String | always | options：always/hover/never | N size | String | medium | options：small/medium/large | N -type | String | - | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'bars' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/swiper/type.ts) | N +type | String | - | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'bars' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/swiper/type.ts) | N diff --git a/packages/components/swiper/swiper.md b/packages/components/swiper/swiper.md index cbadc7161f..95f4df6e95 100644 --- a/packages/components/swiper/swiper.md +++ b/packages/components/swiper/swiper.md @@ -16,12 +16,12 @@ duration | Number | 300 | 滑动动画时长 | N height | Number | - | 当使用垂直方向滚动时的高度 | N interval | Number | 5000 | 轮播间隔时间 | N loop | Boolean | true | 是否循环播放 | N -navigation | TNode | - | 导航器全部配置。TS 类型：`SwiperNavigation \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +navigation | TNode | - | 导航器全部配置。TS 类型：`SwiperNavigation \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N stopOnHover | Boolean | true | 是否悬浮时停止轮播 | N theme | String | light | 深色模式和浅色模式。可选项：light/dark | N trigger | String | hover | 触发切换的方式：悬浮、点击等。可选项：hover/click | N type | String | default | 样式类型：默认样式、卡片样式。可选项：default/card | N -onChange | Function | | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`
轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/swiper/type.ts)。
`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`
| N +onChange | Function | | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`
轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/swiper/type.ts)。
`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`
| N ### SwiperNavigation @@ -30,4 +30,4 @@ onChange | Function | | TS 类型：`(current: number, context: { source: Swipe placement | String | inside | 导航器位置，位于主体的内侧或是外侧。可选项：inside/outside | N showSlideBtn | String | always | 何时显示导航器的翻页按钮：始终显示、悬浮显示、永不显示。可选项：always/hover/never | N size | String | medium | 导航器尺寸。可选项：small/medium/large | N -type | String | - | 导航器类型，点状(dots)、点条状(dots-bar)、条状(bars)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'bars' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/swiper/type.ts) | N +type | String | - | 导航器类型，点状(dots)、点条状(dots-bar)、条状(bars)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'bars' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/swiper/type.ts) | N diff --git a/packages/components/switch/switch.en-US.md b/packages/components/switch/switch.en-US.md index aee25586f4..64346513e3 100644 --- a/packages/components/switch/switch.en-US.md +++ b/packages/components/switch/switch.en-US.md @@ -10,9 +10,9 @@ style | Object | - | 样式，Typescript：`React.CSSProperties` | N beforeChange | Function | - | stop checked change。Typescript：`() => boolean \| Promise` | N customValue | Array | - | Typescript：`Array` | N disabled | Boolean | - | \- | N -label | TNode | [] | Typescript：`Array \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | [] | Typescript：`Array \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N loading | Boolean | false | \- | N size | String | medium | options：small/medium/large | N -value | String / Number / Boolean | - | Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N -defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N +value | String / Number / Boolean | - | Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N +defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N onChange | Function | | Typescript：`(value: T, context: { e: MouseEvent }) => void`
| N diff --git a/packages/components/switch/switch.md b/packages/components/switch/switch.md index ed0c83ce3a..a917ab17c7 100644 --- a/packages/components/switch/switch.md +++ b/packages/components/switch/switch.md @@ -10,9 +10,9 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N beforeChange | Function | - | Switch 切换状态前的回调方法，常用于需要发起异步请求的场景，返回值支持布尔和 Promise 类型，返回`false`或 Promise reject不继续执行change，否则则继续执行。。TS 类型：`() => boolean \| Promise` | N customValue | Array | - | 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close']。TS 类型：`Array` | N disabled | Boolean | - | 是否禁用组件，默认为 false | N -label | TNode | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型：`Array \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型：`Array \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N loading | Boolean | false | 是否处于加载中状态 | N size | String | medium | 开关尺寸。可选项：small/medium/large | N -value | String / Number / Boolean | - | 开关值。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N -defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N +value | String / Number / Boolean | - | 开关值。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N +defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N onChange | Function | | TS 类型：`(value: T, context: { e: MouseEvent }) => void`
数据发生变化时触发 | N diff --git a/packages/components/table/table.en-US.md b/packages/components/table/table.en-US.md index aa4799b372..28b4cb61dc 100644 --- a/packages/components/table/table.en-US.md +++ b/packages/components/table/table.en-US.md @@ -7,50 +7,50 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -attach | String / Function | - | elements with popup would be attached to `attach`。Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +attach | String / Function | - | elements with popup would be attached to `attach`。Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N bordered | Boolean | false | show table bordered | N -bottomContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -cellEmptyContent | TNode | - | Typescript：`string \| TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +bottomContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +cellEmptyContent | TNode | - | Typescript：`string \| TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N columns | Array | [] | table column configs。Typescript：`Array>` | N data | Array | [] | table data。Typescript：`Array` | N disableDataPage | Boolean | false | \- | N -empty | TNode | '' | empty text or empty element。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -firstFullRow | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +empty | TNode | '' | empty text or empty element。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +firstFullRow | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N fixedRows | Array | - | Typescript：`Array` | N footData | Array | [] | table foot data。Typescript：`Array` | N footerAffixProps | Object | - | `deprecated`。affix props。Typescript：`Partial` | N footerAffixedBottom | Boolean / Object | false | affix foot to viewport bottom。Typescript：`boolean \| Partial` | N -footerSummary | TNode | - | footer summary content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -headerAffixProps | Object | - | `deprecated`。affix props。Typescript：`Partial`，[Affix API Documents](./affix?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +footerSummary | TNode | - | footer summary content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +headerAffixProps | Object | - | `deprecated`。affix props。Typescript：`Partial`，[Affix API Documents](./affix?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N headerAffixedTop | Boolean / Object | false | affix header to viewport top。Typescript：`boolean \| Partial` | N height | String / Number | - | table height | N horizontalScrollAffixedBottom | Boolean / Object | - | affix props。Typescript：`boolean \| Partial` | N hover | Boolean | false | show hover style | N -lastFullRow | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +lastFullRow | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N lazyLoad | Boolean | false | load table content when it entering the visible area, all elements in table are not rendered before it become visible | N -loading | TNode | undefined | loading state table。Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -loadingProps | Object | - | Typescript：`Partial`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +loading | TNode | undefined | loading state table。Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +loadingProps | Object | - | Typescript：`Partial`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N maxHeight | String / Number | - | table max height | N -pagination | Object | - | you can use all props of pagination component with paginationProps。Typescript：`PaginationProps`，[Pagination API Documents](./pagination?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +pagination | Object | - | you can use all props of pagination component with paginationProps。Typescript：`PaginationProps`，[Pagination API Documents](./pagination?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N paginationAffixedBottom | Boolean / Object | - | affix props。Typescript：`boolean \| Partial` | N resizable | Boolean | false | allow to resize column width, set `tableLayout=fixed` would be better | N -rowAttributes | Object / Array / Function | - | `tr` attributes。Typescript：`TableRowAttributes` `type TableRowAttributes = HTMLElementAttributes \| ((params: { row: T; rowIndex: number; type: 'body' \| 'foot' }) => HTMLElementAttributes) \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -rowClassName | String / Object / Array / Function | - | table `th` classname。Typescript：`ClassName \| ((params: RowClassNameParams) => ClassName)` `interface RowClassNameParams { row: T; rowIndex: number; type?: 'body' \| 'foot' }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +rowAttributes | Object / Array / Function | - | `tr` attributes。Typescript：`TableRowAttributes` `type TableRowAttributes = HTMLElementAttributes \| ((params: { row: T; rowIndex: number; type: 'body' \| 'foot' }) => HTMLElementAttributes) \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +rowClassName | String / Object / Array / Function | - | table `th` classname。Typescript：`ClassName \| ((params: RowClassNameParams) => ClassName)` `interface RowClassNameParams { row: T; rowIndex: number; type?: 'body' \| 'foot' }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N rowKey | String | 'id' | required。unique key for each row data | Y -rowspanAndColspan | Function | - | rowspan and colspan。Typescript：`TableRowspanAndColspanFunc` `type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +rowspanAndColspan | Function | - | rowspan and colspan。Typescript：`TableRowspanAndColspanFunc` `type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N rowspanAndColspanInFooter | Function | - | rowspan and colspan for footer。Typescript：`TableRowspanAndColspanFunc` | N -scroll | Object | - | lazy load and virtual scroll。Typescript：`TScroll`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +scroll | Object | - | lazy load and virtual scroll。Typescript：`TScroll`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N showHeader | Boolean | true | show table header | N -size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N stripe | Boolean | false | show stripe style | N tableContentWidth | String | - | \- | N tableLayout | String | fixed | table-layout css properties, [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout). set value to be `fixed` on `resizable=true` please。options: auto/fixed | N -topContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +topContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N verticalAlign | String | middle | vertical align。options: top/middle/bottom | N -onCellClick | Function | | Typescript：`(context: BaseTableCellEventContext) => void`
trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N +onCellClick | Function | | Typescript：`(context: BaseTableCellEventContext) => void`
trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N onColumnResizeChange | Function | | Typescript：`(context: { columnsWidth: { [colKey: string]: number }; }) => void`
| N onPageChange | Function | | Typescript：`(pageInfo: PageInfo, newDataSource: Array) => void`
trigger on pagination changing | N -onRowClick | Function | | Typescript：`(context: RowEventContext) => void`
trigger on row click。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent }`
| N +onRowClick | Function | | Typescript：`(context: RowEventContext) => void`
trigger on row click。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent }`
| N onRowDblclick | Function | | Typescript：`(context: RowEventContext) => void`
trigger on double click | N onRowMousedown | Function | | Typescript：`(context: RowEventContext) => void`
trigger on row mousedown | N onRowMouseenter | Function | | Typescript：`(context: RowEventContext) => void`
trigger on row mouseenter | N @@ -76,23 +76,23 @@ scrollToElement | `(params: ScrollToElementParams)` | \- | required name | type | default | description | required -- | -- | -- | -- | -- align | String | left | align type。options: left/right/center | N -attrs | Object / Function | - | html attributes。Typescript：`BaseTableColumnAttributes` `type BaseTableColumnAttributes = { [key: string]: any } \| ((context: CellData) => { [key: string]: any })`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -cell | String / Function | - | use cell to render table cell。Typescript：`string \| TNode>` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +attrs | Object / Function | - | html attributes。Typescript：`BaseTableColumnAttributes` `type BaseTableColumnAttributes = { [key: string]: any } \| ((context: CellData) => { [key: string]: any })`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +cell | String / Function | - | use cell to render table cell。Typescript：`string \| TNode>` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N children | Array | - | grouping table head。Typescript：`Array>` | N -className | String / Object / Array / Function | - | cell classnames。Typescript：`TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +className | String / Object / Array / Function | - | cell classnames。Typescript：`TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N colKey | String | - | unique key for column | N colspan | Number | - | one line head colspan | N -ellipsis | TNode | false | ellipsis cell content。Typescript：`boolean \| TNode> \| TooltipProps \| { props: TooltipProps; content: TNode> }`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -ellipsisTitle | TNode | undefined | ellipsis title content。Typescript：`boolean \| TNode> \| TooltipProps \| { props: TooltipProps; content: TNode> }` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +ellipsis | TNode | false | ellipsis cell content。Typescript：`boolean \| TNode> \| TooltipProps \| { props: TooltipProps; content: TNode> }`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +ellipsisTitle | TNode | undefined | ellipsis title content。Typescript：`boolean \| TNode> \| TooltipProps \| { props: TooltipProps; content: TNode> }` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N fixed | String | left | fixed current column to left or right。options: left/right | N -foot | String / Function | - | tfoot content。Typescript：`string \| TNode \| TNode<{ col: BaseTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +foot | String / Function | - | tfoot content。Typescript：`string \| TNode \| TNode<{ col: BaseTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N minWidth | String / Number | - | add CSS property `min-width` to HTML Element ``，Browsers with [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) support `minWidth` | N -render | Function | - | render function can be used to render cell or head。Typescript：`TNode>` `interface BaseTableRenderParams extends BaseTableCellParams { type: RenderType }` `type RenderType = 'cell' \| 'title'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +render | Function | - | render function can be used to render cell or head。Typescript：`TNode>` `interface BaseTableRenderParams extends BaseTableCellParams { type: RenderType }` `type RenderType = 'cell' \| 'title'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N resizable | Boolean | true | resize current column width | N -resize | Object | - | Typescript：`TableColumnResizeConfig` `interface TableColumnResizeConfig { minWidth: number; maxWidth: number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +resize | Object | - | Typescript：`TableColumnResizeConfig` `interface TableColumnResizeConfig { minWidth: number; maxWidth: number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N stopPropagation | Boolean | - | stop cells of current col to propagation | N -thClassName | String / Object / Array / Function | - | th classnames。Typescript：`TableColumnClassName \| TableColumnClassName[]`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -title | String / Function | - | th content。Typescript：`string \| TNode \| TNode<{ col: BaseTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +thClassName | String / Object / Array / Function | - | th classnames。Typescript：`TableColumnClassName \| TableColumnClassName[]`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +title | String / Function | - | th content。Typescript：`string \| TNode \| TNode<{ col: BaseTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N width | String / Number | - | column width | N ### PrimaryTable Props @@ -101,7 +101,7 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -asyncLoading | TNode | - | async loading state。Typescript：`'loading' \| 'load-more' \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +asyncLoading | TNode | - | async loading state。Typescript：`'loading' \| 'load-more' \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N columnController | Object | - | Typescript：`TableColumnController` | N columnControllerVisible | Boolean | undefined | \- | N columns | Array | [] | table column configs。Typescript：`Array>` | N @@ -109,17 +109,17 @@ displayColumns | Array | - | Typescript：`CheckboxGroupValue` | N defaultDisplayColumns | Array | - | uncontrolled property。Typescript：`CheckboxGroupValue` | N dragSort | String | - | dag sort。options: row/row-handler/col/row-handler-col/drag-col | N dragSortOptions | Object | - | drag sort params。Typescript：`SortableOptions` | N -editableCellState | Function | - | Typescript：`EditableCellType` `type EditableCellType = (params: PrimaryTableCellParams) => boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +editableCellState | Function | - | Typescript：`EditableCellType` `type EditableCellType = (params: PrimaryTableCellParams) => boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N editableRowKeys | Array | - | editable row keys, row key value is from data[rowKey]。Typescript：`Array` | N -expandIcon | TNode | true | to show expand icon. expand icon is set in first column。Typescript：`boolean \| TNode>` `interface ExpandArrowRenderParams { row: T; index: number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +expandIcon | TNode | true | to show expand icon. expand icon is set in first column。Typescript：`boolean \| TNode>` `interface ExpandArrowRenderParams { row: T; index: number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N expandOnRowClick | Boolean | - | expand row on click | N -expandedRow | TNode | - | table expanded row, to show more detail information。Typescript：`TNode>` `interface TableExpandedRowParams { row: T; index: number; columns: PrimaryTableCol[] \| BaseTableCol[] }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +expandedRow | TNode | - | table expanded row, to show more detail information。Typescript：`TNode>` `interface TableExpandedRowParams { row: T; index: number; columns: PrimaryTableCol[] \| BaseTableCol[] }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N expandedRowKeys | Array | [] | expanded row keys, row key value is from data[rowKey]。Typescript：`Array` | N defaultExpandedRowKeys | Array | [] | expanded row keys, row key value is from data[rowKey]。uncontrolled property。Typescript：`Array` | N -filterIcon | TElement | - | filter icon。Typescript：`TNode<{ col: PrimaryTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -filterRow | TNode | - | filter value。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -filterValue | Object | - | filter value。Typescript：`FilterValue` `type FilterValue = { [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -defaultFilterValue | Object | - | filter value。uncontrolled property。Typescript：`FilterValue` `type FilterValue = { [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +filterIcon | TElement | - | filter icon。Typescript：`TNode<{ col: PrimaryTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +filterRow | TNode | - | filter value。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +filterValue | Object | - | filter value。Typescript：`FilterValue` `type FilterValue = { [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +defaultFilterValue | Object | - | filter value。uncontrolled property。Typescript：`FilterValue` `type FilterValue = { [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N hideSortTips | Boolean | - | hide sort tips | N indeterminateSelectedRowKeys | Array | - | indeterminate selected row keys, row key is from data[rowKey]。Typescript：`Array` | N multipleSort | Boolean | false | support multiple column fields sort | N @@ -128,26 +128,26 @@ selectOnRowClick | Boolean | - | select row data on row click | N selectedRowKeys | Array | [] | selected row keys, row key is from data[rowKey]。Typescript：`Array` | N defaultSelectedRowKeys | Array | [] | selected row keys, row key is from data[rowKey]。uncontrolled property。Typescript：`Array` | N showSortColumnBgColor | Boolean | false | column shows sort bg color | N -sort | Object / Array | - | sort configs。Typescript：`TableSort` `type TableSort = SortInfo \| Array` `interface SortInfo { sortBy: string; descending: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -defaultSort | Object / Array | - | sort configs。uncontrolled property。Typescript：`TableSort` `type TableSort = SortInfo \| Array` `interface SortInfo { sortBy: string; descending: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -sortIcon | TElement | - | sort icon。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +sort | Object / Array | - | sort configs。Typescript：`TableSort` `type TableSort = SortInfo \| Array` `interface SortInfo { sortBy: string; descending: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +defaultSort | Object / Array | - | sort configs。uncontrolled property。Typescript：`TableSort` `type TableSort = SortInfo \| Array` `interface SortInfo { sortBy: string; descending: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +sortIcon | TElement | - | sort icon。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N sortOnRowDraggable | Boolean | false | `deprecated`。sort on row draggable | N `Omit, 'columns' \| 'onCellClick'>` | \- | - | extends `Omit, 'columns' \| 'onCellClick'>` | N onAsyncLoadingClick | Function | | Typescript：`(context: { status: 'loading' \| 'load-more' }) => void`
trigger on async loading text clicked | N -onCellClick | Function | | Typescript：`(context: PrimaryTableCellEventContext) => void`
trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface PrimaryTableCellEventContext { row: T; col: PrimaryTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N -onChange | Function | | Typescript：`(data: TableChangeData, context: TableChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`

`interface TableChangeContext { trigger: TableChangeTrigger; currentData?: T[] }`

`type TableChangeTrigger = 'filter' \| 'sorter' \| 'pagination'`
| N -onColumnChange | Function | | Typescript：`(context: PrimaryTableColumnChange) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' \| 'uncheck'; e?: ChangeEvent }`
| N +onCellClick | Function | | Typescript：`(context: PrimaryTableCellEventContext) => void`
trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface PrimaryTableCellEventContext { row: T; col: PrimaryTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N +onChange | Function | | Typescript：`(data: TableChangeData, context: TableChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`

`interface TableChangeContext { trigger: TableChangeTrigger; currentData?: T[] }`

`type TableChangeTrigger = 'filter' \| 'sorter' \| 'pagination'`
| N +onColumnChange | Function | | Typescript：`(context: PrimaryTableColumnChange) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' \| 'uncheck'; e?: ChangeEvent }`
| N onColumnControllerVisibleChange | Function | | Typescript：`(visible: boolean, context: { trigger: 'cancel' \| 'confirm' }) => void`
| N -onDataChange | Function | | Typescript：`(data: Array, context: TableDataChangeContext) => void`
trigger on data changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableDataChangeContext { trigger: 'sort' }`
| N -onDisplayColumnsChange | Function | | Typescript：`(value: CheckboxGroupValue) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
| N -onDragSort | Function | | Typescript：`(context: DragSortContext) => void`
trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T; data: T[]; newData: T[]; currentData?: T[]; e: SortableEvent; sort: 'row' \| 'col' }`

`import { SortableEvent, SortableOptions } from 'sortablejs'`
| N -onExpandChange | Function | | Typescript：`(expandedRowKeys: Array, options: ExpandOptions) => void`
trigger on expand row keys changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface ExpandOptions { expandedRowData: Array; currentRowData: T }`
| N -onFilterChange | Function | | Typescript：`(filterValue: FilterValue, context: TableFilterChangeContext) => void`
trigger on filter value changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableFilterChangeContext { col?: PrimaryTableCol; trigger: 'filter-change' \| 'confirm' \| 'reset' \| 'clear' }`
| N -onRowEdit | Function | | Typescript：`(context: PrimaryTableRowEditContext) => void`
trigger on row data is editing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type PrimaryTableRowEditContext = PrimaryTableCellParams & { value: any; editedRow: T }`
| N -onRowValidate | Function | | Typescript：`(context: PrimaryTableRowValidateContext) => void`
trigger after row data validated。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type PrimaryTableRowValidateContext = { result: TableRowValidateResult[]; trigger: TableValidateTrigger }`

`type TableValidateTrigger = 'self' \| 'parent'`

`export type TableRowValidateResult = PrimaryTableCellParams & { errorList: AllValidateResult[]; value: any }`
| N -onSelectChange | Function | | Typescript：`(selectedRowKeys: Array, options: SelectOptions) => void`
trigger on select changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface SelectOptions { selectedRowData: Array; type: 'uncheck' \| 'check'; currentRowKey?: string; currentRowData?: T }`
| N -onSortChange | Function | | Typescript：`(sort: TableSort, options: SortOptions) => void`
trigger on sort changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface SortOptions { currentDataSource?: Array; col: PrimaryTableCol }`
| N -onValidate | Function | | Typescript：`(context: PrimaryTableValidateContext) => void`
trigger after row data validated。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface PrimaryTableValidateContext { result: TableErrorListMap }`

`type TableErrorListMap = { [key: string]: AllValidateResult[] }`
| N +onDataChange | Function | | Typescript：`(data: Array, context: TableDataChangeContext) => void`
trigger on data changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface TableDataChangeContext { trigger: 'sort' }`
| N +onDisplayColumnsChange | Function | | Typescript：`(value: CheckboxGroupValue) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
| N +onDragSort | Function | | Typescript：`(context: DragSortContext) => void`
trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T; data: T[]; newData: T[]; currentData?: T[]; e: SortableEvent; sort: 'row' \| 'col' }`

`import { SortableEvent, SortableOptions } from 'sortablejs'`
| N +onExpandChange | Function | | Typescript：`(expandedRowKeys: Array, options: ExpandOptions) => void`
trigger on expand row keys changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface ExpandOptions { expandedRowData: Array; currentRowData: T }`
| N +onFilterChange | Function | | Typescript：`(filterValue: FilterValue, context: TableFilterChangeContext) => void`
trigger on filter value changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface TableFilterChangeContext { col?: PrimaryTableCol; trigger: 'filter-change' \| 'confirm' \| 'reset' \| 'clear' }`
| N +onRowEdit | Function | | Typescript：`(context: PrimaryTableRowEditContext) => void`
trigger on row data is editing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`type PrimaryTableRowEditContext = PrimaryTableCellParams & { value: any; editedRow: T }`
| N +onRowValidate | Function | | Typescript：`(context: PrimaryTableRowValidateContext) => void`
trigger after row data validated。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`type PrimaryTableRowValidateContext = { result: TableRowValidateResult[]; trigger: TableValidateTrigger }`

`type TableValidateTrigger = 'self' \| 'parent'`

`export type TableRowValidateResult = PrimaryTableCellParams & { errorList: AllValidateResult[]; value: any }`
| N +onSelectChange | Function | | Typescript：`(selectedRowKeys: Array, options: SelectOptions) => void`
trigger on select changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface SelectOptions { selectedRowData: Array; type: 'uncheck' \| 'check'; currentRowKey?: string; currentRowData?: T }`
| N +onSortChange | Function | | Typescript：`(sort: TableSort, options: SortOptions) => void`
trigger on sort changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface SortOptions { currentDataSource?: Array; col: PrimaryTableCol }`
| N +onValidate | Function | | Typescript：`(context: PrimaryTableValidateContext) => void`
trigger after row data validated。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface PrimaryTableValidateContext { result: TableErrorListMap }`

`type TableErrorListMap = { [key: string]: AllValidateResult[] }`
| N ### PrimaryTableInstanceFunctions 组件实例方法 @@ -155,24 +155,24 @@ name | params | return | description -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -validateRowData | `(rowValue: any)` | `Promise<{ trigger: TableValidateTrigger, result: ErrorListObjectType[] }>` | required。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type ErrorListObjectType = PrimaryTableRowEditContext & { errorList: AllValidateResult[] }`
+validateRowData | `(rowValue: any)` | `Promise<{ trigger: TableValidateTrigger, result: ErrorListObjectType[] }>` | required。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`type ErrorListObjectType = PrimaryTableRowEditContext & { errorList: AllValidateResult[] }`
validateTableData | \- | `Promise<{ result: TableErrorListMap }>` | required ### PrimaryTableCol name | type | default | description | required -- | -- | -- | -- | -- -cell | String / Function | - | to render table cell。Typescript：`string \| TNode>` `interface PrimaryTableCellParams { row: T; rowIndex: number; col: PrimaryTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -checkProps | Object / Function | - | checkbox or radio component properties。Typescript：`CheckProps` `type CheckProps = CheckboxProps \| RadioProps \| ((options: { row: T; rowIndex: number }) => CheckboxProps \| RadioProps)` `import { CheckboxProps } from '@Checkbox'`，[Radio API Documents](./radio?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +cell | String / Function | - | to render table cell。Typescript：`string \| TNode>` `interface PrimaryTableCellParams { row: T; rowIndex: number; col: PrimaryTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +checkProps | Object / Function | - | checkbox or radio component properties。Typescript：`CheckProps` `type CheckProps = CheckboxProps \| RadioProps \| ((options: { row: T; rowIndex: number }) => CheckboxProps \| RadioProps)` `import { CheckboxProps } from '@Checkbox'`，[Radio API Documents](./radio?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N children | Array | - | grouping table head。Typescript：`Array>` | N colKey | String | - | unique key for column | N disabled | Function | - | disable table select action。Typescript：`(options: {row: T; rowIndex: number }) => boolean` | N edit | Object | - | Typescript：`TableEditableCellConfig` | N filter | Object | - | filter rules config。Typescript：`TableColumnFilter` | N -render | Function | - | to render cell or head。Typescript：`TNode>` `interface PrimaryTableRenderParams extends PrimaryTableCellParams { type: RenderType }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -sortType | String | all | sort options。options: desc/asc/all。Typescript：`SortType` `type SortType = 'desc' \| 'asc' \| 'all'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -sorter | Boolean / Function | false | sort configs。Typescript：`boolean \| SorterFun` `type SorterFun = (a: T, b: T) => number`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -title | String / Function | - | to render table head。Typescript：`string \| TNode<{ col: PrimaryTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +render | Function | - | to render cell or head。Typescript：`TNode>` `interface PrimaryTableRenderParams extends PrimaryTableCellParams { type: RenderType }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +sortType | String | all | sort options。options: desc/asc/all。Typescript：`SortType` `type SortType = 'desc' \| 'asc' \| 'all'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +sorter | Boolean / Function | false | sort configs。Typescript：`boolean \| SorterFun` `type SorterFun = (a: T, b: T) => number`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +title | String / Function | - | to render table head。Typescript：`string \| TNode<{ col: PrimaryTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N type | String | single | row select type。options: single/multiple | N `Omit` | \- | - | extends `Omit` | N @@ -186,11 +186,11 @@ beforeDragSort | Function | - | stop to drag sort。Typescript：`(context: Drag expandedTreeNodes | Array | [] | expanded tree node row keys, row key value is from data[rowKey]。Typescript：`Array` | N defaultExpandedTreeNodes | Array | [] | expanded tree node row keys, row key value is from data[rowKey]。uncontrolled property。Typescript：`Array` | N tree | Object | - | tree data configs。Typescript：`TableTreeConfig` | N -treeExpandAndFoldIcon | Function | - | sort icon。Typescript：`TNode<{ type: 'expand' \| 'fold' }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +treeExpandAndFoldIcon | Function | - | sort icon。Typescript：`TNode<{ type: 'expand' \| 'fold' }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N `PrimaryTableProps` | \- | - | extends `PrimaryTableProps` | N -onAbnormalDragSort | Function | | Typescript：`(context: TableAbnormalDragSortContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableAbnormalDragSortContext { code: number; reason: string }`
| N -onExpandedTreeNodesChange | Function | | Typescript：`(expandedTreeNodes: Array, options: TableTreeNodeExpandOptions ) => void`
trigger on tree node expanded or folded。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableTreeNodeExpandOptions { row: T; rowIndex: number; rowState: TableRowState; type: 'fold' \| 'expand'; trigger?: 'expand-fold-icon' \| 'row-click' \| 'default-expand-all' \| 'expand-all' \| 'fold-all' }`
| N -onTreeExpandChange | Function | | Typescript：`(context: TableTreeExpandChangeContext) => void`
`deprecated`。trigger on tree node expanded or folded, use `expandedTreeNodesChange` please。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableTreeExpandChangeContext { row: T; rowIndex: number; rowState: TableRowState; trigger?: 'expand-fold-icon' \| 'row-click' }`
| N +onAbnormalDragSort | Function | | Typescript：`(context: TableAbnormalDragSortContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface TableAbnormalDragSortContext { code: number; reason: string }`
| N +onExpandedTreeNodesChange | Function | | Typescript：`(expandedTreeNodes: Array, options: TableTreeNodeExpandOptions ) => void`
trigger on tree node expanded or folded。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface TableTreeNodeExpandOptions { row: T; rowIndex: number; rowState: TableRowState; type: 'fold' \| 'expand'; trigger?: 'expand-fold-icon' \| 'row-click' \| 'default-expand-all' \| 'expand-all' \| 'fold-all' }`
| N +onTreeExpandChange | Function | | Typescript：`(context: TableTreeExpandChangeContext) => void`
`deprecated`。trigger on tree node expanded or folded, use `expandedTreeNodesChange` please。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface TableTreeExpandChangeContext { row: T; rowIndex: number; rowState: TableRowState; trigger?: 'expand-fold-icon' \| 'row-click' }`
| N ### EnhancedTableInstanceFunctions 组件实例方法 @@ -201,7 +201,7 @@ style | Object | - | 样式，Typescript：`React.CSSProperties` | N appendTo | `(key: TableRowValue, newData: T)` | \- | required expandAll | \- | \- | required foldAll | \- | \- | required -getData | `(key: TableRowValue)` | `TableRowState` | required。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type TableRowValue = string \| number`
+getData | `(key: TableRowValue)` | `TableRowState` | required。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`type TableRowValue = string \| number`
getTreeExpandedRow | `(type: 'unique' \| 'data' \| 'all')` | \- | required。get expanded row data getTreeNode | \- | `T[]` | required insertAfter | `(key: TableRowValue, newData: T)` | \- | required @@ -210,7 +210,7 @@ remove | `(key: TableRowValue)` | \- | required removeChildren | `(key: TableRowValue)` | \- | required。remove all children nodes of one node resetData | `(newData: T[])` | \- | required setData | `(key: TableRowValue, newRowData: T)` | \- | required -swapData | `(params: SwapParams)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface SwapParams { current: T; target: T; currentIndex: number; targetIndex: number }`
+swapData | `(params: SwapParams)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface SwapParams { current: T; target: T; currentIndex: number; targetIndex: number }`
toggleExpandData | `(p: { row: T, rowIndex: number})` | \- | required ### TableRowState @@ -231,25 +231,25 @@ rowIndex | Number | - | required | Y name | type | default | description | required -- | -- | -- | -- | -- -attrs | Object | - | html attributes of component。Typescript：`HTMLElementAttributes`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -classNames | String | - | component class names。Typescript：`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -component | TElement | - | Typescript：`ComponentType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +attrs | Object | - | html attributes of component。Typescript：`HTMLElementAttributes`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +classNames | String | - | component class names。Typescript：`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +component | TElement | - | Typescript：`ComponentType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N confirmEvents | Array | - | Typescript：`string[]` | N -list | Array | - | Typescript：`Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -props | Object | - | Typescript：`FilterProps` `type FilterProps = RadioProps \| CheckboxProps \| InputProps \| { [key: string]: any }`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +list | Array | - | Typescript：`Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +props | Object | - | Typescript：`FilterProps` `type FilterProps = RadioProps \| CheckboxProps \| InputProps \| { [key: string]: any }`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N resetValue | \- | - | Typescript：`any` | N showConfirmAndReset | Boolean | false | \- | N -style | Object | - | styles of component。Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -type | String | - | Typescript：`FilterType` `type FilterType = 'input' \| 'single' \| 'multiple'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +style | Object | - | styles of component。Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +type | String | - | Typescript：`FilterType` `type FilterType = 'input' \| 'single' \| 'multiple'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N ### TableColumnController name | type | default | description | required -- | -- | -- | -- | -- -buttonProps | Object | - | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -checkboxProps | Object | - | Typescript：`CheckboxGroupProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -dialogProps | Object | - | Typescript：`DialogProps`，[Dialog API Documents](./dialog?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +buttonProps | Object | - | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +checkboxProps | Object | - | Typescript：`CheckboxGroupProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +dialogProps | Object | - | Typescript：`DialogProps`，[Dialog API Documents](./dialog?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N displayType | String | auto-width | options: fixed-width/auto-width | N fields | Array | - | Typescript：`string[]` | N hideTriggerButton | Boolean | false | \- | N @@ -260,13 +260,13 @@ placement | String | top-right | options: top-left/top-right/bottom-left/bottom- name | type | default | description | required -- | -- | -- | -- | -- abortEditOnEvent | Array | - | Typescript：`string[]` | N -component | \- | - | component definition。Typescript：`ComponentType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +component | \- | - | component definition。Typescript：`ComponentType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N defaultEditable | Boolean | false | set default editable once | N keepEditMode | Boolean | false | set table cell always to be editable | N on | Function | - | Typescript：`(context: TableEditableCellPropsParams) => { [eventName: string]: Function }` | N -onEdited | Function | - | trigger on finishing editing。Typescript：`(context: PrimaryTableOnEditedContext) => void` `type PrimaryTableOnEditedContext = PrimaryTableCellParams & { trigger: string; newRowData: T; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -props | Object | - | props of `edit.component`。Typescript：`TableEditableCellProps` `type TableEditableCellProps = TablePlainObject \| ((params: TableEditableCellPropsParams) => TablePlainObject)` `interface TableEditableCellPropsParams extends PrimaryTableCellParams { editedRow: T; updateEditedCellValue: (val: any) => void }` `interface TablePlainObject{ [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -rules | Array | - | form rules。Typescript：`TableEditableCellRules` `type TableEditableCellRules = FormRule[] \| ((params: PrimaryTableCellParams) => FormRule[])`，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +onEdited | Function | - | trigger on finishing editing。Typescript：`(context: PrimaryTableOnEditedContext) => void` `type PrimaryTableOnEditedContext = PrimaryTableCellParams & { trigger: string; newRowData: T; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +props | Object | - | props of `edit.component`。Typescript：`TableEditableCellProps` `type TableEditableCellProps = TablePlainObject \| ((params: TableEditableCellPropsParams) => TablePlainObject)` `interface TableEditableCellPropsParams extends PrimaryTableCellParams { editedRow: T; updateEditedCellValue: (val: any) => void }` `interface TablePlainObject{ [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +rules | Array | - | form rules。Typescript：`TableEditableCellRules` `type TableEditableCellRules = FormRule[] \| ((params: PrimaryTableCellParams) => FormRule[])`，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N showEditIcon | Boolean | true | show edit icon | N validateTrigger | String | 'exit' | when to trigger validate。Typescript：`'exit' \| 'change'` | N diff --git a/packages/components/table/table.md b/packages/components/table/table.md index 6ef1d1c87c..2c1af6d41a 100644 --- a/packages/components/table/table.md +++ b/packages/components/table/table.md @@ -7,50 +7,50 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -attach | String / Function | - | 超出省略等所有浮层元素统一绑定到 `attach`，可根据实际情况调整挂载元素。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +attach | String / Function | - | 超出省略等所有浮层元素统一绑定到 `attach`，可根据实际情况调整挂载元素。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N bordered | Boolean | false | 是否显示表格边框 | N -bottomContent | TNode | - | 表格底部内容，可以用于自定义列设置等。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -cellEmptyContent | TNode | - | 单元格数据为空时呈现的内容。TS 类型：`string \| TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +bottomContent | TNode | - | 表格底部内容，可以用于自定义列设置等。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +cellEmptyContent | TNode | - | 单元格数据为空时呈现的内容。TS 类型：`string \| TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array>` | N data | Array | [] | 数据源，泛型 T 指表格数据类型。TS 类型：`Array` | N disableDataPage | Boolean | false | 是否禁用本地数据分页。当 `data` 数据长度超过分页大小时，会自动进行本地数据分页。如果 `disableDataPage` 设置为 true，则无论何时，都不会进行本地数据分页 | N -empty | TNode | '' | 空表格呈现样式，支持全局配置 `GlobalConfigProvider`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -firstFullRow | TNode | - | 首行内容，横跨所有列。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +empty | TNode | '' | 空表格呈现样式，支持全局配置 `GlobalConfigProvider`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +firstFullRow | TNode | - | 首行内容，横跨所有列。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N fixedRows | Array | - | 固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行。TS 类型：`Array` | N footData | Array | [] | 表尾数据源，泛型 T 指表格数据类型。TS 类型：`Array` | N footerAffixProps | Object | - | 已废弃。请更为使用 `footerAffixedBottom`。表尾吸底基于 Affix 组件开发，透传全部 Affix 组件属性。。TS 类型：`Partial` | N footerAffixedBottom | Boolean / Object | false | 表尾吸底。使用此向功能，需要非常注意表格是相对于哪一个父元素进行滚动。值为 `true`，则表示相对于整个窗口吸底。如果表格滚动的父元素不是整个窗口，请通过 `footerAffixedBottom.container` 调整固钉的吸顶范围。基于 Affix 组件开发，透传全部 Affix 组件属性。TS 类型：`boolean \| Partial` | N -footerSummary | TNode | - | 表尾总结行。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -headerAffixProps | Object | - | 已废弃。请更为使用 `headerAffixedTop`。表头吸顶基于 Affix 组件开发，透传全部 Affix 组件属性。TS 类型：`Partial`，[Affix API Documents](./affix?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +footerSummary | TNode | - | 表尾总结行。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +headerAffixProps | Object | - | 已废弃。请更为使用 `headerAffixedTop`。表头吸顶基于 Affix 组件开发，透传全部 Affix 组件属性。TS 类型：`Partial`，[Affix API Documents](./affix?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N headerAffixedTop | Boolean / Object | false | 表头吸顶。使用该功能，需要非常注意表格是相对于哪一个父元素进行滚动。值为 `true`，表示相对于整个窗口吸顶。如果表格滚动的父元素不是整个窗口，请通过 `headerAffixedTop.container` 调整吸顶的位置。基于 Affix 组件开发，透传全部 Affix 组件属性。。TS 类型：`boolean \| Partial` | N height | String / Number | - | 表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` | N horizontalScrollAffixedBottom | Boolean / Object | - | 滚动条吸底。基于 Affix 组件开发，透传全部 Affix 组件属性。TS 类型：`boolean \| Partial` | N hover | Boolean | false | 是否显示鼠标悬浮状态 | N -lastFullRow | TNode | - | 尾行内容，横跨所有列。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +lastFullRow | TNode | - | 尾行内容，横跨所有列。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N lazyLoad | Boolean | false | 是否启用整个表格元素的懒加载，当页面滚动到可视区域后再渲染表格。注意和表格内部行滚动懒加载的区别，内部行滚动无论表格是否在可视区域都会默认渲染第一屏的行元素 | N -loading | TNode | undefined | 加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -loadingProps | Object | - | 透传加载组件全部属性。TS 类型：`Partial`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +loading | TNode | undefined | 加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +loadingProps | Object | - | 透传加载组件全部属性。TS 类型：`Partial`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N maxHeight | String / Number | - | 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px | N -pagination | Object | - | 分页配置，值为空则不显示。具体 API 参考分页组件。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDataPage = true`。TS 类型：`PaginationProps`，[Pagination API Documents](./pagination?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +pagination | Object | - | 分页配置，值为空则不显示。具体 API 参考分页组件。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDataPage = true`。TS 类型：`PaginationProps`，[Pagination API Documents](./pagination?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N paginationAffixedBottom | Boolean / Object | - | 分页吸底。基于 Affix 组件开发，透传全部 Affix 组件属性。TS 类型：`boolean \| Partial` | N resizable | Boolean | false | 是否允许调整列宽，设置 `tableLayout=fixed` 效果更友好，此时不允许通过 CSS 设置 `table`元素宽度，也不允许设置 `tableContentWidth`。一般不建议在列宽调整场景使用 `tableLayout: auto`。如果想要配置宽度可调整的最小值和最大值，请使用 `column.resize`，示例：`columns: [{ resize: { minWidth: 120, maxWidth: 300 } }]`。
默认规则：因列宽超出存在横向滚动条时，列宽调整仅影响当前列宽和总列宽；表格列较少没有横向滚动条时，列宽调整表现为自身宽度和相邻宽度变化 | N -rowAttributes | Object / Array / Function | - | HTML 标签 `tr` 的属性。类型为 Function 时，参数说明：`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body` 表示属性作用于 `tbody` 中的元素；`params.type=foot` 表示属性作用于 `tfoot` 中的元素。
示例一：{ draggable: true }，
示例二：[{ draggable: true }, { title: '超出省略显示' }]。
示例三：() => [{ draggable: true }]。TS 类型：`TableRowAttributes` `type TableRowAttributes = HTMLElementAttributes \| ((params: { row: T; rowIndex: number; type: 'body' \| 'foot' }) => HTMLElementAttributes) \| Array>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -rowClassName | String / Object / Array / Function | - | 行类名，泛型 T 指表格数据类型。`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body` 表示类名作用于 `tbody` 中的元素；`params.type= tfoot` 表示类名作用于 `tfoot` 中的元素。TS 类型：`ClassName \| ((params: RowClassNameParams) => ClassName)` `interface RowClassNameParams { row: T; rowIndex: number; type?: 'body' \| 'foot' }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +rowAttributes | Object / Array / Function | - | HTML 标签 `tr` 的属性。类型为 Function 时，参数说明：`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body` 表示属性作用于 `tbody` 中的元素；`params.type=foot` 表示属性作用于 `tfoot` 中的元素。
示例一：{ draggable: true }，
示例二：[{ draggable: true }, { title: '超出省略显示' }]。
示例三：() => [{ draggable: true }]。TS 类型：`TableRowAttributes` `type TableRowAttributes = HTMLElementAttributes \| ((params: { row: T; rowIndex: number; type: 'body' \| 'foot' }) => HTMLElementAttributes) \| Array>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +rowClassName | String / Object / Array / Function | - | 行类名，泛型 T 指表格数据类型。`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body` 表示类名作用于 `tbody` 中的元素；`params.type= tfoot` 表示类名作用于 `tfoot` 中的元素。TS 类型：`ClassName \| ((params: RowClassNameParams) => ClassName)` `interface RowClassNameParams { row: T; rowIndex: number; type?: 'body' \| 'foot' }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N rowKey | String | 'id' | 必需。唯一标识一行数据的字段名，来源于 `data` 中的字段。如果是字段嵌套多层，可以设置形如 `item.a.id` 的方法 | Y -rowspanAndColspan | Function | - | 用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`。TS 类型：`TableRowspanAndColspanFunc` `type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +rowspanAndColspan | Function | - | 用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`。TS 类型：`TableRowspanAndColspanFunc` `type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N rowspanAndColspanInFooter | Function | - | 用于自定义表尾的合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`。TS 类型：`TableRowspanAndColspanFunc` | N -scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`。TS 类型：`TScroll`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`。TS 类型：`TScroll`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N showHeader | Boolean | true | 是否显示表头 | N -size | String | medium | 表格尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | 表格尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N stripe | Boolean | false | 是否显示斑马纹 | N tableContentWidth | String | - | 表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度 | N tableLayout | String | fixed | 表格布局方式，`` 元素原生属性。[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)。注意，在列宽调整下场景只能使用 `fixed` 模式。可选项：auto/fixed | N -topContent | TNode | - | 表格顶部内容，可以用于自定义列设置、顶部查询条件等。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +topContent | TNode | - | 表格顶部内容，可以用于自定义列设置、顶部查询条件等。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N verticalAlign | String | middle | 行内容上下方向对齐。可选项：top/middle/bottom | N -onCellClick | Function | | TS 类型：`(context: BaseTableCellEventContext) => void`
单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N +onCellClick | Function | | TS 类型：`(context: BaseTableCellEventContext) => void`
单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N onColumnResizeChange | Function | | TS 类型：`(context: { columnsWidth: { [colKey: string]: number }; }) => void`
列调整大小之后触发。`context.columnsWidth` 表示操作后各个列的宽度； | N onPageChange | Function | | TS 类型：`(pageInfo: PageInfo, newDataSource: Array) => void`
分页发生变化时触发。参数 newDataSource 表示分页后的数据。本地数据进行分页时，newDataSource 和源数据 data 会不一样。泛型 T 指表格数据类型 | N -onRowClick | Function | | TS 类型：`(context: RowEventContext) => void`
行点击时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent }`
| N +onRowClick | Function | | TS 类型：`(context: RowEventContext) => void`
行点击时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent }`
| N onRowDblclick | Function | | TS 类型：`(context: RowEventContext) => void`
行双击时触发，泛型 T 指表格数据类型 | N onRowMousedown | Function | | TS 类型：`(context: RowEventContext) => void`
鼠标在表格行按下时触发，泛型 T 指表格数据类型 | N onRowMouseenter | Function | | TS 类型：`(context: RowEventContext) => void`
鼠标在表格行进入时触发，泛型 T 指表格数据类型 | N @@ -76,23 +76,23 @@ scrollToElement | `(params: ScrollToElementParams)` | \- | 必需。虚拟滚动 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- align | String | left | 列横向对齐方式。可选项：left/right/center | N -attrs | Object / Function | - | 透传 HTML 属性到列元素。TS 类型：`BaseTableColumnAttributes` `type BaseTableColumnAttributes = { [key: string]: any } \| ((context: CellData) => { [key: string]: any })`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -cell | String / Function | - | 自定义单元格渲染，优先级高于 render。泛型 T 指表格数据类型。TS 类型：`string \| TNode>` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +attrs | Object / Function | - | 透传 HTML 属性到列元素。TS 类型：`BaseTableColumnAttributes` `type BaseTableColumnAttributes = { [key: string]: any } \| ((context: CellData) => { [key: string]: any })`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +cell | String / Function | - | 自定义单元格渲染，优先级高于 render。泛型 T 指表格数据类型。TS 类型：`string \| TNode>` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N children | Array | - | 用于多级表头，泛型 T 指表格数据类型。TS 类型：`Array>` | N -className | String / Object / Array / Function | - | 列类名，值类型是 Function 使用返回值作为列类名；值类型不为 Function 时，值用于整列类名（含表头）。泛型 T 指表格数据类型。TS 类型：`TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +className | String / Object / Array / Function | - | 列类名，值类型是 Function 使用返回值作为列类名；值类型不为 Function 时，值用于整列类名（含表头）。泛型 T 指表格数据类型。TS 类型：`TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N colKey | String | - | 渲染列所需字段，值为 `serial-number` 表示当前列为「序号」列 | N colspan | Number | - | 单行表头合并列。多行表头请参考「多级表头」文档示例 | N -ellipsis | TNode | false | 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。
值为 `true`，则超出省略浮层默认显示单元格内容；
值类型为 `Function` 则自定义超出省略浮中层显示的内容；
值类型为 `Object`，则自动透传属性到 Tooltip 组件，可用于调整浮层背景色和方向等特性。
同时透传 Tooltip 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。
请注意单元格超出省略的两个基本点：1. 内容元素是内联元素或样式（自定义单元格内容时需特别注意）；2. 内容超出父元素。TS 类型：`boolean \| TNode> \| TooltipProps \| { props: TooltipProps; content: TNode> }`，[Tooltip API Documents](./tooltip?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -ellipsisTitle | TNode | undefined | 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。
值为 `true`，则超出省略的浮层默认显示表头全部内容；
值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；
值类型为 `Object`，则自动透传属性到 Tooltip 组件，则自动透传属性到 Tooltip 组件，可用于调整浮层背景色和方向等特性。
同时透传 Tooltip 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。TS 类型：`boolean \| TNode> \| TooltipProps \| { props: TooltipProps; content: TNode> }` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +ellipsis | TNode | false | 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。
值为 `true`，则超出省略浮层默认显示单元格内容；
值类型为 `Function` 则自定义超出省略浮中层显示的内容；
值类型为 `Object`，则自动透传属性到 Tooltip 组件，可用于调整浮层背景色和方向等特性。
同时透传 Tooltip 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。
请注意单元格超出省略的两个基本点：1. 内容元素是内联元素或样式（自定义单元格内容时需特别注意）；2. 内容超出父元素。TS 类型：`boolean \| TNode> \| TooltipProps \| { props: TooltipProps; content: TNode> }`，[Tooltip API Documents](./tooltip?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +ellipsisTitle | TNode | undefined | 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。
值为 `true`，则超出省略的浮层默认显示表头全部内容；
值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；
值类型为 `Object`，则自动透传属性到 Tooltip 组件，则自动透传属性到 Tooltip 组件，可用于调整浮层背景色和方向等特性。
同时透传 Tooltip 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。TS 类型：`boolean \| TNode> \| TooltipProps \| { props: TooltipProps; content: TNode> }` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N fixed | String | left | 固定列显示位置。可选项：left/right | N -foot | String / Function | - | 自定义表尾内容。TS 类型：`string \| TNode \| TNode<{ col: BaseTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +foot | String / Function | - | 自定义表尾内容。TS 类型：`string \| TNode \| TNode<{ col: BaseTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N minWidth | String / Number | - | 透传 CSS 属性 `min-width` 到 `` 元素。⚠️ 仅少部分浏览器支持，如：使用 [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) 渲染的 Chrome 浏览器支持 `minWidth` | N -render | Function | - | 自定义表头或单元格，泛型 T 指表格数据类型。TS 类型：`TNode>` `interface BaseTableRenderParams extends BaseTableCellParams { type: RenderType }` `type RenderType = 'cell' \| 'title'`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +render | Function | - | 自定义表头或单元格，泛型 T 指表格数据类型。TS 类型：`TNode>` `interface BaseTableRenderParams extends BaseTableCellParams { type: RenderType }` `type RenderType = 'cell' \| 'title'`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N resizable | Boolean | true | 是否允许调整当前列列宽 | N -resize | Object | - | 限制拖拽调整的最小宽度和最大宽度。`resize.minWidth` 默认为 `80`，`resize.maxWidth` 默认为 `600`。TS 类型：`TableColumnResizeConfig` `interface TableColumnResizeConfig { minWidth: number; maxWidth: number }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +resize | Object | - | 限制拖拽调整的最小宽度和最大宽度。`resize.minWidth` 默认为 `80`，`resize.maxWidth` 默认为 `600`。TS 类型：`TableColumnResizeConfig` `interface TableColumnResizeConfig { minWidth: number; maxWidth: number }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N stopPropagation | Boolean | - | 是否阻止当列单元格点击事件冒泡 | N -thClassName | String / Object / Array / Function | - | 列表头类名，值类型是函数时使用返回值作为列类名。泛型 T 指表格数据类型。TS 类型：`TableColumnClassName \| TableColumnClassName[]`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -title | String / Function | - | 自定义表头渲染，优先级高于 render。TS 类型：`string \| TNode \| TNode<{ col: BaseTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +thClassName | String / Object / Array / Function | - | 列表头类名，值类型是函数时使用返回值作为列类名。泛型 T 指表格数据类型。TS 类型：`TableColumnClassName \| TableColumnClassName[]`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +title | String / Function | - | 自定义表头渲染，优先级高于 render。TS 类型：`string \| TNode \| TNode<{ col: BaseTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N width | String / Number | - | 列宽，可以作为最小宽度使用。当列宽总和小于 `table` 元素时，浏览器根据宽度设置情况自动分配宽度；当列宽总和大于 `table` 元素，表现为定宽。可以同时调整 `table` 元素的宽度来达到自己想要的效果 | N ### PrimaryTable Props @@ -101,7 +101,7 @@ width | String / Number | - | 列宽，可以作为最小宽度使用。当列 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -asyncLoading | TNode | - | 异步加载状态。值为 `loading` 显示默认文字 “正在加载中，请稍后”，值为 `loading-more` 显示“点击加载更多”，值为其他，表示完全自定义异步加载区域内容。TS 类型：`'loading' \| 'load-more' \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +asyncLoading | TNode | - | 异步加载状态。值为 `loading` 显示默认文字 “正在加载中，请稍后”，值为 `loading-more` 显示“点击加载更多”，值为其他，表示完全自定义异步加载区域内容。TS 类型：`'loading' \| 'load-more' \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N columnController | Object | - | 自定义显示列控制器，值为空不会显示。具体属性请看下方 `TableColumnController` 文档。TS 类型：`TableColumnController` | N columnControllerVisible | Boolean | undefined | 是否显示列配置弹框控制器，只要该属性值不为 `undefined`，弹框的显示/隐藏完全由该属性控制 | N columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array>` | N @@ -109,17 +109,17 @@ displayColumns | Array | - | 列配置功能中，当前显示的列。TS 类型 defaultDisplayColumns | Array | - | 列配置功能中，当前显示的列。非受控属性。TS 类型：`CheckboxGroupValue` | N dragSort | String | - | 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`row-handler` 表示通过拖拽手柄进行行拖拽排序。值为 `col` 表示列顺序拖拽。值为 `row-handler-col` 表示同时支持行拖拽和列拖拽。⚠️`drag-col` 已废弃，请勿使用。。可选项：row/row-handler/col/row-handler-col/drag-col | N dragSortOptions | Object | - | 拖拽排序扩展参数，具体参数见 [Sortable](https://github.com/SortableJS/Sortable)。TS 类型：`SortableOptions` | N -editableCellState | Function | - | 单元格是否允许编辑。返回值为 `true` 则表示可编辑；返回值为 `false` 则表示不可编辑，只读状态。TS 类型：`EditableCellType` `type EditableCellType = (params: PrimaryTableCellParams) => boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +editableCellState | Function | - | 单元格是否允许编辑。返回值为 `true` 则表示可编辑；返回值为 `false` 则表示不可编辑，只读状态。TS 类型：`EditableCellType` `type EditableCellType = (params: PrimaryTableCellParams) => boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N editableRowKeys | Array | - | 处于编辑状态的行。TS 类型：`Array` | N -expandIcon | TNode | true | 用于控制是否显示「展开图标列」，值为 `false` 则不会显示。可以精确到某一行是否显示，还可以自定义展开图标内容。`expandedRow` 存在时，该参数有效。支持全局配置 `GlobalConfigProvider`。TS 类型：`boolean \| TNode>` `interface ExpandArrowRenderParams { row: T; index: number }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +expandIcon | TNode | true | 用于控制是否显示「展开图标列」，值为 `false` 则不会显示。可以精确到某一行是否显示，还可以自定义展开图标内容。`expandedRow` 存在时，该参数有效。支持全局配置 `GlobalConfigProvider`。TS 类型：`boolean \| TNode>` `interface ExpandArrowRenderParams { row: T; index: number }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N expandOnRowClick | Boolean | - | 是否允许点击行展开 | N -expandedRow | TNode | - | 展开行内容，泛型 T 指表格数据类型。TS 类型：`TNode>` `interface TableExpandedRowParams { row: T; index: number; columns: PrimaryTableCol[] \| BaseTableCol[] }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +expandedRow | TNode | - | 展开行内容，泛型 T 指表格数据类型。TS 类型：`TNode>` `interface TableExpandedRowParams { row: T; index: number; columns: PrimaryTableCol[] \| BaseTableCol[] }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N expandedRowKeys | Array | [] | 展开行。TS 类型：`Array` | N defaultExpandedRowKeys | Array | [] | 展开行。非受控属性。TS 类型：`Array` | N -filterIcon | TElement | - | 自定义过滤图标，支持全局配置 `GlobalConfigProvider`。TS 类型：`TNode<{ col: PrimaryTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -filterRow | TNode | - | 自定义过滤状态行及清空筛选等。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -filterValue | Object | - | 过滤数据的值。TS 类型：`FilterValue` `type FilterValue = { [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -defaultFilterValue | Object | - | 过滤数据的值。非受控属性。TS 类型：`FilterValue` `type FilterValue = { [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +filterIcon | TElement | - | 自定义过滤图标，支持全局配置 `GlobalConfigProvider`。TS 类型：`TNode<{ col: PrimaryTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +filterRow | TNode | - | 自定义过滤状态行及清空筛选等。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +filterValue | Object | - | 过滤数据的值。TS 类型：`FilterValue` `type FilterValue = { [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +defaultFilterValue | Object | - | 过滤数据的值。非受控属性。TS 类型：`FilterValue` `type FilterValue = { [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N hideSortTips | Boolean | - | 隐藏排序文本提示，支持全局配置 `GlobalConfigProvider`，默认全局配置值为 `false` | N indeterminateSelectedRowKeys | Array | - | 半选状态行。选中行请更为使用 `selectedRowKeys` 控制。TS 类型：`Array` | N multipleSort | Boolean | false | 是否支持多列排序 | N @@ -128,26 +128,26 @@ selectOnRowClick | Boolean | - | 是否在点击整行时选中 | N selectedRowKeys | Array | [] | 选中行，控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制。TS 类型：`Array` | N defaultSelectedRowKeys | Array | [] | 选中行，控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制。非受控属性。TS 类型：`Array` | N showSortColumnBgColor | Boolean | false | 当前排序列是否显示背景色 | N -sort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。TS 类型：`TableSort` `type TableSort = SortInfo \| Array` `interface SortInfo { sortBy: string; descending: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -defaultSort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。非受控属性。TS 类型：`TableSort` `type TableSort = SortInfo \| Array` `interface SortInfo { sortBy: string; descending: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -sortIcon | TElement | - | 自定义排序图标，支持全局配置 `GlobalConfigProvider`。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +sort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。TS 类型：`TableSort` `type TableSort = SortInfo \| Array` `interface SortInfo { sortBy: string; descending: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +defaultSort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。非受控属性。TS 类型：`TableSort` `type TableSort = SortInfo \| Array` `interface SortInfo { sortBy: string; descending: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +sortIcon | TElement | - | 自定义排序图标，支持全局配置 `GlobalConfigProvider`。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N sortOnRowDraggable | Boolean | false | 已废弃。允许表格行拖拽时排序。请更为使用 `dragSort=\"row\"` | N `Omit, 'columns' \| 'onCellClick'>` | \- | - | 继承 `Omit, 'columns' \| 'onCellClick'>` 中的全部属性 | N onAsyncLoadingClick | Function | | TS 类型：`(context: { status: 'loading' \| 'load-more' }) => void`
异步加载区域被点击时触发 | N -onCellClick | Function | | TS 类型：`(context: PrimaryTableCellEventContext) => void`
单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface PrimaryTableCellEventContext { row: T; col: PrimaryTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N -onChange | Function | | TS 类型：`(data: TableChangeData, context: TableChangeContext) => void`
分页、排序、过滤等内容变化时触发，泛型 T 指表格数据类型，`currentData` 表示变化后的数据。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`

`interface TableChangeContext { trigger: TableChangeTrigger; currentData?: T[] }`

`type TableChangeTrigger = 'filter' \| 'sorter' \| 'pagination'`
| N -onColumnChange | Function | | TS 类型：`(context: PrimaryTableColumnChange) => void`
确认操作之前列配置发生变化时触发。`context.columns` 表示已选中的列；`context.currentColumn` 表示本次变化操作的列，值不存在表示全选操作；`context.type` 表示当前操作属于选中列或是取消列。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' \| 'uncheck'; e?: ChangeEvent }`
| N +onCellClick | Function | | TS 类型：`(context: PrimaryTableCellEventContext) => void`
单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface PrimaryTableCellEventContext { row: T; col: PrimaryTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N +onChange | Function | | TS 类型：`(data: TableChangeData, context: TableChangeContext) => void`
分页、排序、过滤等内容变化时触发，泛型 T 指表格数据类型，`currentData` 表示变化后的数据。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`

`interface TableChangeContext { trigger: TableChangeTrigger; currentData?: T[] }`

`type TableChangeTrigger = 'filter' \| 'sorter' \| 'pagination'`
| N +onColumnChange | Function | | TS 类型：`(context: PrimaryTableColumnChange) => void`
确认操作之前列配置发生变化时触发。`context.columns` 表示已选中的列；`context.currentColumn` 表示本次变化操作的列，值不存在表示全选操作；`context.type` 表示当前操作属于选中列或是取消列。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' \| 'uncheck'; e?: ChangeEvent }`
| N onColumnControllerVisibleChange | Function | | TS 类型：`(visible: boolean, context: { trigger: 'cancel' \| 'confirm' }) => void`
列配置弹窗显示或隐藏变化时触发 | N -onDataChange | Function | | TS 类型：`(data: Array, context: TableDataChangeContext) => void`
本地数据排序导致 `data` 变化时触发，第一个参数指变化后的数据，第二个参数 `context.trigger` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableDataChangeContext { trigger: 'sort' }`
| N -onDisplayColumnsChange | Function | | TS 类型：`(value: CheckboxGroupValue) => void`
确认列配置时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
| N -onDragSort | Function | | TS 类型：`(context: DragSortContext) => void`
拖拽排序时触发，`data` 表示排序前的数据，`newData` 表示拖拽排序结束后的新数据，`sort=row` 表示行拖拽事件触发，`sort=col` 表示列拖拽事件触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T; data: T[]; newData: T[]; currentData?: T[]; e: SortableEvent; sort: 'row' \| 'col' }`

`import { SortableEvent, SortableOptions } from 'sortablejs'`
| N -onExpandChange | Function | | TS 类型：`(expandedRowKeys: Array, options: ExpandOptions) => void`
展开行发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface ExpandOptions { expandedRowData: Array; currentRowData: T }`
| N -onFilterChange | Function | | TS 类型：`(filterValue: FilterValue, context: TableFilterChangeContext) => void`
过滤参数发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableFilterChangeContext { col?: PrimaryTableCol; trigger: 'filter-change' \| 'confirm' \| 'reset' \| 'clear' }`
| N -onRowEdit | Function | | TS 类型：`(context: PrimaryTableRowEditContext) => void`
行编辑时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type PrimaryTableRowEditContext = PrimaryTableCellParams & { value: any; editedRow: T }`
| N -onRowValidate | Function | | TS 类型：`(context: PrimaryTableRowValidateContext) => void`
行编辑校验完成后触发，即组件实例方法 `validateRowData` 执行结束后触发。`result` 表示校验结果，`trigger=self` 表示编辑组件内部触发的校验，`trigger='parent'` 表示表格父组件触发的校验。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type PrimaryTableRowValidateContext = { result: TableRowValidateResult[]; trigger: TableValidateTrigger }`

`type TableValidateTrigger = 'self' \| 'parent'`

`export type TableRowValidateResult = PrimaryTableCellParams & { errorList: AllValidateResult[]; value: any }`
| N -onSelectChange | Function | | TS 类型：`(selectedRowKeys: Array, options: SelectOptions) => void`
选中行发生变化时触发，泛型 T 指表格数据类型。两个参数，第一个参数为选中行 keys，第二个参数为更多参数，具体如下：`type = uncheck` 表示当前行操作为「取消行选中」；`type = check` 表示当前行操作为「行选中」； `currentRowKey` 表示当前操作行的 rowKey 值； `currentRowData` 表示当前操作行的行数据。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface SelectOptions { selectedRowData: Array; type: 'uncheck' \| 'check'; currentRowKey?: string; currentRowData?: T }`
| N -onSortChange | Function | | TS 类型：`(sort: TableSort, options: SortOptions) => void`
排序发生变化时触发。其中 sortBy 表示当前排序的字段，sortType 表示排序的方式，currentDataSource 表示 sorter 排序后的结果，col 表示列配置。sort 值类型为数组时表示多字段排序。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface SortOptions { currentDataSource?: Array; col: PrimaryTableCol }`
| N -onValidate | Function | | TS 类型：`(context: PrimaryTableValidateContext) => void`
可编辑行表格，全部数据校验完成后触发。即组件实例方法 `validateTableData` 执行结束后触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface PrimaryTableValidateContext { result: TableErrorListMap }`

`type TableErrorListMap = { [key: string]: AllValidateResult[] }`
| N +onDataChange | Function | | TS 类型：`(data: Array, context: TableDataChangeContext) => void`
本地数据排序导致 `data` 变化时触发，第一个参数指变化后的数据，第二个参数 `context.trigger` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface TableDataChangeContext { trigger: 'sort' }`
| N +onDisplayColumnsChange | Function | | TS 类型：`(value: CheckboxGroupValue) => void`
确认列配置时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
| N +onDragSort | Function | | TS 类型：`(context: DragSortContext) => void`
拖拽排序时触发，`data` 表示排序前的数据，`newData` 表示拖拽排序结束后的新数据，`sort=row` 表示行拖拽事件触发，`sort=col` 表示列拖拽事件触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T; data: T[]; newData: T[]; currentData?: T[]; e: SortableEvent; sort: 'row' \| 'col' }`

`import { SortableEvent, SortableOptions } from 'sortablejs'`
| N +onExpandChange | Function | | TS 类型：`(expandedRowKeys: Array, options: ExpandOptions) => void`
展开行发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface ExpandOptions { expandedRowData: Array; currentRowData: T }`
| N +onFilterChange | Function | | TS 类型：`(filterValue: FilterValue, context: TableFilterChangeContext) => void`
过滤参数发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface TableFilterChangeContext { col?: PrimaryTableCol; trigger: 'filter-change' \| 'confirm' \| 'reset' \| 'clear' }`
| N +onRowEdit | Function | | TS 类型：`(context: PrimaryTableRowEditContext) => void`
行编辑时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`type PrimaryTableRowEditContext = PrimaryTableCellParams & { value: any; editedRow: T }`
| N +onRowValidate | Function | | TS 类型：`(context: PrimaryTableRowValidateContext) => void`
行编辑校验完成后触发，即组件实例方法 `validateRowData` 执行结束后触发。`result` 表示校验结果，`trigger=self` 表示编辑组件内部触发的校验，`trigger='parent'` 表示表格父组件触发的校验。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`type PrimaryTableRowValidateContext = { result: TableRowValidateResult[]; trigger: TableValidateTrigger }`

`type TableValidateTrigger = 'self' \| 'parent'`

`export type TableRowValidateResult = PrimaryTableCellParams & { errorList: AllValidateResult[]; value: any }`
| N +onSelectChange | Function | | TS 类型：`(selectedRowKeys: Array, options: SelectOptions) => void`
选中行发生变化时触发，泛型 T 指表格数据类型。两个参数，第一个参数为选中行 keys，第二个参数为更多参数，具体如下：`type = uncheck` 表示当前行操作为「取消行选中」；`type = check` 表示当前行操作为「行选中」； `currentRowKey` 表示当前操作行的 rowKey 值； `currentRowData` 表示当前操作行的行数据。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface SelectOptions { selectedRowData: Array; type: 'uncheck' \| 'check'; currentRowKey?: string; currentRowData?: T }`
| N +onSortChange | Function | | TS 类型：`(sort: TableSort, options: SortOptions) => void`
排序发生变化时触发。其中 sortBy 表示当前排序的字段，sortType 表示排序的方式，currentDataSource 表示 sorter 排序后的结果，col 表示列配置。sort 值类型为数组时表示多字段排序。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface SortOptions { currentDataSource?: Array; col: PrimaryTableCol }`
| N +onValidate | Function | | TS 类型：`(context: PrimaryTableValidateContext) => void`
可编辑行表格，全部数据校验完成后触发。即组件实例方法 `validateTableData` 执行结束后触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface PrimaryTableValidateContext { result: TableErrorListMap }`

`type TableErrorListMap = { [key: string]: AllValidateResult[] }`
| N ### PrimaryTableInstanceFunctions 组件实例方法 @@ -155,24 +155,24 @@ onValidate | Function | | TS 类型：`(context: PrimaryTableValidateContext) = -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -validateRowData | `(rowValue: any)` | `Promise<{ trigger: TableValidateTrigger, result: ErrorListObjectType[] }>` | 必需。校验行信息，校验完成后，会触发事件 `onRowValidate`。参数 `rowValue` 表示行唯一标识的值。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type ErrorListObjectType = PrimaryTableRowEditContext & { errorList: AllValidateResult[] }`
+validateRowData | `(rowValue: any)` | `Promise<{ trigger: TableValidateTrigger, result: ErrorListObjectType[] }>` | 必需。校验行信息，校验完成后，会触发事件 `onRowValidate`。参数 `rowValue` 表示行唯一标识的值。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`type ErrorListObjectType = PrimaryTableRowEditContext & { errorList: AllValidateResult[] }`
validateTableData | \- | `Promise<{ result: TableErrorListMap }>` | 必需。校验表格全部数据，校验完成后，会触发事件 `onValidate` ### PrimaryTableCol 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -cell | String / Function | - | 自定义单元格渲染，优先级高于 render。泛型 T 指表格数据类型。TS 类型：`string \| TNode>` `interface PrimaryTableCellParams { row: T; rowIndex: number; col: PrimaryTableCol; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -checkProps | Object / Function | - | 透传参数，`colKey` 值为 `row-select` 时，配置有效。具体定义参考 Checkbox 组件 和 Radio 组件。泛型 T 指表格数据类型。TS 类型：`CheckProps` `type CheckProps = CheckboxProps \| RadioProps \| ((options: { row: T; rowIndex: number }) => CheckboxProps \| RadioProps)` `import { CheckboxProps } from '@Checkbox'`，[Radio API Documents](./radio?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +cell | String / Function | - | 自定义单元格渲染，优先级高于 render。泛型 T 指表格数据类型。TS 类型：`string \| TNode>` `interface PrimaryTableCellParams { row: T; rowIndex: number; col: PrimaryTableCol; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +checkProps | Object / Function | - | 透传参数，`colKey` 值为 `row-select` 时，配置有效。具体定义参考 Checkbox 组件 和 Radio 组件。泛型 T 指表格数据类型。TS 类型：`CheckProps` `type CheckProps = CheckboxProps \| RadioProps \| ((options: { row: T; rowIndex: number }) => CheckboxProps \| RadioProps)` `import { CheckboxProps } from '@Checkbox'`，[Radio API Documents](./radio?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N children | Array | - | 用于多级表头，泛型 T 指表格数据类型。TS 类型：`Array>` | N colKey | String | - | 渲染列所需字段，必须唯一。值为 `row-select` 表示当前列为行选中操作列。值为 `drag` 表示当前列为拖拽排序操作列。值为 `serial-number` 表示当前列为「序号」列 | N disabled | Function | - | 是否禁用行选中，`colKey` 值为 `row-select` 时，配置有效。TS 类型：`(options: {row: T; rowIndex: number }) => boolean` | N edit | Object | - | 可编辑单元格配置项，具体属性参考文档 `TableEditableCellConfig` 描述。TS 类型：`TableEditableCellConfig` | N filter | Object | - | 过滤规则，支持多选(multiple)、单选(single)、输入框(input) 等三种形式。想要自定义过滤组件，可通过 `filter.component` 实现，自定义过滤组件需要包含参数 value 和事件 change。更多信息请查看当前页面中 `TableColumnFilter` 的详细文档。TS 类型：`TableColumnFilter` | N -render | Function | - | 自定义表头或单元格，泛型 T 指表格数据类型。TS 类型：`TNode>` `interface PrimaryTableRenderParams extends PrimaryTableCellParams { type: RenderType }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -sortType | String | all | 当前列支持排序的方式，desc 表示当前列只能进行降序排列；asc 表示当前列只能进行升序排列；all 表示当前列既可升序排列，又可以降序排列。可选项：desc/asc/all。TS 类型：`SortType` `type SortType = 'desc' \| 'asc' \| 'all'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -sorter | Boolean / Function | false | 该列是否支持排序。值为 true 表示该列支持排序；值类型为函数，表示对本地数据 `data` 进行排序，返回值参考 [MDN Array.sort](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)。泛型 T 指表格数据类型。TS 类型：`boolean \| SorterFun` `type SorterFun = (a: T, b: T) => number`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -title | String / Function | - | 自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染，插槽名称为 title 的值。优先级高于 render。TS 类型：`string \| TNode<{ col: PrimaryTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +render | Function | - | 自定义表头或单元格，泛型 T 指表格数据类型。TS 类型：`TNode>` `interface PrimaryTableRenderParams extends PrimaryTableCellParams { type: RenderType }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +sortType | String | all | 当前列支持排序的方式，desc 表示当前列只能进行降序排列；asc 表示当前列只能进行升序排列；all 表示当前列既可升序排列，又可以降序排列。可选项：desc/asc/all。TS 类型：`SortType` `type SortType = 'desc' \| 'asc' \| 'all'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +sorter | Boolean / Function | false | 该列是否支持排序。值为 true 表示该列支持排序；值类型为函数，表示对本地数据 `data` 进行排序，返回值参考 [MDN Array.sort](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)。泛型 T 指表格数据类型。TS 类型：`boolean \| SorterFun` `type SorterFun = (a: T, b: T) => number`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +title | String / Function | - | 自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染，插槽名称为 title 的值。优先级高于 render。TS 类型：`string \| TNode<{ col: PrimaryTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N type | String | single | `colKey` 值为 `row-select` 时表示行选中列，有两种模式：单选和多选。 `type=single` 表示单选，`type=multiple` 表示多选。可选项：single/multiple | N `Omit` | \- | - | 继承 `Omit` 中的全部属性 | N @@ -186,11 +186,11 @@ beforeDragSort | Function | - | 树形结构中，拖拽排序前控制，返回 expandedTreeNodes | Array | [] | 展开的树形节点。非必须。在需要自由控制展开的树形节点时使用。其他场景无需设置，表格组件有内置展开逻辑。TS 类型：`Array` | N defaultExpandedTreeNodes | Array | [] | 展开的树形节点。非必须。在需要自由控制展开的树形节点时使用。其他场景无需设置，表格组件有内置展开逻辑。非受控属性。TS 类型：`Array` | N tree | Object | - | 树形结构相关配置。具体属性文档查看 `TableTreeConfig` 相关描述。TS 类型：`TableTreeConfig` | N -treeExpandAndFoldIcon | Function | - | 自定义树形结构展开图标，支持全局配置 `GlobalConfigProvider`。TS 类型：`TNode<{ type: 'expand' \| 'fold' }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +treeExpandAndFoldIcon | Function | - | 自定义树形结构展开图标，支持全局配置 `GlobalConfigProvider`。TS 类型：`TNode<{ type: 'expand' \| 'fold' }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N `PrimaryTableProps` | \- | - | 继承 `PrimaryTableProps` 中的全部属性 | N -onAbnormalDragSort | Function | | TS 类型：`(context: TableAbnormalDragSortContext) => void`
异常拖拽排序时触发，如：树形结构中，非同层级之间的交换。`context.code` 指交换异常错误码，固定值；`context.reason` 指交换异常的原因。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableAbnormalDragSortContext { code: number; reason: string }`
| N -onExpandedTreeNodesChange | Function | | TS 类型：`(expandedTreeNodes: Array, options: TableTreeNodeExpandOptions ) => void`
树形结构，展开的树节点发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableTreeNodeExpandOptions { row: T; rowIndex: number; rowState: TableRowState; type: 'fold' \| 'expand'; trigger?: 'expand-fold-icon' \| 'row-click' \| 'default-expand-all' \| 'expand-all' \| 'fold-all' }`
| N -onTreeExpandChange | Function | | TS 类型：`(context: TableTreeExpandChangeContext) => void`
已废弃。树形结构，用户操作引起节点展开或收起时触发。请更为使用 `onExpandedTreeNodesChange`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableTreeExpandChangeContext { row: T; rowIndex: number; rowState: TableRowState; trigger?: 'expand-fold-icon' \| 'row-click' }`
| N +onAbnormalDragSort | Function | | TS 类型：`(context: TableAbnormalDragSortContext) => void`
异常拖拽排序时触发，如：树形结构中，非同层级之间的交换。`context.code` 指交换异常错误码，固定值；`context.reason` 指交换异常的原因。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface TableAbnormalDragSortContext { code: number; reason: string }`
| N +onExpandedTreeNodesChange | Function | | TS 类型：`(expandedTreeNodes: Array, options: TableTreeNodeExpandOptions ) => void`
树形结构，展开的树节点发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface TableTreeNodeExpandOptions { row: T; rowIndex: number; rowState: TableRowState; type: 'fold' \| 'expand'; trigger?: 'expand-fold-icon' \| 'row-click' \| 'default-expand-all' \| 'expand-all' \| 'fold-all' }`
| N +onTreeExpandChange | Function | | TS 类型：`(context: TableTreeExpandChangeContext) => void`
已废弃。树形结构，用户操作引起节点展开或收起时触发。请更为使用 `onExpandedTreeNodesChange`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface TableTreeExpandChangeContext { row: T; rowIndex: number; rowState: TableRowState; trigger?: 'expand-fold-icon' \| 'row-click' }`
| N ### EnhancedTableInstanceFunctions 组件实例方法 @@ -201,7 +201,7 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N appendTo | `(key: TableRowValue, newData: T)` | \- | 必需。树形结构中，为当前节点添加子节点。如果 `key` 为空，则表示为根节点添加子节点 expandAll | \- | \- | 必需。展开全部行 foldAll | \- | \- | 必需。折叠全部行 -getData | `(key: TableRowValue)` | `TableRowState` | 必需。树形结构中，用于获取行数据所有信息。泛型 `T` 表示行数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type TableRowValue = string \| number`
+getData | `(key: TableRowValue)` | `TableRowState` | 必需。树形结构中，用于获取行数据所有信息。泛型 `T` 表示行数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`type TableRowValue = string \| number`
getTreeExpandedRow | `(type: 'unique' \| 'data' \| 'all')` | \- | 必需。获取展开的树形节点。`type=unique` 标识获取展开节点的行唯一标识值，`type=data` 表示获取展开节点的数据，`type=all` 表示获取行节点包含展开状态的全部数据 getTreeNode | \- | `T[]` | 必需。树形结构中，获取完整的树形结构 insertAfter | `(key: TableRowValue, newData: T)` | \- | 必需。树形结构中，在当前节点之后添加子节点 @@ -210,7 +210,7 @@ remove | `(key: TableRowValue)` | \- | 必需。树形结构中，移除指定 removeChildren | `(key: TableRowValue)` | \- | 必需。树形结构中，移除指定节点的所有子节点 resetData | `(newData: T[])` | \- | 必需。重置或更新整个表格数据 setData | `(key: TableRowValue, newRowData: T)` | \- | 必需。树形结构中，用于更新行数据。泛型 `T` 表示行数据类型 -swapData | `(params: SwapParams)` | \- | 必需。树形结构中，交换两个节点的顺序。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface SwapParams { current: T; target: T; currentIndex: number; targetIndex: number }`
+swapData | `(params: SwapParams)` | \- | 必需。树形结构中，交换两个节点的顺序。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts)。
`interface SwapParams { current: T; target: T; currentIndex: number; targetIndex: number }`
toggleExpandData | `(p: { row: T, rowIndex: number})` | \- | 必需。展开或收起树形行 ### TableRowState @@ -231,25 +231,25 @@ rowIndex | Number | - | 必需。表格行下标，值为 `-1` 标识当前行 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -attrs | Object | - | 用于透传筛选器属性到自定义组件 `component`，HTML 原生属性。TS 类型：`HTMLElementAttributes`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -classNames | String | - | 透传类名到自定义组件 `component`。TS 类型：`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -component | TElement | - | 用于自定义筛选器，只要保证自定义筛选器包含 value 属性 和 change 事件，即可像内置筛选器一样正常使用。示例：`component: DatePicker`。TS 类型：`ComponentType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +attrs | Object | - | 用于透传筛选器属性到自定义组件 `component`，HTML 原生属性。TS 类型：`HTMLElementAttributes`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +classNames | String | - | 透传类名到自定义组件 `component`。TS 类型：`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +component | TElement | - | 用于自定义筛选器，只要保证自定义筛选器包含 value 属性 和 change 事件，即可像内置筛选器一样正常使用。示例：`component: DatePicker`。TS 类型：`ComponentType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N confirmEvents | Array | - | 哪些事件触发后会进行过滤搜索（确认按钮无需配置，会默认触发搜索）。输入框组件示例：`confirmEvents: ['onEnter']`。TS 类型：`string[]` | N -list | Array | - | 用于配置当前筛选器可选值有哪些，仅当 `filter.type` 等于 `single` 或 `multiple` 时有效。TS 类型：`Array`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -popupProps | Object | - | 透传 Popup 组件全部属性到筛选器浮层。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -props | Object | - | 用于透传筛选器属性到自定义组件 `component`，可以对筛选器进行任何原组件支持的属性配置。TS 类型：`FilterProps` `type FilterProps = RadioProps \| CheckboxProps \| InputProps \| { [key: string]: any }`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +list | Array | - | 用于配置当前筛选器可选值有哪些，仅当 `filter.type` 等于 `single` 或 `multiple` 时有效。TS 类型：`Array`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +popupProps | Object | - | 透传 Popup 组件全部属性到筛选器浮层。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +props | Object | - | 用于透传筛选器属性到自定义组件 `component`，可以对筛选器进行任何原组件支持的属性配置。TS 类型：`FilterProps` `type FilterProps = RadioProps \| CheckboxProps \| InputProps \| { [key: string]: any }`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N resetValue | \- | - | 重置时设置的值，示例：'' 或 []。TS 类型：`any` | N showConfirmAndReset | Boolean | false | 是否显示重置和确认。值为真，过滤事件（filter-change）会在确定时触发；值为假，则数据变化时会立即触发过滤事件 | N -style | Object | - | 透传内联样式到自定义组件 `component`。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -type | String | - | 用于设置筛选器类型：单选按钮筛选器、复选框筛选器、输入框筛选器。更多复杂组件，请更为使用 `component` 自定义任意组件。TS 类型：`FilterType` `type FilterType = 'input' \| 'single' \| 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +style | Object | - | 透传内联样式到自定义组件 `component`。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +type | String | - | 用于设置筛选器类型：单选按钮筛选器、复选框筛选器、输入框筛选器。更多复杂组件，请更为使用 `component` 自定义任意组件。TS 类型：`FilterType` `type FilterType = 'input' \| 'single' \| 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N ### TableColumnController 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -buttonProps | Object | - | 自定义列配置按钮，包括 Button 组件的全部属性。比如：按钮颜色和文本。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -checkboxProps | Object | - | 透传复选框组件全部特性。TS 类型：`CheckboxGroupProps`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -dialogProps | Object | - | 透传弹框组件全部特性，如：防止滚动穿透。TS 类型：`DialogProps`，[Dialog API Documents](./dialog?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +buttonProps | Object | - | 自定义列配置按钮，包括 Button 组件的全部属性。比如：按钮颜色和文本。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +checkboxProps | Object | - | 透传复选框组件全部特性。TS 类型：`CheckboxGroupProps`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +dialogProps | Object | - | 透传弹框组件全部特性，如：防止滚动穿透。TS 类型：`DialogProps`，[Dialog API Documents](./dialog?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N displayType | String | auto-width | 指列配置弹框中，各列的字段平铺方式：`fixed-width` 表示固定宽度，每行固定数量，横向和纵向均对齐，`auto-width` 表示宽度随列标题数量自由显示，横向铺满，纵向不要求对齐。可选项：fixed-width/auto-width | N fields | Array | - | 用于设置允许用户对哪些列进行显示或隐藏的控制，默认为全部字段。TS 类型：`string[]` | N hideTriggerButton | Boolean | false | 是否隐藏表格组件内置的“列配置”按钮 | N @@ -260,13 +260,13 @@ placement | String | top-right | 列配置按钮基于表格的放置位置： 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- abortEditOnEvent | Array | - | 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态。示例：`abortEditOnEvent: ['onChange']`。TS 类型：`string[]` | N -component | \- | - | 组件定义，如：`Input` `Select`。对于完全自定义的组件（非组件库内的组件），组件需要支持 `value` 和 `onChange` ；如果还需要支持校验规则，则组件还需实现 `tips` 和 `status` 两个 API，实现规则可参考 `Input` 组件。TS 类型：`ComponentType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +component | \- | - | 组件定义，如：`Input` `Select`。对于完全自定义的组件（非组件库内的组件），组件需要支持 `value` 和 `onChange` ；如果还需要支持校验规则，则组件还需实现 `tips` 和 `status` 两个 API，实现规则可参考 `Input` 组件。TS 类型：`ComponentType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N defaultEditable | Boolean | false | 单元格默认状态是否为编辑态 | N keepEditMode | Boolean | false | 设置当前列的单元格始终保持为编辑态 | N on | Function | - | 透传给编辑组件的事件。TS 类型：`(context: TableEditableCellPropsParams) => { [eventName: string]: Function }` | N -onEdited | Function | - | 编辑完成后，退出编辑模式时触发。TS 类型：`(context: PrimaryTableOnEditedContext) => void` `type PrimaryTableOnEditedContext = PrimaryTableCellParams & { trigger: string; newRowData: T; }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -props | Object | - | 透传给组件 `edit.component` 的属性。TS 类型：`TableEditableCellProps` `type TableEditableCellProps = TablePlainObject \| ((params: TableEditableCellPropsParams) => TablePlainObject)` `interface TableEditableCellPropsParams extends PrimaryTableCellParams { editedRow: T; updateEditedCellValue: (val: any) => void }` `interface TablePlainObject{ [key: string]: any }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -rules | Array | - | 校验规则。TS 类型：`TableEditableCellRules` `type TableEditableCellRules = FormRule[] \| ((params: PrimaryTableCellParams) => FormRule[])`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +onEdited | Function | - | 编辑完成后，退出编辑模式时触发。TS 类型：`(context: PrimaryTableOnEditedContext) => void` `type PrimaryTableOnEditedContext = PrimaryTableCellParams & { trigger: string; newRowData: T; }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +props | Object | - | 透传给组件 `edit.component` 的属性。TS 类型：`TableEditableCellProps` `type TableEditableCellProps = TablePlainObject \| ((params: TableEditableCellPropsParams) => TablePlainObject)` `interface TableEditableCellPropsParams extends PrimaryTableCellParams { editedRow: T; updateEditedCellValue: (val: any) => void }` `interface TablePlainObject{ [key: string]: any }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N +rules | Array | - | 校验规则。TS 类型：`TableEditableCellRules` `type TableEditableCellRules = FormRule[] \| ((params: PrimaryTableCellParams) => FormRule[])`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/table/type.ts) | N showEditIcon | Boolean | true | 是否显示编辑图标 | N validateTrigger | String | 'exit' | 触发校验的时机，有 2 种：退出编辑时和数据变化时。TS 类型：`'exit' \| 'change'` | N diff --git a/packages/components/tabs/tabs.en-US.md b/packages/components/tabs/tabs.en-US.md index 47d8e7222c..1e36fedc0a 100644 --- a/packages/components/tabs/tabs.en-US.md +++ b/packages/components/tabs/tabs.en-US.md @@ -8,7 +8,7 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N -action | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +action | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N addable | Boolean | false | \- | N disabled | Boolean | false | \- | N dragSort | Boolean | false | \- | N @@ -17,11 +17,11 @@ placement | String | top | options: left/top/bottom/right | N scrollPosition | String | auto | The final position where the tab item stops scrolling after being selected.。options: auto/start/center/end | N size | String | medium | options: medium/large | N theme | String | normal | options: normal/card | N -value | String / Number | - | Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tabs/type.ts) | N -defaultValue | String / Number | - | uncontrolled property。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tabs/type.ts) | N +value | String / Number | - | Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tabs/type.ts) | N +defaultValue | String / Number | - | uncontrolled property。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tabs/type.ts) | N onAdd | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onChange | Function | | Typescript：`(value: TabValue) => void`
| N -onDragSort | Function | | Typescript：`(context: TabsDragSortContext) => void`
trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tabs/type.ts)。
`interface TabsDragSortContext { currentIndex: number; current: TabValue; targetIndex: number; target: TabValue }`
| N +onDragSort | Function | | Typescript：`(context: TabsDragSortContext) => void`
trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tabs/type.ts)。
`interface TabsDragSortContext { currentIndex: number; current: TabValue; targetIndex: number; target: TabValue }`
| N onRemove | Function | | Typescript：`(options: { value: TabValue; index: number; e: MouseEvent }) => void`
| N @@ -34,9 +34,9 @@ style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProper destroyOnHide | Boolean | true | \- | N disabled | Boolean | false | \- | N draggable | Boolean | true | \- | N -label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N lazy | Boolean | false | Enable tab lazy loading | N -panel | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +panel | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N removable | Boolean | false | \- | N value | String / Number | - | Typescript：`TabValue` | N onRemove | Function | | Typescript：`(options: { value: TabValue; e: MouseEvent }) => void`
| N diff --git a/packages/components/tabs/tabs.md b/packages/components/tabs/tabs.md index 3c7df1ce8f..3108eaad0f 100644 --- a/packages/components/tabs/tabs.md +++ b/packages/components/tabs/tabs.md @@ -8,7 +8,7 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -action | TNode | - | 选项卡右侧的操作区域。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +action | TNode | - | 选项卡右侧的操作区域。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N addable | Boolean | false | 选项卡是否可增加 | N disabled | Boolean | false | 是否禁用选项卡 | N dragSort | Boolean | false | 是否开启拖拽调整顺序 | N @@ -17,11 +17,11 @@ placement | String | top | 选项卡位置。可选项：left/top/bottom/right | scrollPosition | String | auto | Tab较多的时候，选中滑块滚动最终停留的位置。可选项：auto/start/center/end | N size | String | medium | 组件尺寸。可选项：medium/large | N theme | String | normal | 选项卡风格，包含 默认风格 和 卡片风格两种。可选项：normal/card | N -value | String / Number | - | 激活的选项卡值。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tabs/type.ts) | N -defaultValue | String / Number | - | 激活的选项卡值。非受控属性。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tabs/type.ts) | N +value | String / Number | - | 激活的选项卡值。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tabs/type.ts) | N +defaultValue | String / Number | - | 激活的选项卡值。非受控属性。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tabs/type.ts) | N onAdd | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
添加选项卡时触发 | N onChange | Function | | TS 类型：`(value: TabValue) => void`
激活的选项卡发生变化时触发 | N -onDragSort | Function | | TS 类型：`(context: TabsDragSortContext) => void`
拖拽排序时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tabs/type.ts)。
`interface TabsDragSortContext { currentIndex: number; current: TabValue; targetIndex: number; target: TabValue }`
| N +onDragSort | Function | | TS 类型：`(context: TabsDragSortContext) => void`
拖拽排序时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tabs/type.ts)。
`interface TabsDragSortContext { currentIndex: number; current: TabValue; targetIndex: number; target: TabValue }`
| N onRemove | Function | | TS 类型：`(options: { value: TabValue; index: number; e: MouseEvent }) => void`
删除选项卡时触发 | N @@ -34,9 +34,9 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N destroyOnHide | Boolean | true | 选项卡内容隐藏时是否销毁 | N disabled | Boolean | false | 是否禁用当前选项卡 | N draggable | Boolean | true | 选项卡组件开启允许拖动排序时，当前选项卡是否允许拖动 | N -label | TNode | - | 选项卡名称，可自定义选项卡导航内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | - | 选项卡名称，可自定义选项卡导航内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N lazy | Boolean | false | 是否启用选项卡懒加载 | N -panel | TNode | - | 用于自定义选项卡面板内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +panel | TNode | - | 用于自定义选项卡面板内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N removable | Boolean | false | 当前选项卡是否允许移除 | N value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue` | N onRemove | Function | | TS 类型：`(options: { value: TabValue; e: MouseEvent }) => void`
点击删除按钮时触发 | N diff --git a/packages/components/tag-input/tag-input.en-US.md b/packages/components/tag-input/tag-input.en-US.md index 26958271b7..2610ca6507 100644 --- a/packages/components/tag-input/tag-input.en-US.md +++ b/packages/components/tag-input/tag-input.en-US.md @@ -11,39 +11,39 @@ style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProper autoWidth | Boolean | false | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N -collapsedItems | TElement | - | Typescript：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +collapsedItems | TElement | - | Typescript：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | - | \- | N dragSort | Boolean | false | \- | N excessTagsDisplayType | String | break-line | options: scroll/break-line | N -inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N +inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N inputValue | String / Number | '' | input value。Typescript：`string` | N defaultInputValue | String / Number | '' | input value。uncontrolled property。Typescript：`string` | N -label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N max | Number | - | max tag number | N maxRows | Number | - | max tag rows | N minCollapsedNum | Number | 0 | \- | N placeholder | String | undefined | placeholder description | N -prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N readonly | Boolean | false | \- | N -size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | - | options: default/success/warning/error | N -suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -tag | TNode | - | Typescript：`string \| TNode<{ value: string \| number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -tagProps | Object | - | Typescript：`TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N -tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -value | Array | [] | value。Typescript：`TagInputValue` `type TagInputValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N -defaultValue | Array | [] | value。uncontrolled property。Typescript：`TagInputValue` `type TagInputValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N -valueDisplay | TNode | - | Typescript：`string \| TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +tag | TNode | - | Typescript：`string \| TNode<{ value: string \| number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +tagProps | Object | - | Typescript：`TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N +tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +value | Array | [] | value。Typescript：`TagInputValue` `type TagInputValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N +defaultValue | Array | [] | value。uncontrolled property。Typescript：`TagInputValue` `type TagInputValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N +valueDisplay | TNode | - | Typescript：`string \| TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N onBlur | Function | | Typescript：`(value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void`
trigger on blur | N -onChange | Function | | Typescript：`(value: TagInputValue, context: TagInputChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts)。
`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string \| number; e?: MouseEvent \| KeyboardEvent }`

`type TagInputTriggerSource = 'enter' \| 'tag-remove' \| 'backspace' \| 'clear'`
| N +onChange | Function | | Typescript：`(value: TagInputValue, context: TagInputChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts)。
`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string \| number; e?: MouseEvent \| KeyboardEvent }`

`type TagInputTriggerSource = 'enter' \| 'tag-remove' \| 'backspace' \| 'clear'`
| N onClear | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N -onDragSort | Function | | Typescript：`(context: TagInputDragSortContext) => void`
trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts)。
`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string \| number; targetIndex: number; target: string \| number }`
| N +onDragSort | Function | | Typescript：`(context: TagInputDragSortContext) => void`
trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts)。
`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string \| number; targetIndex: number; target: string \| number }`
| N onEnter | Function | | Typescript：`(value: TagInputValue, context: { e: KeyboardEvent; inputValue: string }) => void`
| N onFocus | Function | | Typescript：`(value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void`
trigger on focus | N -onInputChange | Function | | Typescript：`(value: string, context?: InputValueChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts)。
`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur' }`
| N +onInputChange | Function | | Typescript：`(value: string, context?: InputValueChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts)。
`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur' }`
| N onMouseenter | Function | | Typescript：`(context: { e: MouseEvent }) => void`
trigger on mouseenter | N onMouseleave | Function | | Typescript：`(context: { e: MouseEvent }) => void`
trigger on mouseleave | N onPaste | Function | | Typescript：`(context: { e: ClipboardEvent; pasteValue: string }) => void`
| N -onRemove | Function | | Typescript：`(context: TagInputRemoveContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts)。
`interface TagInputRemoveContext { value: TagInputValue; index: number; item: string \| number; e?: MouseEvent \| KeyboardEvent; trigger: TagInputRemoveTrigger }`

`type TagInputRemoveTrigger = 'tag-remove' \| 'backspace'`
| N +onRemove | Function | | Typescript：`(context: TagInputRemoveContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts)。
`interface TagInputRemoveContext { value: TagInputValue; index: number; item: string \| number; e?: MouseEvent \| KeyboardEvent; trigger: TagInputRemoveTrigger }`

`type TagInputRemoveTrigger = 'tag-remove' \| 'backspace'`
| N diff --git a/packages/components/tag-input/tag-input.md b/packages/components/tag-input/tag-input.md index 21d14b4934..953bb01955 100644 --- a/packages/components/tag-input/tag-input.md +++ b/packages/components/tag-input/tag-input.md @@ -11,39 +11,39 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N autoWidth | Boolean | false | 宽度随内容自适应 | N borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否可清空 | N -collapsedItems | TElement | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +collapsedItems | TElement | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | - | 是否禁用标签输入框 | N dragSort | Boolean | false | 拖拽调整标签顺序 | N excessTagsDisplayType | String | break-line | 标签超出时的呈现方式，有两种：横向滚动显示 和 换行显示。可选项：scroll/break-line | N -inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N +inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N inputValue | String / Number | '' | 输入框的值。TS 类型：`string` | N defaultInputValue | String / Number | '' | 输入框的值。非受控属性。TS 类型：`string` | N -label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N max | Number | - | 最大允许输入的标签数量 | N maxRows | Number | - | 最大允许显示的行数，超出会出现滚动条，默认为不限制。 | N minCollapsedNum | Number | 0 | 最小折叠数量，用于标签数量过多的情况下折叠选中项，超出该数值的选中项折叠。值为 0 则表示不折叠 | N placeholder | String | undefined | 占位符 | N -prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N readonly | Boolean | false | 只读状态，值为真会隐藏标签移除按钮和输入框 | N -size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | - | 输入框状态。可选项：default/success/warning/error | N -suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -tag | TNode | - | 自定义标签的内部内容，每一个标签的当前值。注意和 `valueDisplay` 区分，`valueDisplay` 是用来定义全部标签内容，而非某一个标签。TS 类型：`string \| TNode<{ value: string \| number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -tagProps | Object | - | 透传 Tag 组件全部属性。TS 类型：`TagProps`，[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N -tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -value | Array | [] | 值。TS 类型：`TagInputValue` `type TagInputValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N -defaultValue | Array | [] | 值。非受控属性。TS 类型：`TagInputValue` `type TagInputValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N -valueDisplay | TNode | - | 自定义值呈现的全部内容，参数为所有标签的值。TS 类型：`string \| TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +tag | TNode | - | 自定义标签的内部内容，每一个标签的当前值。注意和 `valueDisplay` 区分，`valueDisplay` 是用来定义全部标签内容，而非某一个标签。TS 类型：`string \| TNode<{ value: string \| number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +tagProps | Object | - | 透传 Tag 组件全部属性。TS 类型：`TagProps`，[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N +tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +value | Array | [] | 值。TS 类型：`TagInputValue` `type TagInputValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N +defaultValue | Array | [] | 值。非受控属性。TS 类型：`TagInputValue` `type TagInputValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts) | N +valueDisplay | TNode | - | 自定义值呈现的全部内容，参数为所有标签的值。TS 类型：`string \| TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N onBlur | Function | | TS 类型：`(value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void`
失去焦点时触发 | N -onChange | Function | | TS 类型：`(value: TagInputValue, context: TagInputChangeContext) => void`
值变化时触发，参数 `context.trigger` 表示数据变化的触发来源；`context.index` 指当前变化项的下标；`context.item` 指当前变化项；`context.e` 表示事件参数。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts)。
`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string \| number; e?: MouseEvent \| KeyboardEvent }`

`type TagInputTriggerSource = 'enter' \| 'tag-remove' \| 'backspace' \| 'clear'`
| N +onChange | Function | | TS 类型：`(value: TagInputValue, context: TagInputChangeContext) => void`
值变化时触发，参数 `context.trigger` 表示数据变化的触发来源；`context.index` 指当前变化项的下标；`context.item` 指当前变化项；`context.e` 表示事件参数。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts)。
`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string \| number; e?: MouseEvent \| KeyboardEvent }`

`type TagInputTriggerSource = 'enter' \| 'tag-remove' \| 'backspace' \| 'clear'`
| N onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
清空按钮点击时触发 | N onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击组件时触发 | N -onDragSort | Function | | TS 类型：`(context: TagInputDragSortContext) => void`
【开发中】拖拽排序时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts)。
`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string \| number; targetIndex: number; target: string \| number }`
| N +onDragSort | Function | | TS 类型：`(context: TagInputDragSortContext) => void`
【开发中】拖拽排序时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts)。
`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string \| number; targetIndex: number; target: string \| number }`
| N onEnter | Function | | TS 类型：`(value: TagInputValue, context: { e: KeyboardEvent; inputValue: string }) => void`
按键按下 Enter 时触发 | N onFocus | Function | | TS 类型：`(value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void`
聚焦时触发 | N -onInputChange | Function | | TS 类型：`(value: string, context?: InputValueChangeContext) => void`
输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、回车键触发等。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts)。
`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur' }`
| N +onInputChange | Function | | TS 类型：`(value: string, context?: InputValueChangeContext) => void`
输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、回车键触发等。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts)。
`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur' }`
| N onMouseenter | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
进入输入框时触发 | N onMouseleave | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
离开输入框时触发 | N onPaste | Function | | TS 类型：`(context: { e: ClipboardEvent; pasteValue: string }) => void`
粘贴事件，`pasteValue` 表示粘贴板的内容 | N -onRemove | Function | | TS 类型：`(context: TagInputRemoveContext) => void`
移除单个标签时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts)。
`interface TagInputRemoveContext { value: TagInputValue; index: number; item: string \| number; e?: MouseEvent \| KeyboardEvent; trigger: TagInputRemoveTrigger }`

`type TagInputRemoveTrigger = 'tag-remove' \| 'backspace'`
| N +onRemove | Function | | TS 类型：`(context: TagInputRemoveContext) => void`
移除单个标签时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag-input/type.ts)。
`interface TagInputRemoveContext { value: TagInputValue; index: number; item: string \| number; e?: MouseEvent \| KeyboardEvent; trigger: TagInputRemoveTrigger }`

`type TagInputRemoveTrigger = 'tag-remove' \| 'backspace'`
| N diff --git a/packages/components/tag/tag.en-US.md b/packages/components/tag/tag.en-US.md index 53a5d375da..29fac5e844 100644 --- a/packages/components/tag/tag.en-US.md +++ b/packages/components/tag/tag.en-US.md @@ -8,15 +8,15 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N -children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N closable | Boolean | false | \- | N color | String | - | self-defined tag color | N -content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | false | \- | N -icon | TElement | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TElement | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N maxWidth | String / Number | - | \- | N shape | String | square | options: square/round/mark | N -size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N theme | String | default | options: default/primary/warning/danger/success | N title | String | - | title of tag | N variant | String | dark | options: dark/light/outline/light-outline | N @@ -33,13 +33,13 @@ style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProper checked | Boolean | - | \- | N defaultChecked | Boolean | - | uncontrolled property | N checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N -children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | Typescript：`string \| number \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | Typescript：`string \| number \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | false | \- | N -size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N uncheckedProps | Object | - | used to set unchecked tag props。Typescript：`TdTagProps` | N value | String / Number | - | tag unique key | N -onChange | Function | | Typescript：`(checked: boolean, context: CheckTagChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N +onChange | Function | | Typescript：`(checked: boolean, context: CheckTagChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N @@ -51,8 +51,8 @@ className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N multiple | Boolean | false | allow to select multiple tags | N -options | Array | - | tag list。Typescript：`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N +options | Array | - | tag list。Typescript：`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag/type.ts) | N uncheckedProps | Object | - | used to set unchecked tag props。Typescript：`TdTagProps` | N -value | Array | [] | selected tag value list。Typescript：`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N -defaultValue | Array | [] | selected tag value list。uncontrolled property。Typescript：`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N -onChange | Function | | Typescript：`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。
`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N +value | Array | [] | selected tag value list。Typescript：`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag/type.ts) | N +defaultValue | Array | [] | selected tag value list。uncontrolled property。Typescript：`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag/type.ts) | N +onChange | Function | | Typescript：`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag/type.ts)。
`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N diff --git a/packages/components/tag/tag.md b/packages/components/tag/tag.md index 4d99e4d943..32265e1275 100644 --- a/packages/components/tag/tag.md +++ b/packages/components/tag/tag.md @@ -8,15 +8,15 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -children | TNode | - | 组件子元素，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 组件子元素，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N closable | Boolean | false | 标签是否可关闭 | N color | String | - | 自定义标签颜色 | N -content | TNode | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +content | TNode | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N -icon | TElement | undefined | 标签中的图标，可自定义图标呈现。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TElement | undefined | 标签中的图标，可自定义图标呈现。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N maxWidth | String / Number | - | 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80 | N shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N -size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N theme | String | default | 组件风格，用于描述组件不同的应用场景。可选项：default/primary/warning/danger/success | N title | String | - | 标签标题，在标签hover时展示，默认为标签内容 | N variant | String | dark | 标签风格变体。可选项：dark/light/outline/light-outline | N @@ -33,13 +33,13 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N checked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态 | N defaultChecked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N checkedProps | Object | - | 透传标签选中态属性。TS 类型：`TdTagProps` | N -children | TNode | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N -size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N uncheckedProps | Object | - | 透传标签未选态属性。TS 类型：`TdTagProps` | N value | String / Number | - | 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置 | N -onChange | Function | | TS 类型：`(checked: boolean, context: CheckTagChangeContext) => void`
状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N +onChange | Function | | TS 类型：`(checked: boolean, context: CheckTagChangeContext) => void`
状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击标签时触发 | N @@ -51,8 +51,8 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N checkedProps | Object | - | 透传标签选中态属性。TS 类型：`TdTagProps` | N multiple | Boolean | false | 是否支持选中多个标签 | N -options | Array | - | 标签选项列表。TS 类型：`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N +options | Array | - | 标签选项列表。TS 类型：`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag/type.ts) | N uncheckedProps | Object | - | 透传标签未选态属性。TS 类型：`TdTagProps` | N -value | Array | [] | 选中标签值。TS 类型：`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N -defaultValue | Array | [] | 选中标签值。非受控属性。TS 类型：`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N -onChange | Function | | TS 类型：`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`
[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。
`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N +value | Array | [] | 选中标签值。TS 类型：`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag/type.ts) | N +defaultValue | Array | [] | 选中标签值。非受控属性。TS 类型：`CheckTagGroupValue` `type CheckTagGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag/type.ts) | N +onChange | Function | | TS 类型：`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`
[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tag/type.ts)。
`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N diff --git a/packages/components/textarea/textarea.en-US.md b/packages/components/textarea/textarea.en-US.md index 12c03169ba..afcc90dbfd 100644 --- a/packages/components/textarea/textarea.en-US.md +++ b/packages/components/textarea/textarea.en-US.md @@ -11,16 +11,16 @@ allowInputOverMax | Boolean | false | \- | N autofocus | Boolean | false | \- | N autosize | Boolean / Object | false | Typescript：`boolean \| { minRows?: number; maxRows?: number }` | N disabled | Boolean | false | \- | N -label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N maxcharacter | Number | - | \- | N maxlength | Number | - | \- | N name | String | - | \- | N placeholder | String | undefined | \- | N readonly | Boolean | false | \- | N status | String | - | options：default/success/warning/error | N -tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -value | String / Number | - | Typescript：`TextareaValue` `type TextareaValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/textarea/type.ts) | N -defaultValue | String / Number | - | uncontrolled property。Typescript：`TextareaValue` `type TextareaValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/textarea/type.ts) | N +tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +value | String / Number | - | Typescript：`TextareaValue` `type TextareaValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/textarea/type.ts) | N +defaultValue | String / Number | - | uncontrolled property。Typescript：`TextareaValue` `type TextareaValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/textarea/type.ts) | N onBlur | Function | | Typescript：`(value: TextareaValue, context: { e: FocusEvent }) => void`
| N onChange | Function | | Typescript：`(value: TextareaValue, context?: { e?: InputEvent }) => void`
| N onFocus | Function | | Typescript：`(value: TextareaValue, context : { e: FocusEvent }) => void`
| N diff --git a/packages/components/textarea/textarea.md b/packages/components/textarea/textarea.md index 3e208c1963..fa69ce30ec 100644 --- a/packages/components/textarea/textarea.md +++ b/packages/components/textarea/textarea.md @@ -11,16 +11,16 @@ allowInputOverMax | Boolean | false | 超出maxlength或maxcharacter之后是否 autofocus | Boolean | false | 自动聚焦，拉起键盘 | N autosize | Boolean / Object | false | 高度自动撑开。 autosize = true 表示组件高度自动撑开，同时，依旧允许手动拖高度。如果设置了 autosize.maxRows 或者 autosize.minRows 则不允许手动调整高度。TS 类型：`boolean \| { minRows?: number; maxRows?: number }` | N disabled | Boolean | false | 是否禁用文本框 | N -label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N maxlength | Number | - | 用户最多可以输入的字符个数 | N name | String | - | 名称，HTML 元素原生属性 | N placeholder | String | undefined | 占位符 | N readonly | Boolean | false | 只读状态 | N status | String | - | 文本框状态。可选项：default/success/warning/error | N -tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -value | String / Number | - | 文本框值。TS 类型：`TextareaValue` `type TextareaValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/textarea/type.ts) | N -defaultValue | String / Number | - | 文本框值。非受控属性。TS 类型：`TextareaValue` `type TextareaValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/textarea/type.ts) | N +tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +value | String / Number | - | 文本框值。TS 类型：`TextareaValue` `type TextareaValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/textarea/type.ts) | N +defaultValue | String / Number | - | 文本框值。非受控属性。TS 类型：`TextareaValue` `type TextareaValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/textarea/type.ts) | N onBlur | Function | | TS 类型：`(value: TextareaValue, context: { e: FocusEvent }) => void`
失去焦点时触发 | N onChange | Function | | TS 类型：`(value: TextareaValue, context?: { e?: InputEvent }) => void`
输入内容变化时触发 | N onFocus | Function | | TS 类型：`(value: TextareaValue, context : { e: FocusEvent }) => void`
获得焦点时触发 | N diff --git a/packages/components/time-picker/time-picker.en-US.md b/packages/components/time-picker/time-picker.en-US.md index 1850758a64..b74e468aaf 100644 --- a/packages/components/time-picker/time-picker.en-US.md +++ b/packages/components/time-picker/time-picker.en-US.md @@ -15,17 +15,17 @@ disableTime | Function | - | disable time config function。Typescript：`(h: nu disabled | Boolean | false | \- | N format | String | HH:mm:ss | \- | N hideDisabledTime | Boolean | true | \- | N -inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N +label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N placeholder | String | undefined | \- | N -popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -presets | Object | - | Typescript：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N +popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N +presets | Object | - | Typescript：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N size | String | medium | options: small/medium/large | N status | String | default | options: default/success/warning/error | N steps | Array | [1, 1, 1] | Typescript：`Array` | N -tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -value | String | - | Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -defaultValue | String | - | uncontrolled property。Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N +tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +value | String | - | Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N +defaultValue | String | - | uncontrolled property。Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N onBlur | Function | | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
| N onChange | Function | | Typescript：`(value: TimePickerValue) => void`
| N onClose | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N @@ -45,23 +45,23 @@ allowInput | Boolean | false | \- | N autoSwap | Boolean | true | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N -disableTime | Function | - | Typescript：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N +disableTime | Function | - | Typescript：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N disabled | Boolean / Array | false | Typescript：`boolean \| Array` | N format | String | HH:mm:ss | \- | N hideDisabledTime | Boolean | true | \- | N -label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N placeholder | String / Array | undefined | Typescript：`string \| Array` | N -popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -presets | Object | - | Typescript：`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N +popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N +presets | Object | - | Typescript：`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N +rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N size | String | medium | options: small/medium/large | N status | String | default | options: default/success/warning/error | N steps | Array | [1, 1, 1] | Typescript：`Array` | N -tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -value | Array | - | Typescript：`TimeRangeValue` `type TimeRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -defaultValue | Array | - | uncontrolled property。Typescript：`TimeRangeValue` `type TimeRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -onBlur | Function | | Typescript：`(context: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' \| 'end'`
| N +tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +value | Array | - | Typescript：`TimeRangeValue` `type TimeRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N +defaultValue | Array | - | uncontrolled property。Typescript：`TimeRangeValue` `type TimeRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N +onBlur | Function | | Typescript：`(context: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' \| 'end'`
| N onChange | Function | | Typescript：`(value: TimeRangeValue) => void`
| N -onFocus | Function | | Typescript：`(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' \| 'end'`
| N -onInput | Function | | Typescript：`(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' \| 'end'`
| N +onFocus | Function | | Typescript：`(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' \| 'end'`
| N +onInput | Function | | Typescript：`(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' \| 'end'`
| N onPick | Function | | Typescript：`(value: TimeRangeValue, context: { e: MouseEvent, position?: TimeRangePickerPartial }) => void`
| N diff --git a/packages/components/time-picker/time-picker.md b/packages/components/time-picker/time-picker.md index 4a23720f52..8266242ac9 100644 --- a/packages/components/time-picker/time-picker.md +++ b/packages/components/time-picker/time-picker.md @@ -15,18 +15,18 @@ disableTime | Function | - | 禁用时间项的配置函数。TS 类型：`(h: n disabled | Boolean | false | 是否禁用组件 | N format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N -inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N +label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N placeholder | String | undefined | 占位符 | N -popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -presets | Object | - | 预设快捷时间选择，示例：`{ '前一小时': '11:00:00' }`。TS 类型：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N +popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N +presets | Object | - | 预设快捷时间选择，示例：`{ '前一小时': '11:00:00' }`。TS 类型：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N size | String | medium | 尺寸。可选项：small/medium/large | N status | String | default | 输入框状态。可选项：default/success/warning/error | N steps | Array | [1, 1, 1] | 时间间隔步数，数组排列 [小时, 分钟, 秒]，示例：[2, 1, 1] 或者 ['2', '1', '1']。TS 类型：`Array` | N -tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -value | String | - | 选中值。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -defaultValue | String | - | 选中值。非受控属性。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -onBlur | Function | | TS 类型：`(context: { value: TimePickerValue } & SelectInputBlurContext) => void`
当输入框失去焦点时触发，value 表示组件当前有效值。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts)。
`import { SelectInputBlurContext } from '@SelectInput'`
| N +tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +value | String | - | 选中值。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N +defaultValue | String | - | 选中值。非受控属性。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N +onBlur | Function | | TS 类型：`(context: { value: TimePickerValue } & SelectInputBlurContext) => void`
当输入框失去焦点时触发，value 表示组件当前有效值。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts)。
`import { SelectInputBlurContext } from '@SelectInput'`
| N onChange | Function | | TS 类型：`(value: TimePickerValue) => void`
选中值发生变化时触发 | N onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
面板关闭时触发 | N onFocus | Function | | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
输入框获得焦点时触发，value 表示组件当前有效值 | N @@ -45,24 +45,24 @@ allowInput | Boolean | false | 是否允许直接输入时间 | N autoSwap | Boolean | true | 是否自动调换左右区间的顺序，默认为 true；若需要支持跨天的场景，可以设置为 false | N borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否允许清除选中值 | N -disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N +disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N disabled | Boolean / Array | false | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean \| Array` | N format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N -label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N placeholder | String / Array | undefined | 占位符，值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型：`string \| Array` | N -popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -presets | Object | - | 预设快捷时间范围选择，示例：{ '下午': ['13:00:00', '18:00:00'] }。TS 类型：`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N +popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N +presets | Object | - | 预设快捷时间范围选择，示例：{ '下午': ['13:00:00', '18:00:00'] }。TS 类型：`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N +rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N size | String | medium | 尺寸。可选项：small/medium/large | N status | String | default | 输入框状态。可选项：default/success/warning/error | N steps | Array | [1, 1, 1] | 时间间隔步数，数组排列 [小时, 分钟, 秒]，示例：[2, 1, 1] 或者 ['2', '1', '1']。TS 类型：`Array` | N -tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -value | Array | - | 选中值。TS 类型：`TimeRangeValue` `type TimeRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -defaultValue | Array | - | 选中值。非受控属性。TS 类型：`TimeRangeValue` `type TimeRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N +tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +value | Array | - | 选中值。TS 类型：`TimeRangeValue` `type TimeRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N +defaultValue | Array | - | 选中值。非受控属性。TS 类型：`TimeRangeValue` `type TimeRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts) | N onBlur | Function | | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
当 输入框失去焦点时触发，value 表示组件当前有效值 | N onChange | Function | | TS 类型：`(value: TimeRangeValue) => void`
选中值发生变化时触发 | N -onFocus | Function | | TS 类型：`(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) => void`
范围输入框获得焦点时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' \| 'end'`
| N -onInput | Function | | TS 类型：`(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial }) => void`
当输入框内容发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' \| 'end'`
| N +onFocus | Function | | TS 类型：`(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) => void`
范围输入框获得焦点时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' \| 'end'`
| N +onInput | Function | | TS 类型：`(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial }) => void`
当输入框内容发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' \| 'end'`
| N onPick | Function | | TS 类型：`(value: TimeRangeValue, context: { e: MouseEvent, position?: TimeRangePickerPartial }) => void`
面板选中值后触发 | N diff --git a/packages/components/timeline/timeline.en-US.md b/packages/components/timeline/timeline.en-US.md index bfd3864df1..a01d2838c3 100644 --- a/packages/components/timeline/timeline.en-US.md +++ b/packages/components/timeline/timeline.en-US.md @@ -19,11 +19,11 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -dot | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +dot | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N dotColor | String | primary | Typescript：`string` | N -label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N labelAlign | String | - | options：left/right/top/bottom | N loading | Boolean | - | Whether it is in the loading state | N -onClick | Function | | Typescript：`(context: { e: MouseEvent; item: TdTimelineItemProps }) => void` [TdTimelineItemProps 详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/timeline/type.ts)
trigger on click. | N +onClick | Function | | Typescript：`(context: { e: MouseEvent; item: TdTimelineItemProps }) => void` [TdTimelineItemProps 详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/timeline/type.ts)
trigger on click. | N diff --git a/packages/components/timeline/timeline.md b/packages/components/timeline/timeline.md index 47a4d51084..190bf3282b 100644 --- a/packages/components/timeline/timeline.md +++ b/packages/components/timeline/timeline.md @@ -19,11 +19,11 @@ theme | String | default | 时间轴风格。可选项：default/dot | N -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -children | TNode | - | 描述内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 描述内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -dot | TElement | - | 用于自定义时间轴节点元素。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 描述内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 描述内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +dot | TElement | - | 用于自定义时间轴节点元素。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N dotColor | String | primary | 时间轴颜色，内置 `primary/warning/error/default` 四种色值，可传入 16 进制颜色码或 RGB 颜色值.。TS 类型：`string` | N -label | TNode | - | 标签文本内容，可完全自定义。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | - | 标签文本内容，可完全自定义。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N labelAlign | String | - | 标签信息相对于时间轴的位置，在 `mode='alternate'` 时生效，优先级高于 `Timeline.labelAlign`。可选项：left/right/top/bottom | N loading | Boolean | - | 是否处在加载状态 | N -onClick | Function | | TS 类型：`(context: { e: MouseEvent; item: TdTimelineItemProps }) => void` [TdTimelineItemProps 详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/timeline/type.ts)
点击时触发。 | N +onClick | Function | | TS 类型：`(context: { e: MouseEvent; item: TdTimelineItemProps }) => void` [TdTimelineItemProps 详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/timeline/type.ts)
点击时触发。 | N diff --git a/packages/components/tooltip/tooltip.en-US.md b/packages/components/tooltip/tooltip.en-US.md index c50b77257f..f9a510a667 100644 --- a/packages/components/tooltip/tooltip.en-US.md +++ b/packages/components/tooltip/tooltip.en-US.md @@ -30,7 +30,7 @@ name | type | default | description | required delay | Number | - | \- | N destroyOnClose | Boolean | true | \- | N duration | Number | - | \- | N -placement | String | top | Typescript：`PopupPlacement`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tooltip/type.ts) | N +placement | String | top | Typescript：`PopupPlacement`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tooltip/type.ts) | N showArrow | Boolean | true | \- | N theme | String | default | options：default/primary/success/danger/warning/light | N `PopupProps` | \- | - | \- | N @@ -41,10 +41,10 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -children | TNode | - | trigger element。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | tip content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | trigger element。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | tip content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N placement | String | top | options：top/bottom/mouse | N showArrow | Boolean | true | \- | N showShadow | Boolean | true | \- | N theme | String | default | options：light/default | N -triggerElement | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +triggerElement | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N diff --git a/packages/components/tooltip/tooltip.md b/packages/components/tooltip/tooltip.md index 465fd57523..95b6b9b9aa 100644 --- a/packages/components/tooltip/tooltip.md +++ b/packages/components/tooltip/tooltip.md @@ -30,7 +30,7 @@ delay | Number | - | 【议案讨论中】延迟出现提示，用于异步加载提示信息需要延迟显示的业务场景下 | N destroyOnClose | Boolean | true | 是否在关闭浮层时销毁浮层 | N duration | Number | - | 用于设置提示默认显示多长时间之后消失，初始第一次有效，单位：毫秒 | N -placement | String | top | 浮层出现位置。TS 类型：`PopupPlacement`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tooltip/type.ts) | N +placement | String | top | 浮层出现位置。TS 类型：`PopupPlacement`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tooltip/type.ts) | N showArrow | Boolean | true | 是否显示浮层箭头 | N theme | String | default | 文字提示风格。可选项：default/primary/success/danger/warning/light | N `PopupProps` | \- | - | 继承 `PopupProps` 中的全部 API | N @@ -41,10 +41,10 @@ theme | String | default | 文字提示风格。可选项：default/primary/succ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -children | TNode | - | 触发元素，同 triggerElement。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 文字提示内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 触发元素，同 triggerElement。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 文字提示内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N placement | String | top | 提示浮层出现的位置。可选项：top/bottom/mouse | N showArrow | Boolean | true | 是否显示箭头 | N showShadow | Boolean | true | 文字提示浮层是否需要阴影 | N theme | String | default | 组件风格，有亮色模式和暗色模式两种。可选项：light/default | N -triggerElement | TNode | - | 触发元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +triggerElement | TNode | - | 触发元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N diff --git a/packages/components/transfer/transfer.en-US.md b/packages/components/transfer/transfer.en-US.md index 0f036b06ad..8ae11e5a80 100644 --- a/packages/components/transfer/transfer.en-US.md +++ b/packages/components/transfer/transfer.en-US.md @@ -8,27 +8,27 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -checkboxProps | Object | - | Typescript：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N +checkboxProps | Object | - | Typescript：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts) | N checked | Array | [] | Typescript：`Array` | N defaultChecked | Array | [] | uncontrolled property。Typescript：`Array` | N data | Array | [] | Typescript：`Array` | N direction | String | both | options：left/right/both | N disabled | Boolean / Array | false | Typescript：`boolean \| Array` | N -empty | TNode | '' | Typescript：`EmptyType \| Array \| TNode` `type EmptyType = string \| TNode `。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N -footer | TNode | - | Typescript：`Array \| TNode<{ type: TransferListType }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -operation | TNode | - | Typescript：`Array \| TNode<{ direction: 'left' \| 'right' }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -pagination | Object / Array | - | Typescript：`PaginationProps \| Array`，[Pagination API Documents](./pagination?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N -search | Boolean / Object / Array | false | Typescript：`SearchOption \| Array` `type SearchOption = boolean \| InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N +empty | TNode | '' | Typescript：`EmptyType \| Array \| TNode` `type EmptyType = string \| TNode `。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts) | N +footer | TNode | - | Typescript：`Array \| TNode<{ type: TransferListType }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +operation | TNode | - | Typescript：`Array \| TNode<{ direction: 'left' \| 'right' }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +pagination | Object / Array | - | Typescript：`PaginationProps \| Array`，[Pagination API Documents](./pagination?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts) | N +search | Boolean / Object / Array | false | Typescript：`SearchOption \| Array` `type SearchOption = boolean \| InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts) | N showCheckAll | Boolean / Array | true | Typescript：`boolean \| Array` | N targetSort | String | original | options：original/push/unshift | N -title | TNode | [] | Typescript：`Array \| TNode<{ type: TransferListType }>` `type TitleType = string \| TNode` `type TransferListType = 'source' \| 'target'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N -transferItem | TElement | - | Typescript：`TNode>` `interface TransferItem { data: T; index: number; type: TransferListType}`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N -tree | TElement | 传入 Tree 组件定义树形结构 | Typescript：`(tree: TreeProps) => TNode`，[Tree API Documents](./tree?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N +title | TNode | [] | Typescript：`Array \| TNode<{ type: TransferListType }>` `type TitleType = string \| TNode` `type TransferListType = 'source' \| 'target'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts) | N +transferItem | TElement | - | Typescript：`TNode>` `interface TransferItem { data: T; index: number; type: TransferListType}`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts) | N +tree | TElement | 传入 Tree 组件定义树形结构 | Typescript：`(tree: TreeProps) => TNode`，[Tree API Documents](./tree?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts) | N value | Array | [] | Typescript：`Array` | N defaultValue | Array | [] | uncontrolled property。Typescript：`Array` | N -onChange | Function | | Typescript：`(targetValue: Array, context: TargetParams) => void`
Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts)。
`interface TargetParams { type: TransferListType; movedValue: Array }`
| N -onCheckedChange | Function | | Typescript：`(options: CheckedOptions) => void`
Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts)。
`interface CheckedOptions { checked: Array; sourceChecked: Array; targetChecked: Array; type: TransferListType }`
| N +onChange | Function | | Typescript：`(targetValue: Array, context: TargetParams) => void`
Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts)。
`interface TargetParams { type: TransferListType; movedValue: Array }`
| N +onCheckedChange | Function | | Typescript：`(options: CheckedOptions) => void`
Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts)。
`interface CheckedOptions { checked: Array; sourceChecked: Array; targetChecked: Array; type: TransferListType }`
| N onPageChange | Function | | Typescript：`(page: PageInfo, context: { type: TransferListType }) => void`
| N -onScroll | Function | | Typescript：`(options: { e: Event; bottomDistance: number; type: TransferListType }) => void`
Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -onSearch | Function | | Typescript：`(options: SearchContext) => void`
Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts)。
`interface SearchContext { query: string; type: TransferListType; trigger: 'input' \| 'enter'; e: InputEvent \| KeyboardEvent }`
| N +onScroll | Function | | Typescript：`(options: { e: Event; bottomDistance: number; type: TransferListType }) => void`
Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +onSearch | Function | | Typescript：`(options: SearchContext) => void`
Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts)。
`interface SearchContext { query: string; type: TransferListType; trigger: 'input' \| 'enter'; e: InputEvent \| KeyboardEvent }`
| N diff --git a/packages/components/transfer/transfer.md b/packages/components/transfer/transfer.md index 7ac2744abf..2e38503865 100644 --- a/packages/components/transfer/transfer.md +++ b/packages/components/transfer/transfer.md @@ -7,27 +7,27 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -checkboxProps | Object | - | 用于控制复选框属性。TS 类型：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N +checkboxProps | Object | - | 用于控制复选框属性。TS 类型：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts) | N checked | Array | [] | 数据列表选中项。TS 类型：`Array` | N defaultChecked | Array | [] | 数据列表选中项。非受控属性。TS 类型：`Array` | N data | Array | [] | 全量数据。TS 类型：`Array` | N direction | String | both | 穿梭框可操作方向。可选项：left/right/both | N disabled | Boolean / Array | false | 禁用全部操作：搜索、选中、移动、分页等。[源列表, 目标列表]，示例：[true, false] 或者 true。TS 类型：`boolean \| Array` | N -empty | TNode | '' | 列表为空时呈现的内容。值类型为数组，则表示分别控制源列表和目标列表数据为空的呈现内容。TS 类型：`EmptyType \| Array \| TNode` `type EmptyType = string \| TNode `。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N -footer | TNode | - | 穿梭框底部内容。TS 类型：`Array \| TNode<{ type: TransferListType }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -keys | Object | - | 用来定义选项文本和选项值字段，示例：`{ label: 'text', value: 'id' }`，表示选项文本取 `text` 字段，选项值取 `id` 字段。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -operation | TNode | - | 方向操作按钮。默认显示组件内置操作图标。自定义操作图标示例：['向左', '向右'] 或者 `[() => , () => ]` 或者 `(h, direction) => direction === 'left' ? '《' : '》'`。TS 类型：`Array \| TNode<{ direction: 'left' \| 'right' }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -pagination | Object / Array | - | 分页配置，值为空则不显示。具体 API 参考分页组件。值类型为数组，表示可分别控制源列表和目标列表分页组件。TS 类型：`PaginationProps \| Array`，[Pagination API Documents](./pagination?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N -search | Boolean / Object / Array | false | 搜索框配置，值为 false 表示不显示搜索框；值为 true 表示显示默认搜索框；值类型为对象，用于透传 Props 到 Input 组件；值类型为数组，则分别表示控制两侧搜索框。TS 类型：`SearchOption \| Array` `type SearchOption = boolean \| InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N +empty | TNode | '' | 列表为空时呈现的内容。值类型为数组，则表示分别控制源列表和目标列表数据为空的呈现内容。TS 类型：`EmptyType \| Array \| TNode` `type EmptyType = string \| TNode `。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts) | N +footer | TNode | - | 穿梭框底部内容。TS 类型：`Array \| TNode<{ type: TransferListType }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +keys | Object | - | 用来定义选项文本和选项值字段，示例：`{ label: 'text', value: 'id' }`，表示选项文本取 `text` 字段，选项值取 `id` 字段。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +operation | TNode | - | 方向操作按钮。默认显示组件内置操作图标。自定义操作图标示例：['向左', '向右'] 或者 `[() => , () => ]` 或者 `(h, direction) => direction === 'left' ? '《' : '》'`。TS 类型：`Array \| TNode<{ direction: 'left' \| 'right' }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +pagination | Object / Array | - | 分页配置，值为空则不显示。具体 API 参考分页组件。值类型为数组，表示可分别控制源列表和目标列表分页组件。TS 类型：`PaginationProps \| Array`，[Pagination API Documents](./pagination?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts) | N +search | Boolean / Object / Array | false | 搜索框配置，值为 false 表示不显示搜索框；值为 true 表示显示默认搜索框；值类型为对象，用于透传 Props 到 Input 组件；值类型为数组，则分别表示控制两侧搜索框。TS 类型：`SearchOption \| Array` `type SearchOption = boolean \| InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts) | N showCheckAll | Boolean / Array | true | 是否显示全选，值类型为数组则表示分别控制源列表和目标列表。TS 类型：`boolean \| Array` | N targetSort | String | original | 目标数据列表排列顺序。可选项：original/push/unshift | N -title | TNode | [] | 穿梭框标题，示例：['源列表', '目标列表'] 或者 `[() => 'A', () => 'B']` 或者 `({ type }) => type === 'source' ? '源' : '目标'`。TS 类型：`Array \| TNode<{ type: TransferListType }>` `type TitleType = string \| TNode` `type TransferListType = 'source' \| 'target'`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N -transferItem | TElement | - | 自定义渲染节点。TS 类型：`TNode>` `interface TransferItem { data: T; index: number; type: TransferListType}`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N -tree | TElement | 传入 Tree 组件定义树形结构 | TS 类型：`(tree: TreeProps) => TNode`，[Tree API Documents](./tree?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts) | N +title | TNode | [] | 穿梭框标题，示例：['源列表', '目标列表'] 或者 `[() => 'A', () => 'B']` 或者 `({ type }) => type === 'source' ? '源' : '目标'`。TS 类型：`Array \| TNode<{ type: TransferListType }>` `type TitleType = string \| TNode` `type TransferListType = 'source' \| 'target'`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts) | N +transferItem | TElement | - | 自定义渲染节点。TS 类型：`TNode>` `interface TransferItem { data: T; index: number; type: TransferListType}`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts) | N +tree | TElement | 传入 Tree 组件定义树形结构 | TS 类型：`(tree: TreeProps) => TNode`，[Tree API Documents](./tree?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts) | N value | Array | [] | 目标数据列表数据。TS 类型：`Array` | N defaultValue | Array | [] | 目标数据列表数据。非受控属性。TS 类型：`Array` | N -onChange | Function | | TS 类型：`(targetValue: Array, context: TargetParams) => void`
数据列表发生变化时触发，`type` 值为 `source`，表示源列表移动到目标列表，值为 `target` 表示目标列表移动到源列表，movedValue 则表示被移动的选项。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts)。
`interface TargetParams { type: TransferListType; movedValue: Array }`
| N -onCheckedChange | Function | | TS 类型：`(options: CheckedOptions) => void`
源数据列表或目标数据列表的选中项发生变化时触发，`context.type` 可以区分触发来源是目标列表，还是源列表。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts)。
`interface CheckedOptions { checked: Array; sourceChecked: Array; targetChecked: Array; type: TransferListType }`
| N +onChange | Function | | TS 类型：`(targetValue: Array, context: TargetParams) => void`
数据列表发生变化时触发，`type` 值为 `source`，表示源列表移动到目标列表，值为 `target` 表示目标列表移动到源列表，movedValue 则表示被移动的选项。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts)。
`interface TargetParams { type: TransferListType; movedValue: Array }`
| N +onCheckedChange | Function | | TS 类型：`(options: CheckedOptions) => void`
源数据列表或目标数据列表的选中项发生变化时触发，`context.type` 可以区分触发来源是目标列表，还是源列表。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts)。
`interface CheckedOptions { checked: Array; sourceChecked: Array; targetChecked: Array; type: TransferListType }`
| N onPageChange | Function | | TS 类型：`(page: PageInfo, context: { type: TransferListType }) => void`
分页发生变化时触发 | N -onScroll | Function | | TS 类型：`(options: { e: Event; bottomDistance: number; type: TransferListType }) => void`
列表滚动时触发，bottomDistance 表示元素滚动到底部的距离。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -onSearch | Function | | TS 类型：`(options: SearchContext) => void`
搜索时触发，options.query 表示用户输入的内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/transfer/type.ts)。
`interface SearchContext { query: string; type: TransferListType; trigger: 'input' \| 'enter'; e: InputEvent \| KeyboardEvent }`
| N +onScroll | Function | | TS 类型：`(options: { e: Event; bottomDistance: number; type: TransferListType }) => void`
列表滚动时触发，bottomDistance 表示元素滚动到底部的距离。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +onSearch | Function | | TS 类型：`(options: SearchContext) => void`
搜索时触发，options.query 表示用户输入的内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/transfer/type.ts)。
`interface SearchContext { query: string; type: TransferListType; trigger: 'input' \| 'enter'; e: InputEvent \| KeyboardEvent }`
| N diff --git a/packages/components/tree-select/tree-select.en-US.md b/packages/components/tree-select/tree-select.en-US.md index 5fa69bb9bb..6ac5a9c269 100644 --- a/packages/components/tree-select/tree-select.en-US.md +++ b/packages/components/tree-select/tree-select.en-US.md @@ -12,49 +12,49 @@ autoWidth | Boolean | false | \- | N autofocus | Boolean | false | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N -collapsedItems | TElement | - | Typescript：`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +collapsedItems | TElement | - | Typescript：`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N data | Array | [] | Typescript：`Array` | N disabled | Boolean | - | \- | N -empty | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +empty | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N filter | Function | - | Typescript：`(filterWords: string, option: DataOption) => boolean` | N filterable | Boolean | false | \- | N -inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N +inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N inputValue | String / Number | - | input value。Typescript：`string` | N defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript：`string` | N -keys | Object | - | alias filed name in data。Typescript：`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +keys | Object | - | alias filed name in data。Typescript：`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N loading | Boolean | false | \- | N -loadingText | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +loadingText | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N max | Number | 0 | \- | N minCollapsedNum | Number | 0 | \- | N multiple | Boolean | false | \- | N -panelBottomContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -panelTopContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +panelBottomContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +panelTopContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N placeholder | String | undefined | \- | N -popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N +popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N popupVisible | Boolean | undefined | show popup | N defaultPopupVisible | Boolean | undefined | show popup。uncontrolled property | N -prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N readonly | Boolean | false | \- | N reserveKeyword | Boolean | false | \- | N -selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N +selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N size | String | medium | options: small/medium/large | N status | String | default | options: default/success/warning/error | N -suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -tagProps | Object | - | Typescript：`TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N -tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -treeProps | Object | - | Typescript：`TreeProps`，[Tree API Documents](./tree?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N -value | String / Number / Object / Array | - | Typescript：`TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N -defaultValue | String / Number / Object / Array | - | uncontrolled property。Typescript：`TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N -valueDisplay | TElement | - | Typescript：`string \| TNode<{ value: TreeOptionData \| TreeOptionData[]; onClose: (index: number) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +tagProps | Object | - | Typescript：`TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N +tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +treeProps | Object | - | Typescript：`TreeProps`，[Tree API Documents](./tree?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N +value | String / Number / Object / Array | - | Typescript：`TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N +defaultValue | String / Number / Object / Array | - | uncontrolled property。Typescript：`TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N +valueDisplay | TElement | - | Typescript：`string \| TNode<{ value: TreeOptionData \| TreeOptionData[]; onClose: (index: number) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N valueType | String | value | options: value/object | N onBlur | Function | | Typescript：`(context: SelectInputBlurContext & { value: TreeSelectValue }) => void`
| N -onChange | Function | | Typescript：`(value: TreeValueType, context: TreeSelectChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts)。
`interface TreeSelectChangeContext { node: TreeNodeModel; data: DataOption; index?: number; trigger: TreeSelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent \| Event }`

`type TreeSelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| N +onChange | Function | | Typescript：`(value: TreeValueType, context: TreeSelectChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts)。
`interface TreeSelectChangeContext { node: TreeNodeModel; data: DataOption; index?: number; trigger: TreeSelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent \| Event }`

`type TreeSelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| N onClear | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onEnter | Function | | Typescript：`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`
| N onFocus | Function | | Typescript：`(context: { value: TreeSelectValue; e: FocusEvent }) => void`
| N onInputChange | Function | | Typescript：`(value: string, context: SelectInputValueChangeContext) => void`
| N -onPopupVisibleChange | Function | | Typescript：`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N -onRemove | Function | | Typescript：`(options: RemoveOptions) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N +onPopupVisibleChange | Function | | Typescript：`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N +onRemove | Function | | Typescript：`(options: RemoveOptions) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N onSearch | Function | | Typescript：`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
| N diff --git a/packages/components/tree-select/tree-select.md b/packages/components/tree-select/tree-select.md index e26aa84fbe..28afa27ed8 100644 --- a/packages/components/tree-select/tree-select.md +++ b/packages/components/tree-select/tree-select.md @@ -12,49 +12,49 @@ autoWidth | Boolean | false | 宽度随内容自适应 | N autofocus | Boolean | false | 自动聚焦 | N borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否允许清空 | N -collapsedItems | TElement | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +collapsedItems | TElement | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N data | Array | [] | 树选择的数据列表。结构：`[{ label: TNode, value: string \| number, text: string, ... }]`，其中 `label` 表示选项呈现的内容，可自定义；`value` 表示选项的唯一值；表示当 `label` 用于选项复杂内容呈现时，`text` 用于搜索功能。
其中 `label` 和 `value` 可以使用 `keys` 属性定义别名。TS 类型：`Array` | N disabled | Boolean | - | 是否禁用组件 | N -empty | TNode | - | 当下拉列表为空时显示的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +empty | TNode | - | 当下拉列表为空时显示的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N filter | Function | - | 过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, option: DataOption) => boolean` | N filterable | Boolean | false | 是否可搜索 | N -inputProps | Object | - | 透传给 输入框 Input 组件的全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N +inputProps | Object | - | 透传给 输入框 Input 组件的全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N inputValue | String / Number | - | 输入框的值。TS 类型：`string` | N defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`string` | N -keys | Object | - | 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }`。TS 类型：`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +keys | Object | - | 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }`。TS 类型：`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N loading | Boolean | false | 是否正在加载数据 | N -loadingText | TNode | - | 远程加载时显示的文字，支持自定义。如加上超链接。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +loadingText | TNode | - | 远程加载时显示的文字，支持自定义。如加上超链接。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N max | Number | 0 | 用于控制多选数量，值为 0 则不限制 | N minCollapsedNum | Number | 0 | 最小折叠数量，用于多选情况下折叠选中项，超出该数值的选中项折叠。值为 0 则表示不折叠 | N multiple | Boolean | false | 是否允许多选 | N -panelBottomContent | TNode | - | 面板内的底部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -panelTopContent | TNode | - | 面板内的顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +panelBottomContent | TNode | - | 面板内的底部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +panelTopContent | TNode | - | 面板内的顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N placeholder | String | undefined | 占位符 | N -popupProps | Object | - | 透传给 popup 组件的全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N +popupProps | Object | - | 透传给 popup 组件的全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N popupVisible | Boolean | undefined | 是否显示下拉框 | N defaultPopupVisible | Boolean | undefined | 是否显示下拉框。非受控属性 | N -prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N reserveKeyword | Boolean | false | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | N -selectInputProps | Object | - | 【开发中】透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N +selectInputProps | Object | - | 【开发中】透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N size | String | medium | 尺寸。可选项：small/medium/large | N status | String | default | 输入框状态。可选项：default/success/warning/error | N -suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -tagProps | Object | - | 透传 Tag 标签组件全部属性。TS 类型：`TagProps`，[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N -tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -treeProps | Object | - | 透传 Tree 组件的全部属性。TS 类型：`TreeProps`，[Tree API Documents](./tree?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N -value | String / Number / Object / Array | - | 选中值，泛型 `TreeValueType` 继承自 `TreeSelectValue`。TS 类型：`TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N -defaultValue | String / Number / Object / Array | - | 选中值，泛型 `TreeValueType` 继承自 `TreeSelectValue`。非受控属性。TS 类型：`TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N -valueDisplay | TElement | - | 自定义选中项呈现方式。TS 类型：`string \| TNode<{ value: TreeOptionData \| TreeOptionData[]; onClose: (index: number) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +tagProps | Object | - | 透传 Tag 标签组件全部属性。TS 类型：`TagProps`，[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N +tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +treeProps | Object | - | 透传 Tree 组件的全部属性。TS 类型：`TreeProps`，[Tree API Documents](./tree?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N +value | String / Number / Object / Array | - | 选中值，泛型 `TreeValueType` 继承自 `TreeSelectValue`。TS 类型：`TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N +defaultValue | String / Number / Object / Array | - | 选中值，泛型 `TreeValueType` 继承自 `TreeSelectValue`。非受控属性。TS 类型：`TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N +valueDisplay | TElement | - | 自定义选中项呈现方式。TS 类型：`string \| TNode<{ value: TreeOptionData \| TreeOptionData[]; onClose: (index: number) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N valueType | String | value | 用于控制选中值的类型。假设数据选项为：`[{ label: '姓名', value: 'name' }]`，value 表示值仅返回数据选项中的 value， object 表示值返回全部数据。可选项：value/object | N onBlur | Function | | TS 类型：`(context: SelectInputBlurContext & { value: TreeSelectValue }) => void`
输入框失去焦点时触发 | N -onChange | Function | | TS 类型：`(value: TreeValueType, context: TreeSelectChangeContext) => void`
节点选中状态变化时触发，`context.node` 表示当前变化的选项，`context. trigger` 表示触发变化的来源。泛型 `TreeValueType` 继承自 `TreeSelectValue` 。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts)。
`interface TreeSelectChangeContext { node: TreeNodeModel; data: DataOption; index?: number; trigger: TreeSelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent \| Event }`

`type TreeSelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| N +onChange | Function | | TS 类型：`(value: TreeValueType, context: TreeSelectChangeContext) => void`
节点选中状态变化时触发，`context.node` 表示当前变化的选项，`context. trigger` 表示触发变化的来源。泛型 `TreeValueType` 继承自 `TreeSelectValue` 。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts)。
`interface TreeSelectChangeContext { node: TreeNodeModel; data: DataOption; index?: number; trigger: TreeSelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent \| Event }`

`type TreeSelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| N onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击清除按钮时触发 | N onEnter | Function | | TS 类型：`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`
回车键按下时触发。`inputValue` 表示输入框的值，`value` 表示选中值。泛型 `TreeValueType` 继承 `TreeSelectValue` | N onFocus | Function | | TS 类型：`(context: { value: TreeSelectValue; e: FocusEvent }) => void`
输入框获得焦点时触发 | N onInputChange | Function | | TS 类型：`(value: string, context: SelectInputValueChangeContext) => void`
输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等 | N -onPopupVisibleChange | Function | | TS 类型：`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
下拉框显示或隐藏时触发。单选场景，选中某个选项时触发关闭，此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N -onRemove | Function | | TS 类型：`(options: RemoveOptions) => void`
多选模式下，选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N +onPopupVisibleChange | Function | | TS 类型：`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
下拉框显示或隐藏时触发。单选场景，选中某个选项时触发关闭，此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N +onRemove | Function | | TS 类型：`(options: RemoveOptions) => void`
多选模式下，选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N onSearch | Function | | TS 类型：`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
输入值变化时，触发搜索事件。主要用于远程搜索新数据。设置 `filterable=true` 开启此功能。优先级高于本地数据搜索 `filter`，即一旦存在这个远程搜索事件 `filter` 失效 | N diff --git a/packages/components/tree/tree.en-US.md b/packages/components/tree/tree.en-US.md index 55c593191d..7368a98fa3 100644 --- a/packages/components/tree/tree.en-US.md +++ b/packages/components/tree/tree.en-US.md @@ -12,14 +12,14 @@ activeMultiple | Boolean | false | \- | N actived | Array | - | Typescript：`Array` | N allowDrop | Function | - | Determine whether the node can execute the drop operation。Typescript：`(context: { e: DragEvent; dragNode: TreeNodeModel; dropNode: TreeNodeModel; dropPosition: number; }) => boolean` | N allowFoldNodeOnFilter | Boolean | false | \- | N -checkProps | Object | - | Typescript：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree/type.ts) | N +checkProps | Object | - | Typescript：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree/type.ts) | N checkStrictly | Boolean | false | \- | N checkable | Boolean | false | \- | N data | Array | [] | Typescript：`Array` | N disableCheck | Boolean / Function | false | Typescript：`boolean \| ((node: TreeNodeModel) => boolean)` | N disabled | Boolean | - | \- | N draggable | Boolean | - | \- | N -empty | TNode | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +empty | TNode | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N expandAll | Boolean | false | \- | N expandLevel | Number | 0 | \- | N expandMutex | Boolean | false | \- | N @@ -28,17 +28,17 @@ expandParent | Boolean | false | \- | N expanded | Array | [] | Typescript：`Array` | N filter | Function | - | Typescript：`(node: TreeNodeModel) => boolean` | N hover | Boolean | - | \- | N -icon | TNode | true | Typescript：`boolean \| TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -keys | Object | - | Typescript：`TreeKeysType` `interface TreeKeysType { value?: string; label?: string; children?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree/type.ts) | N -label | TNode | true | Typescript：`string \| boolean \| TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TNode | true | Typescript：`boolean \| TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +keys | Object | - | Typescript：`TreeKeysType` `interface TreeKeysType { value?: string; label?: string; children?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree/type.ts) | N +label | TNode | true | Typescript：`string \| boolean \| TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N lazy | Boolean | true | \- | N -line | TNode | false | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +line | TNode | false | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N load | Function | - | Typescript：`(node: TreeNodeModel) => Promise>` | N -operations | TElement | - | Typescript：`TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -scroll | Object | - | lazy load and virtual scroll。Typescript：`TScroll`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +operations | TElement | - | Typescript：`TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +scroll | Object | - | lazy load and virtual scroll。Typescript：`TScroll`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N transition | Boolean | true | \- | N -value | Array | [] | Typescript：`Array` `type TreeNodeValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree/type.ts) | N -defaultValue | Array | [] | uncontrolled property。Typescript：`Array` `type TreeNodeValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree/type.ts) | N +value | Array | [] | Typescript：`Array` `type TreeNodeValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree/type.ts) | N +defaultValue | Array | [] | uncontrolled property。Typescript：`Array` `type TreeNodeValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree/type.ts) | N valueMode | String | onlyLeaf | options: onlyLeaf/parentFirst/all | N onActive | Function | | Typescript：`(value: Array, context: { node: TreeNodeModel; e?: MouseEvent; trigger: 'node-click' \| 'setItem' }) => void`
| N onChange | Function | | Typescript：`(value: Array, context: { node: TreeNodeModel; e?: any; trigger: 'node-click' \| 'setItem' }) => void`
| N diff --git a/packages/components/tree/tree.md b/packages/components/tree/tree.md index d5a3e164fa..778bfb331a 100644 --- a/packages/components/tree/tree.md +++ b/packages/components/tree/tree.md @@ -12,14 +12,14 @@ activeMultiple | Boolean | false | 是否允许多个节点同时高亮 | N actived | Array | - | 高亮的节点值。TS 类型：`Array` | N allowDrop | Function | - | 判断节点是否可以执行 drop 操作，泛型 `T` 表示树节点 TS 类型。TS 类型：`(context: { e: DragEvent; dragNode: TreeNodeModel; dropNode: TreeNodeModel; dropPosition: number; }) => boolean` | N allowFoldNodeOnFilter | Boolean | false | 是否允许在过滤时节点折叠节点 | N -checkProps | Object | - | 透传属性到 checkbox 组件。参考 checkbox 组件 API。TS 类型：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree/type.ts) | N +checkProps | Object | - | 透传属性到 checkbox 组件。参考 checkbox 组件 API。TS 类型：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree/type.ts) | N checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N checkable | Boolean | false | 隐藏节点复选框 | N data | Array | [] | 树数据，泛型 `T` 表示树节点 TS 类型。TS 类型：`Array` | N disableCheck | Boolean / Function | false | 禁用复选框，可支持禁用不同的行。TS 类型：`boolean \| ((node: TreeNodeModel) => boolean)` | N disabled | Boolean | - | 是否禁用树操作 | N draggable | Boolean | - | [开发中]节点是否可拖拽 | N -empty | TNode | '' | 数据为空时展示的文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +empty | TNode | '' | 数据为空时展示的文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N expandAll | Boolean | false | 是否展开全部节点 | N expandLevel | Number | 0 | 默认展开的级别，第一层为 0 | N expandMutex | Boolean | false | 同级别展开互斥，手风琴效果 | N @@ -28,17 +28,17 @@ expandParent | Boolean | false | 展开子节点时是否自动展开父节点 | expanded | Array | [] | 展开的节点值。TS 类型：`Array` | N filter | Function | - | 节点过滤方法，只呈现返回值为 true 的节点，泛型 `T` 表示树节点 TS 类型。TS 类型：`(node: TreeNodeModel) => boolean` | N hover | Boolean | - | 节点是否有悬浮状态 | N -icon | TNode | true | 节点图标，可自定义。TS 类型：`boolean \| TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -keys | Object | - | 用来定义 `value / label / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label 'name', children: 'list' }`。TS 类型：`TreeKeysType` `interface TreeKeysType { value?: string; label?: string; children?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree/type.ts) | N -label | TNode | true | 自定义节点内容，值为 `false` 不显示，值为 `true` 显示默认 label，值为字符串直接输出该字符串。泛型 `T` 表示树节点 TS 类型。
如果期望只有点击复选框才选中，而点击节点不选中，可以使用 `label` 自定义节点，然后加上点击事件 `e.preventDefault()`，通过调整自定义节点的宽度和高度决定禁止点击选中的范围。TS 类型：`string \| boolean \| TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TNode | true | 节点图标，可自定义。TS 类型：`boolean \| TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +keys | Object | - | 用来定义 `value / label / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label 'name', children: 'list' }`。TS 类型：`TreeKeysType` `interface TreeKeysType { value?: string; label?: string; children?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree/type.ts) | N +label | TNode | true | 自定义节点内容，值为 `false` 不显示，值为 `true` 显示默认 label，值为字符串直接输出该字符串。泛型 `T` 表示树节点 TS 类型。
如果期望只有点击复选框才选中，而点击节点不选中，可以使用 `label` 自定义节点，然后加上点击事件 `e.preventDefault()`，通过调整自定义节点的宽度和高度决定禁止点击选中的范围。TS 类型：`string \| boolean \| TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N lazy | Boolean | true | 延迟加载 children 为 true 的节点的子节点数据，即使 expandAll 被设置为 true，也同样延迟加载 | N -line | TNode | false | 连接线。值为 false 不显示连接线；值为 true 显示默认连接线；值类型为 Function 表示自定义连接线。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +line | TNode | false | 连接线。值为 false 不显示连接线；值为 true 显示默认连接线；值类型为 Function 表示自定义连接线。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N load | Function | - | 加载子数据的方法，在展开节点时调用（仅当节点 children 为 true 时生效），泛型 `T` 表示树节点 TS 类型。TS 类型：`(node: TreeNodeModel) => Promise>` | N -operations | TElement | - | 自定义节点操作项，泛型 `T` 表示树节点 TS 类型。TS 类型：`TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`。TS 类型：`TScroll`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +operations | TElement | - | 自定义节点操作项，泛型 `T` 表示树节点 TS 类型。TS 类型：`TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`。TS 类型：`TScroll`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N transition | Boolean | true | 节点展开折叠时是否使用过渡动画 | N -value | Array | [] | 选中值（组件为可选状态时）。TS 类型：`Array` `type TreeNodeValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree/type.ts) | N -defaultValue | Array | [] | 选中值（组件为可选状态时）。非受控属性。TS 类型：`Array` `type TreeNodeValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree/type.ts) | N +value | Array | [] | 选中值（组件为可选状态时）。TS 类型：`Array` `type TreeNodeValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree/type.ts) | N +defaultValue | Array | [] | 选中值（组件为可选状态时）。非受控属性。TS 类型：`Array` `type TreeNodeValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree/type.ts) | N valueMode | String | onlyLeaf | 选中值模式。all 表示父节点和子节点全部会出现在选中值里面；parentFirst 表示当子节点全部选中时，仅父节点在选中值里面；onlyLeaft 表示无论什么情况，选中值仅呈现叶子节点。可选项：onlyLeaf/parentFirst/all | N onActive | Function | | TS 类型：`(value: Array, context: { node: TreeNodeModel; e?: MouseEvent; trigger: 'node-click' \| 'setItem' }) => void`
节点激活时触发，泛型 `T` 表示树节点 TS 类型 | N onChange | Function | | TS 类型：`(value: Array, context: { node: TreeNodeModel; e?: any; trigger: 'node-click' \| 'setItem' }) => void`
节点选中状态变化时触发，context.node 表示当前变化的选项，泛型 `T` 表示树节点 TS 类型 | N diff --git a/packages/components/typography/typography.en-US.md b/packages/components/typography/typography.en-US.md index 27477926c7..9f9cf1c7fa 100644 --- a/packages/components/typography/typography.en-US.md +++ b/packages/components/typography/typography.en-US.md @@ -7,7 +7,7 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -children | TNode | - | children of text。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | children of text。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N code | Boolean | false | add code style | N copyable | Boolean / Object | false | add copyable style。Typescript：`boolean \| TypographyCopyable` | N delete | Boolean | false | add delete line style | N @@ -26,8 +26,8 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -children | TNode | - | children of title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | content of title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | children of title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | content of title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ellipsis | Boolean / Object | false | add ellipsis style。Typescript：`boolean \| TypographyEllipsis` | N level | String | h1 | level of title。options: h1/h2/h3/h4/h5/h6 | N @@ -37,8 +37,8 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -children | TNode | - | children of paragraph。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | content of paragraph。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | children of paragraph。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | content of paragraph。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ellipsis | Boolean / Object | false | add ellipsis style。Typescript：`boolean \| TypographyEllipsis` | N ### TypographyEllipsis @@ -48,8 +48,8 @@ name | type | default | description | required collapsible | Boolean | true | collapsible after expanding | N expandable | Boolean | true | expandable | N row | Number | 1 | default row number of ellipsis | N -suffix | TElement | - | custom element configuration for ellipsis and collapse icon。Typescript：`TNode<{ expanded: boolean }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -tooltipProps | Object | - | Configuration of the tooltip that appears on the ellipsis icon when the cursor is over it.。Typescript：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/typography/type.ts) | N +suffix | TElement | - | custom element configuration for ellipsis and collapse icon。Typescript：`TNode<{ expanded: boolean }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +tooltipProps | Object | - | Configuration of the tooltip that appears on the ellipsis icon when the cursor is over it.。Typescript：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/typography/type.ts) | N onExpand | Function | | Typescript：`(expanded:boolean) => void`
| N ### TypographyCopyable @@ -57,6 +57,6 @@ onExpand | Function | | Typescript：`(expanded:boolean) => void`
| N name | type | default | description | required -- | -- | -- | -- | -- text | String | - | copied content | N -suffix | TElement | - | custom element configuration for copy icon。Typescript：`TNode<{ copied: boolean }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -tooltipProps | Object | - | Configuration of the tooltip that appears on the copy icon when the cursor is over it.。Typescript：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/typography/type.ts) | N +suffix | TElement | - | custom element configuration for copy icon。Typescript：`TNode<{ copied: boolean }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +tooltipProps | Object | - | Configuration of the tooltip that appears on the copy icon when the cursor is over it.。Typescript：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/typography/type.ts) | N onCopy | Function | | Typescript：`() => void`
| N \ No newline at end of file diff --git a/packages/components/typography/typography.md b/packages/components/typography/typography.md index 21a5a5a1a9..5c3c5f6df2 100644 --- a/packages/components/typography/typography.md +++ b/packages/components/typography/typography.md @@ -7,7 +7,7 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -children | TNode | - | 文本内容，同content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 文本内容，同content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N code | Boolean | false | 是否添加代码样式 | N copyable | Boolean / Object | false | 是否可复制，可通过配置参数自定义复制操作的具体功能和样式。TS 类型：`boolean \| TypographyCopyable` | N delete | Boolean | false | 是否添加删除线样式 | N @@ -26,8 +26,8 @@ underline | Boolean | false | 是否添加下划线样式 | N -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -children | TNode | - | 段落内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 段落内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 段落内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 段落内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ellipsis | Boolean / Object | false | 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式。TS 类型：`boolean \| TypographyEllipsis` | N level | String | h1 | 标题等级。可选项：h1/h2/h3/h4/h5/h6 | N @@ -37,8 +37,8 @@ level | String | h1 | 标题等级。可选项：h1/h2/h3/h4/h5/h6 | N -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -children | TNode | - | 段落内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 段落内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 段落内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 段落内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ellipsis | Boolean / Object | false | 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式。TS 类型：`boolean \| TypographyEllipsis` | N ### TypographyEllipsis @@ -48,8 +48,8 @@ ellipsis | Boolean / Object | false | 是否省略展示，可通过配置参数 collapsible | Boolean | true | 展开后是否可以重新收起 | N expandable | Boolean | true | 是否可展开 | N row | Number | 1 | 省略配置默认展示行数 | N -suffix | TElement | - | 自定义省略触发元素，一般用于自定义折叠图标。TS 类型：`TNode<{ expanded: boolean }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -tooltipProps | Object | - | 光标在省略图标上出现的tooltip的配置。TS 类型：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/typography/type.ts) | N +suffix | TElement | - | 自定义省略触发元素，一般用于自定义折叠图标。TS 类型：`TNode<{ expanded: boolean }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +tooltipProps | Object | - | 光标在省略图标上出现的tooltip的配置。TS 类型：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/typography/type.ts) | N onExpand | Function | | TS 类型：`(expanded:boolean) => void`
点击省略按钮的回调 | N ### TypographyCopyable @@ -57,6 +57,6 @@ onExpand | Function | | TS 类型：`(expanded:boolean) => void`
点击省 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- text | String | - | 复制的文本内容，默认为全部文本 | N -suffix | TElement | - | 自定义复制触发元素，一般用于自定义复制图标。TS 类型：`TNode<{ copied: boolean }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -tooltipProps | Object | - | 光标在复制图标上出现的tooltip的配置。TS 类型：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/typography/type.ts) | N +suffix | TElement | - | 自定义复制触发元素，一般用于自定义复制图标。TS 类型：`TNode<{ copied: boolean }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +tooltipProps | Object | - | 光标在复制图标上出现的tooltip的配置。TS 类型：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/typography/type.ts) | N onCopy | Function | | TS 类型：`() => void`
点击复制按钮的回调 | N \ No newline at end of file diff --git a/packages/components/upload/upload.en-US.md b/packages/components/upload/upload.en-US.md index 182d3d707c..ca6166321f 100644 --- a/packages/components/upload/upload.en-US.md +++ b/packages/components/upload/upload.en-US.md @@ -14,59 +14,59 @@ allowUploadDuplicateFile | Boolean | false | allow to upload duplicate name file autoUpload | Boolean | true | post upload request automatically after files being selected | N beforeAllFilesUpload | Function | - | before all files upload, return false can stop uploading file。Typescript：`(file: UploadFile[]) => boolean \| Promise` | N beforeUpload | Function | - | stop one of files to upload。Typescript：`(file: UploadFile) => boolean \| Promise` | N -cancelUploadButton | TNode | - | cancel upload button props, which showed on `autoUpload=false` and multiple files/images upload。Typescript：`null \| ButtonProps \| TNode<{ disabled: boolean; cancelUploadText: string; cancelUpload: (ctx: { e: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -children | TNode | - | to define upload trigger elements if `draggable=false`, to define drag elements if `draggable=true`。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +cancelUploadButton | TNode | - | cancel upload button props, which showed on `autoUpload=false` and multiple files/images upload。Typescript：`null \| ButtonProps \| TNode<{ disabled: boolean; cancelUploadText: string; cancelUpload: (ctx: { e: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +children | TNode | - | to define upload trigger elements if `draggable=false`, to define drag elements if `draggable=true`。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N data | Object | - | extra request data of uploading. `formatRequest` can redefine all request data。Typescript：`Record \| ((files: UploadFile[]) => Record)` | N disabled | Boolean | - | make upload to be disabled | N -dragContent | TNode | - | define drag content nodes, it works on `theme=custom`。Typescript：`TNode \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +dragContent | TNode | - | define drag content nodes, it works on `theme=custom`。Typescript：`TNode \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N draggable | Boolean | undefined | if drag uploading allowed, works on `theme=file` or `theme=image` | N -fileListDisplay | TElement | - | used to render file list UI。Typescript：`TNode<{ files: UploadFile[]; dragEvents?: UploadDisplayDragEvents }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +fileListDisplay | TElement | - | used to render file list UI。Typescript：`TNode<{ files: UploadFile[]; dragEvents?: UploadDisplayDragEvents }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N files | Array | [] | Typescript：`Array` | N defaultFiles | Array | [] | uncontrolled property。Typescript：`Array` | N format | Function | - | to redefine `UploadFile` data structure。Typescript：`(file: File) => UploadFile` | N formatRequest | Function | - | redefine request data。Typescript：`(requestData: { [key: string]: any }) => { [key: string]: any }` | N -formatResponse | Function | - | redefine response data structure。Typescript：`(response: any, context: FormatResponseContext) => ResponseType ` `type ResponseType = { error?: string; url?: string; status?: 'fail' \| 'success'; files?: UploadFile[] } & Record` `interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N +formatResponse | Function | - | redefine response data structure。Typescript：`(response: any, context: FormatResponseContext) => ResponseType ` `type ResponseType = { error?: string; url?: string; status?: 'fail' \| 'success'; files?: UploadFile[] } & Record` `interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts) | N headers | Object | - | HTTP Request Header。Typescript：`{[key: string]: string}` | N imageProps | Object | - | \- | N -imageViewerProps | Object | - | ImageViewer Component Props。Typescript：`ImageViewerProps`，[ImageViewer API Documents](./image-viewer?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N +imageViewerProps | Object | - | ImageViewer Component Props。Typescript：`ImageViewerProps`，[ImageViewer API Documents](./image-viewer?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts) | N inputAttributes | Object | - | add attributes to HTML element `input`。Typescript：`CSSProperties` | N isBatchUpload | Boolean | false | make all files to be a whole package, files can only be replaced or deleted together, can not add more files | N -locale | Object | - | upload language config, priority of `locale` is higher than global language config。Typescript：`UploadConfig` `import { UploadConfig } from '../config-provider/type'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N +locale | Object | - | upload language config, priority of `locale` is higher than global language config。Typescript：`UploadConfig` `import { UploadConfig } from '../config-provider/type'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts) | N max | Number | 0 | max count of files limit | N method | String | POST | HTTP request method。options: POST/GET/PUT/OPTIONS/PATCH/post/get/put/options/patch | N mockProgressDuration | Number | - | mock progress duration time. more large files more duration time | N multiple | Boolean | false | multiple files uploading | N name | String | file | field name of files in upload request data | N placeholder | String | - | placeholder | N -requestMethod | Function | - | custom upload request method。Typescript：`(files: UploadFile \| UploadFile[]) => Promise` `interface RequestMethodResponse { status: 'success' \| 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N +requestMethod | Function | - | custom upload request method。Typescript：`(files: UploadFile \| UploadFile[]) => Promise` `interface RequestMethodResponse { status: 'success' \| 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts) | N showImageFileName | Boolean | true | show image's name | N showThumbnail | Boolean | false | show thumbnail before file name, only works on `theme=file-flow` | N showUploadProgress | Boolean | true | show upload progress nodes | N -sizeLimit | Number / Object | - | files size limit。Typescript：`number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N +sizeLimit | Number / Object | - | files size limit。Typescript：`number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts) | N status | String | - | tips status。options: default/success/warning/error | N theme | String | file | different upload UI styles。options: custom/file/file-input/file-flow/image/image-flow | N -tips | TNode | - | tips text below upload component, define it's color with `status`。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -trigger | TElement | - | trigger elements UI。Typescript：`TNode` `interface TriggerContext { dragActive?: boolean; files: UploadFile[] }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N -triggerButtonProps | Object | - | trigger button props, it can be used to change color/size/href/... of the trigger button。Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N +tips | TNode | - | tips text below upload component, define it's color with `status`。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +trigger | TElement | - | trigger elements UI。Typescript：`TNode` `interface TriggerContext { dragActive?: boolean; files: UploadFile[] }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts) | N +triggerButtonProps | Object | - | trigger button props, it can be used to change color/size/href/... of the trigger button。Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts) | N uploadAllFilesInOneRequest | Boolean | false | uploading all files in one request | N -uploadButton | TNode | - | upload button props, which showed on `autoUpload=false` and multiple files/images upload。Typescript：`null \| ButtonProps \| TNode<{ disabled: boolean; uploading: boolean; uploadFiles: () => void; uploadText: string }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +uploadButton | TNode | - | upload button props, which showed on `autoUpload=false` and multiple files/images upload。Typescript：`null \| ButtonProps \| TNode<{ disabled: boolean; uploading: boolean; uploadFiles: () => void; uploadText: string }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N uploadPastedFiles | Boolean | true | allow to upload files in clipboard after pasting | N useMockProgress | Boolean | true | use mock progress, instead of real progress | N withCredentials | Boolean | false | uploading request with cookie | N onCancelUpload | Function | | Typescript：`() => void`
trigger on cancel button click | N -onChange | Function | | Typescript：`(value: Array, context: UploadChangeContext) => void`
trigger on uploaded files change。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts)。
`interface UploadChangeContext { e?: MouseEvent \| ProgressEvent; response?: any; trigger: UploadChangeTrigger; index?: number; file?: UploadFile; files?: UploadFile[] }`

`type UploadChangeTrigger = 'add' \| 'remove' \| 'abort' \| 'progress-success' \| 'progress' \| 'progress-fail' \| 'default'`
| N +onChange | Function | | Typescript：`(value: Array, context: UploadChangeContext) => void`
trigger on uploaded files change。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts)。
`interface UploadChangeContext { e?: MouseEvent \| ProgressEvent; response?: any; trigger: UploadChangeTrigger; index?: number; file?: UploadFile; files?: UploadFile[] }`

`type UploadChangeTrigger = 'add' \| 'remove' \| 'abort' \| 'progress-success' \| 'progress' \| 'progress-fail' \| 'default'`
| N onDragenter | Function | | Typescript：`(context: { e: DragEvent }) => void`
trigger on file dragged into drag elements | N onDragleave | Function | | Typescript：`(context: { e: DragEvent }) => void`
trigger on file dragged leave drag elements | N onDrop | Function | | Typescript：`(context: { e: DragEvent }) => void`
trigger on file dropped | N -onFail | Function | | Typescript：`(options: UploadFailContext) => void`
`response.error` used for error tips, `formatResponse` can format `response`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts)。
`interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}`
| N +onFail | Function | | Typescript：`(options: UploadFailContext) => void`
`response.error` used for error tips, `formatResponse` can format `response`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts)。
`interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}`
| N onOneFileFail | Function | | Typescript：`(options: UploadFailContext) => void`
trigger on one file upload failed | N onOneFileSuccess | Function | | Typescript：`(context: Pick) => void`
trigger on file uploaded successfully | N onPreview | Function | | Typescript：`(options: { file: UploadFile; index: number; e: MouseEvent }) => void`
trigger on preview elements click | N -onProgress | Function | | Typescript：`(options: ProgressContext) => void`
uploading request progress event。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts)。
`interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }`

`type UploadProgressType = 'real' \| 'mock'`
| N -onRemove | Function | | Typescript：`(context: UploadRemoveContext) => void`
trigger on file removed。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts)。
`interface UploadRemoveContext { index?: number; file?: UploadFile; e: MouseEvent }`
| N -onSelectChange | Function | | Typescript：`(files: File[], context: UploadSelectChangeContext) => void`
trigger after file choose and before upload。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts)。
`interface UploadSelectChangeContext { currentSelectedFiles: UploadFile[] }`
| N -onSuccess | Function | | Typescript：`(context: SuccessContext) => void`
trigger on all files uploaded successfully。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts)。
`interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; currentFiles?: UploadFile[]; response?: any; results?: SuccessContext[]; XMLHttpRequest?: XMLHttpRequest }`
| N -onValidate | Function | | Typescript：`(context: { type: UploadValidateType, files: UploadFile[] }) => void`
trigger on length over limit, or trigger on file size over limit。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts)。
`type UploadValidateType = 'FILE_OVER_SIZE_LIMIT' \| 'FILES_OVER_LENGTH_LIMIT' \| 'FILTER_FILE_SAME_NAME' \| 'BEFORE_ALL_FILES_UPLOAD' \| 'CUSTOM_BEFORE_UPLOAD'`
| N +onProgress | Function | | Typescript：`(options: ProgressContext) => void`
uploading request progress event。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts)。
`interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }`

`type UploadProgressType = 'real' \| 'mock'`
| N +onRemove | Function | | Typescript：`(context: UploadRemoveContext) => void`
trigger on file removed。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts)。
`interface UploadRemoveContext { index?: number; file?: UploadFile; e: MouseEvent }`
| N +onSelectChange | Function | | Typescript：`(files: File[], context: UploadSelectChangeContext) => void`
trigger after file choose and before upload。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts)。
`interface UploadSelectChangeContext { currentSelectedFiles: UploadFile[] }`
| N +onSuccess | Function | | Typescript：`(context: SuccessContext) => void`
trigger on all files uploaded successfully。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts)。
`interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; currentFiles?: UploadFile[]; response?: any; results?: SuccessContext[]; XMLHttpRequest?: XMLHttpRequest }`
| N +onValidate | Function | | Typescript：`(context: { type: UploadValidateType, files: UploadFile[] }) => void`
trigger on length over limit, or trigger on file size over limit。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts)。
`type UploadValidateType = 'FILE_OVER_SIZE_LIMIT' \| 'FILES_OVER_LENGTH_LIMIT' \| 'FILTER_FILE_SAME_NAME' \| 'BEFORE_ALL_FILES_UPLOAD' \| 'CUSTOM_BEFORE_UPLOAD'`
| N onWaitingUploadFilesChange | Function | | Typescript：`(context: { files: Array, trigger: 'validate' \| 'remove' \| 'uploaded' }) => void`
trigger on waiting upload files changed | N ### UploadInstanceFunctions 组件实例方法 diff --git a/packages/components/upload/upload.md b/packages/components/upload/upload.md index 39c0d48fc8..cb9dccc3c2 100644 --- a/packages/components/upload/upload.md +++ b/packages/components/upload/upload.md @@ -14,59 +14,59 @@ allowUploadDuplicateFile | Boolean | false | 是否允许重复上传相同文 autoUpload | Boolean | true | 是否在选择文件后自动发起请求上传文件 | N beforeAllFilesUpload | Function | - | 如果是自动上传模式 `autoUpload=true`，表示全部文件上传之前的钩子函数，函数参数为上传的文件，函数返回值决定是否继续上传，若返回值为 `false` 则终止上传。
如果是非自动上传模式 `autoUpload=false`，则函数返回值为 `false` 时表示本次选中的文件不会加入到文件列表中，即不触发 `onChange` 事件。TS 类型：`(file: UploadFile[]) => boolean \| Promise` | N beforeUpload | Function | - | 如果是自动上传模式 `autoUpload=true`，表示单个文件上传之前的钩子函数，若函数返回值为 `false` 则表示不上传当前文件。
如果是非自动上传模式 `autoUpload=false`，函数返回值为 `false` 时表示从上传文件中剔除当前文件。TS 类型：`(file: UploadFile) => boolean \| Promise` | N -cancelUploadButton | TNode | - | 批量文件/图片上传，`autoUpload=false` 场景下，透传“取消上传”按钮属性。TS 类型：`null \| ButtonProps \| TNode<{ disabled: boolean; cancelUploadText: string; cancelUpload: (ctx: { e: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -children | TNode | - | 非拖拽场景，指触发上传的元素，如：“选择文件”。如果是拖拽场景，则是指拖拽区域。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +cancelUploadButton | TNode | - | 批量文件/图片上传，`autoUpload=false` 场景下，透传“取消上传”按钮属性。TS 类型：`null \| ButtonProps \| TNode<{ disabled: boolean; cancelUploadText: string; cancelUpload: (ctx: { e: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +children | TNode | - | 非拖拽场景，指触发上传的元素，如：“选择文件”。如果是拖拽场景，则是指拖拽区域。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N data | Object | - | 上传请求所需的额外字段，默认字段有 `file`，表示文件信息。可以添加额外的文件名字段，如：`{file_name: "custom-file-name.txt"}`。`autoUpload=true` 时有效。也可以使用 `formatRequest` 完全自定义上传请求的字段。TS 类型：`Record \| ((files: UploadFile[]) => Record)` | N disabled | Boolean | - | 是否禁用 | N -dragContent | TNode | - | 用于自定义拖拽区域，`theme=custom` 且 `draggable=true` 时有效。TS 类型：`TNode \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +dragContent | TNode | - | 用于自定义拖拽区域，`theme=custom` 且 `draggable=true` 时有效。TS 类型：`TNode \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N draggable | Boolean | undefined | 是否启用拖拽上传，不同的组件风格默认值不同。`theme=file` 或 `theme=image` 时有效 | N -fileListDisplay | TElement | - | 用于完全自定义文件列表界面内容(UI)，单文件和多文件均有效。TS 类型：`TNode<{ files: UploadFile[]; dragEvents?: UploadDisplayDragEvents }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +fileListDisplay | TElement | - | 用于完全自定义文件列表界面内容(UI)，单文件和多文件均有效。TS 类型：`TNode<{ files: UploadFile[]; dragEvents?: UploadDisplayDragEvents }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N files | Array | [] | 已上传文件列表，同 `value`。TS 类型：`UploadFile`。TS 类型：`Array` | N defaultFiles | Array | [] | 已上传文件列表，同 `value`。TS 类型：`UploadFile`。非受控属性。TS 类型：`Array` | N format | Function | - | 转换文件 `UploadFile` 的数据结构，可新增或修改 `UploadFile` 的属性，注意不能删除 `UploadFile` 属性。`action` 存在时有效。TS 类型：`(file: File) => UploadFile` | N formatRequest | Function | - | 用于新增或修改文件上传请求 参数。`action` 存在时有效。一个请求上传一个文件时，默认请求字段有 `file`。
一个请求上传多个文件时，默认字段有 `file[0]/file[1]/file[2]/.../length`，其中 `length` 表示本次上传的文件数量。
⚠️非常注意，此处的 `file[0]/file[1]` 仅仅是一个字段名，并非表示 `file` 是一个数组，接口获取字段时注意区分。
可以使用 `name` 定义 `file` 字段的别名。
也可以使用 `formatRequest` 自定义任意字段，如添加一个字段 `fileList` ，存储文件数组。TS 类型：`(requestData: { [key: string]: any }) => { [key: string]: any }` | N -formatResponse | Function | - | 用于格式化文件上传后的接口响应数据，`response` 便是接口响应的原始数据。`action` 存在时有效。
示例返回值：`{ error, url, status, files }`
此函数的返回值 `error` 会作为错误文本提醒，表示上传失败的原因，如果存在会判定为本次上传失败。
此函数的返回值 `url` 会作为单个文件上传成功后的链接。
`files` 表示一个请求同时上传多个文件后的文件列表。TS 类型：`(response: any, context: FormatResponseContext) => ResponseType ` `type ResponseType = { error?: string; url?: string; status?: 'fail' \| 'success'; files?: UploadFile[] } & Record` `interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N +formatResponse | Function | - | 用于格式化文件上传后的接口响应数据，`response` 便是接口响应的原始数据。`action` 存在时有效。
示例返回值：`{ error, url, status, files }`
此函数的返回值 `error` 会作为错误文本提醒，表示上传失败的原因，如果存在会判定为本次上传失败。
此函数的返回值 `url` 会作为单个文件上传成功后的链接。
`files` 表示一个请求同时上传多个文件后的文件列表。TS 类型：`(response: any, context: FormatResponseContext) => ResponseType ` `type ResponseType = { error?: string; url?: string; status?: 'fail' \| 'success'; files?: UploadFile[] } & Record` `interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts) | N headers | Object | - | 设置上传的请求头部，`action` 存在时有效。TS 类型：`{[key: string]: string}` | N imageProps | Object | - | 用于在上传图片场景下，透传属性配置至 Image 组件 | N -imageViewerProps | Object | - | 透传图片预览组件全部属性。TS 类型：`ImageViewerProps`，[ImageViewer API Documents](./image-viewer?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N +imageViewerProps | Object | - | 透传图片预览组件全部属性。TS 类型：`ImageViewerProps`，[ImageViewer API Documents](./image-viewer?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts) | N inputAttributes | Object | - | 用于添加属性到 HTML 元素 `input`。TS 类型：`CSSProperties` | N isBatchUpload | Boolean | false | 多个文件是否作为一个独立文件包，整体替换，整体删除。不允许追加文件，只允许替换文件。`theme=file-flow` 时有效 | N -locale | Object | - | 上传组件文本语言配置，支持自定义配置组件中的全部文本。优先级高于全局配置中语言。TS 类型：`UploadConfig` `import { UploadConfig } from '../config-provider/type'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N +locale | Object | - | 上传组件文本语言配置，支持自定义配置组件中的全部文本。优先级高于全局配置中语言。TS 类型：`UploadConfig` `import { UploadConfig } from '../config-provider/type'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts) | N max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制。注意，单文件上传场景，请勿设置 `max` 属性 | N method | String | POST | HTTP 请求类型。可选项：POST/GET/PUT/OPTIONS/PATCH/post/get/put/options/patch | N mockProgressDuration | Number | - | 模拟进度间隔时间，单位：毫秒，默认：300。由于原始的上传请求，小文件上传进度只有 0 和 100，故而新增模拟进度，每间隔 `mockProgressDuration` 毫秒刷新一次模拟进度。小文件设置小一点，大文件设置大一点。注意：当 `useMockProgress` 为真时，当前设置有效 | N multiple | Boolean | false | 支持多文件上传 | N name | String | file | 文件上传时的名称 | N placeholder | String | - | 占位符 | N -requestMethod | Function | - | 自定义上传方法。返回值 `status` 表示上传成功或失败；`error` 或 `response.error` 表示上传失败的原因；
`response` 表示请求上传成功后的返回数据，`response.url` 表示上传成功后的图片/文件地址，`response.files` 表示一个请求上传多个文件/图片后的返回值。
示例一：`{ status: 'fail', error: '上传失败', response }`。
示例二：`{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }`。
示例三：`{ status: 'success', files: [{ url: 'https://xxx.png', name: 'xxx.png' }]}`。TS 类型：`(files: UploadFile \| UploadFile[]) => Promise` `interface RequestMethodResponse { status: 'success' \| 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N +requestMethod | Function | - | 自定义上传方法。返回值 `status` 表示上传成功或失败；`error` 或 `response.error` 表示上传失败的原因；
`response` 表示请求上传成功后的返回数据，`response.url` 表示上传成功后的图片/文件地址，`response.files` 表示一个请求上传多个文件/图片后的返回值。
示例一：`{ status: 'fail', error: '上传失败', response }`。
示例二：`{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }`。
示例三：`{ status: 'success', files: [{ url: 'https://xxx.png', name: 'xxx.png' }]}`。TS 类型：`(files: UploadFile \| UploadFile[]) => Promise` `interface RequestMethodResponse { status: 'success' \| 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts) | N showImageFileName | Boolean | true | 是否显示图片的文件名称 | N showThumbnail | Boolean | false | 是否在文件列表中显示缩略图，`theme=file-flow` 时有效 | N showUploadProgress | Boolean | true | 是否显示上传进度 | N -sizeLimit | Number / Object | - | 图片文件大小限制，默认单位 KB。可选单位有：`'B' \| 'KB' \| 'MB' \| 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`。TS 类型：`number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N +sizeLimit | Number / Object | - | 图片文件大小限制，默认单位 KB。可选单位有：`'B' \| 'KB' \| 'MB' \| 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`。TS 类型：`number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts) | N status | String | - | 文件上传提示文本状态。可选项：default/success/warning/error | N theme | String | file | 组件风格。custom 表示完全自定义风格；file 表示默认文件上传风格；file-input 表示输入框形式的文件上传；file-flow 表示文件批量上传；image 表示默认图片上传风格；image-flow 表示图片批量上传。可选项：custom/file/file-input/file-flow/image/image-flow | N -tips | TNode | - | 组件下方文本提示，可以使用 `status` 定义文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -trigger | TElement | - | 触发上传的元素，`files` 指本次显示的全部文件。TS 类型：`TNode` `interface TriggerContext { dragActive?: boolean; files: UploadFile[] }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N -triggerButtonProps | Object | - | 透传选择按钮全部属性。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N +tips | TNode | - | 组件下方文本提示，可以使用 `status` 定义文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +trigger | TElement | - | 触发上传的元素，`files` 指本次显示的全部文件。TS 类型：`TNode` `interface TriggerContext { dragActive?: boolean; files: UploadFile[] }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts) | N +triggerButtonProps | Object | - | 透传选择按钮全部属性。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts) | N uploadAllFilesInOneRequest | Boolean | false | 是否在同一个请求中上传全部文件，默认一个请求上传一个文件。多文件上传时有效 | N -uploadButton | TNode | - | 批量文件/图片上传，`autoUpload=false` 场景下，透传“点击上传”按钮属性。TS 类型：`null \| ButtonProps \| TNode<{ disabled: boolean; uploading: boolean; uploadFiles: () => void; uploadText: string }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +uploadButton | TNode | - | 批量文件/图片上传，`autoUpload=false` 场景下，透传“点击上传”按钮属性。TS 类型：`null \| ButtonProps \| TNode<{ disabled: boolean; uploading: boolean; uploadFiles: () => void; uploadText: string }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N uploadPastedFiles | Boolean | true | 是否允许粘贴上传剪贴板中的文件 | N useMockProgress | Boolean | true | 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传。 | N withCredentials | Boolean | false | 上传请求时是否携带 cookie | N onCancelUpload | Function | | TS 类型：`() => void`
点击「取消上传」时触发 | N -onChange | Function | | TS 类型：`(value: Array, context: UploadChangeContext) => void`
已上传文件列表发生变化时触发，`trigger` 表示触发本次的来源。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts)。
`interface UploadChangeContext { e?: MouseEvent \| ProgressEvent; response?: any; trigger: UploadChangeTrigger; index?: number; file?: UploadFile; files?: UploadFile[] }`

`type UploadChangeTrigger = 'add' \| 'remove' \| 'abort' \| 'progress-success' \| 'progress' \| 'progress-fail' \| 'default'`
| N +onChange | Function | | TS 类型：`(value: Array, context: UploadChangeContext) => void`
已上传文件列表发生变化时触发，`trigger` 表示触发本次的来源。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts)。
`interface UploadChangeContext { e?: MouseEvent \| ProgressEvent; response?: any; trigger: UploadChangeTrigger; index?: number; file?: UploadFile; files?: UploadFile[] }`

`type UploadChangeTrigger = 'add' \| 'remove' \| 'abort' \| 'progress-success' \| 'progress' \| 'progress-fail' \| 'default'`
| N onDragenter | Function | | TS 类型：`(context: { e: DragEvent }) => void`
进入拖拽区域时触发 | N onDragleave | Function | | TS 类型：`(context: { e: DragEvent }) => void`
离开拖拽区域时触发 | N onDrop | Function | | TS 类型：`(context: { e: DragEvent }) => void`
拖拽结束时触发 | N -onFail | Function | | TS 类型：`(options: UploadFailContext) => void`
上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景，请到事件 `onOneFileFail` 中查看 `response`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts)。
`interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}`
| N +onFail | Function | | TS 类型：`(options: UploadFailContext) => void`
上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景，请到事件 `onOneFileFail` 中查看 `response`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts)。
`interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}`
| N onOneFileFail | Function | | TS 类型：`(options: UploadFailContext) => void`
多文件/图片场景下，单个文件上传失败后触发，如果一个请求上传一个文件，则会触发多次。单文件/图片不会触发 | N onOneFileSuccess | Function | | TS 类型：`(context: Pick) => void`
单个文件上传成功后触发，在多文件场景下会触发多次。`context.file` 表示当前上传成功的单个文件，`context.response` 表示上传请求的返回数据 | N onPreview | Function | | TS 类型：`(options: { file: UploadFile; index: number; e: MouseEvent }) => void`
点击图片预览时触发，文件没有预览 | N -onProgress | Function | | TS 类型：`(options: ProgressContext) => void`
上传进度变化时触发，真实进度和模拟进度都会触发。
⚠️ 原始上传请求，小文件的上传进度只有 0 和 100，故而不会触发 `progress` 事件；只有大文件才有真实的中间进度。如果你希望很小的文件也显示上传进度，保证 `useMockProgress=true` 的情况下，设置 `mockProgressDuration` 为更小的值。
参数 `options.type=real` 表示真实上传进度，`options.type=mock` 表示模拟上传进度。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts)。
`interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }`

`type UploadProgressType = 'real' \| 'mock'`
| N -onRemove | Function | | TS 类型：`(context: UploadRemoveContext) => void`
移除文件时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts)。
`interface UploadRemoveContext { index?: number; file?: UploadFile; e: MouseEvent }`
| N -onSelectChange | Function | | TS 类型：`(files: File[], context: UploadSelectChangeContext) => void`
选择文件或图片之后，上传之前，触发该事件。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts)。
`interface UploadSelectChangeContext { currentSelectedFiles: UploadFile[] }`
| N -onSuccess | Function | | TS 类型：`(context: SuccessContext) => void`
上传成功后触发。
`context.currentFiles` 表示当次请求上传的文件（无论成功或失败），`context.fileList` 表示上传成功后的文件，`context.response` 表示上传请求的返回数据。
`context.results` 表示单次选择全部文件上传成功后的响应结果，可以在这个字段存在时提醒用户上传成功或失败。
。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts)。
`interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; currentFiles?: UploadFile[]; response?: any; results?: SuccessContext[]; XMLHttpRequest?: XMLHttpRequest }`
| N -onValidate | Function | | TS 类型：`(context: { type: UploadValidateType, files: UploadFile[] }) => void`
文件上传校验结束事件，文件数量超出、文件大小超出限制、文件同名、`beforeAllFilesUpload` 返回值为假、`beforeUpload` 返回值为假等场景会触发。
注意：如果设置允许上传同名文件，即 `allowUploadDuplicateFile=true`，则不会因为文件重名触发该事件。
结合 `status` 和 `tips` 可以在组件中呈现不同类型的错误（或告警）提示。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts)。
`type UploadValidateType = 'FILE_OVER_SIZE_LIMIT' \| 'FILES_OVER_LENGTH_LIMIT' \| 'FILTER_FILE_SAME_NAME' \| 'BEFORE_ALL_FILES_UPLOAD' \| 'CUSTOM_BEFORE_UPLOAD'`
| N +onProgress | Function | | TS 类型：`(options: ProgressContext) => void`
上传进度变化时触发，真实进度和模拟进度都会触发。
⚠️ 原始上传请求，小文件的上传进度只有 0 和 100，故而不会触发 `progress` 事件；只有大文件才有真实的中间进度。如果你希望很小的文件也显示上传进度，保证 `useMockProgress=true` 的情况下，设置 `mockProgressDuration` 为更小的值。
参数 `options.type=real` 表示真实上传进度，`options.type=mock` 表示模拟上传进度。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts)。
`interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }`

`type UploadProgressType = 'real' \| 'mock'`
| N +onRemove | Function | | TS 类型：`(context: UploadRemoveContext) => void`
移除文件时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts)。
`interface UploadRemoveContext { index?: number; file?: UploadFile; e: MouseEvent }`
| N +onSelectChange | Function | | TS 类型：`(files: File[], context: UploadSelectChangeContext) => void`
选择文件或图片之后，上传之前，触发该事件。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts)。
`interface UploadSelectChangeContext { currentSelectedFiles: UploadFile[] }`
| N +onSuccess | Function | | TS 类型：`(context: SuccessContext) => void`
上传成功后触发。
`context.currentFiles` 表示当次请求上传的文件（无论成功或失败），`context.fileList` 表示上传成功后的文件，`context.response` 表示上传请求的返回数据。
`context.results` 表示单次选择全部文件上传成功后的响应结果，可以在这个字段存在时提醒用户上传成功或失败。
。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts)。
`interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; currentFiles?: UploadFile[]; response?: any; results?: SuccessContext[]; XMLHttpRequest?: XMLHttpRequest }`
| N +onValidate | Function | | TS 类型：`(context: { type: UploadValidateType, files: UploadFile[] }) => void`
文件上传校验结束事件，文件数量超出、文件大小超出限制、文件同名、`beforeAllFilesUpload` 返回值为假、`beforeUpload` 返回值为假等场景会触发。
注意：如果设置允许上传同名文件，即 `allowUploadDuplicateFile=true`，则不会因为文件重名触发该事件。
结合 `status` 和 `tips` 可以在组件中呈现不同类型的错误（或告警）提示。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/upload/type.ts)。
`type UploadValidateType = 'FILE_OVER_SIZE_LIMIT' \| 'FILES_OVER_LENGTH_LIMIT' \| 'FILTER_FILE_SAME_NAME' \| 'BEFORE_ALL_FILES_UPLOAD' \| 'CUSTOM_BEFORE_UPLOAD'`
| N onWaitingUploadFilesChange | Function | | TS 类型：`(context: { files: Array, trigger: 'validate' \| 'remove' \| 'uploaded' }) => void`
待上传文件列表发生变化时触发。`context.files` 表示事件参数为待上传文件，`context.trigger` 引起此次变化的触发来源 | N ### UploadInstanceFunctions 组件实例方法 diff --git a/packages/components/watermark/watermark.en-US.md b/packages/components/watermark/watermark.en-US.md index 7840259d9d..6af9f854bf 100644 --- a/packages/components/watermark/watermark.en-US.md +++ b/packages/components/watermark/watermark.en-US.md @@ -9,8 +9,8 @@ name | type | default | description | required className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N alpha | Number | 1 | \- | N -children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N height | Number | - | \- | N isRepeat | Boolean | true | \- | N lineSpace | Number | 16 | \- | N diff --git a/packages/components/watermark/watermark.md b/packages/components/watermark/watermark.md index 156e34dce1..481955d027 100644 --- a/packages/components/watermark/watermark.md +++ b/packages/components/watermark/watermark.md @@ -8,8 +8,8 @@ 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-react/blob/develop/src/common.ts) | N -content | TNode | - | 水印所覆盖的内容节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 水印所覆盖的内容节点，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 水印所覆盖的内容节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N height | Number | - | 水印高度 | N isRepeat | Boolean | true | 水印是否重复出现 | N lineSpace | Number | 16 | 行间距，只作用在多行（`content` 配置为数组）情况下 | N