diff --git a/src/action-sheet/props.ts b/src/action-sheet/props.ts index 25985c184..cceef789e 100644 --- a/src/action-sheet/props.ts +++ b/src/action-sheet/props.ts @@ -14,7 +14,7 @@ const props: TdActionSheetProps = { /** 设置取消按钮的文本 */ cancelText: { type: String, - value: '取消', + value: '', }, /** 设置每页展示菜单的数量，仅当 type=grid 时有效 */ count: { @@ -29,6 +29,7 @@ const props: TdActionSheetProps = { /** 菜单项 */ items: { type: Array, + required: true, }, /** popupProps透传 */ popupProps: { @@ -50,15 +51,22 @@ const props: TdActionSheetProps = { type: String, value: 'list', }, + /** 是否使用了自定义导航栏 */ + usingCustomNavbar: { + type: Boolean, + value: false, + }, /** 显示与隐藏 */ visible: { type: Boolean, value: null, + required: true, }, /** 显示与隐藏，非受控属性 */ defaultVisible: { type: Boolean, value: false, + required: true, }, }; diff --git a/src/action-sheet/type.ts b/src/action-sheet/type.ts index 256409c19..c241ab81c 100644 --- a/src/action-sheet/type.ts +++ b/src/action-sheet/type.ts @@ -45,6 +45,7 @@ export interface TdActionSheetProps { items: { type: ArrayConstructor; value?: Array; + required?: boolean; }; /** * popupProps透传 @@ -93,6 +94,7 @@ export interface TdActionSheetProps { visible: { type: BooleanConstructor; value?: boolean; + required?: boolean; }; /** * 显示与隐藏，非受控属性 @@ -101,6 +103,7 @@ export interface TdActionSheetProps { defaultVisible: { type: BooleanConstructor; value?: boolean; + required?: boolean; }; } diff --git a/src/avatar-group/type.ts b/src/avatar-group/type.ts index 4d0050e1a..247e868bd 100644 --- a/src/avatar-group/type.ts +++ b/src/avatar-group/type.ts @@ -7,7 +7,7 @@ export interface TdAvatarGroupProps { /** * 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上 - * @default 'right-up' + * @default 'left-up' */ cascading?: { type: StringConstructor; @@ -20,14 +20,6 @@ export interface TdAvatarGroupProps { type: StringConstructor; value?: string; }; - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; /** * 组件类名，用于设置组件外层元素类名 */ diff --git a/src/avatar/README.en-US.md b/src/avatar/README.en-US.md index b0d8df223..f28af33a0 100644 --- a/src/avatar/README.en-US.md +++ b/src/avatar/README.en-US.md @@ -1,39 +1,65 @@ :: BASE_DOC :: ## API + ### Avatar Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N alt | String | - | show it when url is not valid | N badge-props | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N bordered | Boolean | false | \- | N -external-classes | Array | - | `['t-class', 't-class-image', 't-class-icon', 't-class-alt', 't-class-content']` | N hide-on-load-failed | Boolean | false | hide image when loading image failed | N icon | String / Object | - | \- | N image | String | - | images url | N -image-props | Object | - | \- | N -shape | String | circle | shape。options：circle/round。Typescript：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N +image-props | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/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-miniprogram/tree/develop/src/avatar/type.ts) | N size | String | medium | size | N ### Avatar Events name | params | description -- | -- | -- -error | \- | trigger on image load failed +error | - | trigger on image load failed +### Avatar External Classes + +className | Description +-- | -- +t-class | \- +t-class-alt | \- +t-class-content | \- +t-class-icon | \- +t-class-image | \- + ### AvatarGroup Props name | type | default | description | required -- | -- | -- | -- | -- -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-miniprogram/tree/develop/src/avatar-group/type.ts) | N -collapse-avatar | String / Slot | - | \- | N -external-classes | Array | - | `['t-class', 't-class-image', 't-class-content']` | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +cascading | String | 'left-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-miniprogram/tree/develop/src/avatar-group/type.ts) | N +collapse-avatar | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N max | Number | - | \- | N size | String | medium | size | N +### AvatarGroup Events + +name | params | description +-- | -- | -- +collapsed-item-click | - | \- +### AvatarGroup External Classes + +className | Description +-- | -- +t-class | \- +t-class-content | \- +t-class-image | \- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -57,4 +83,4 @@ Name | Default Value | Description --td-avatar-small-width | 80rpx | - --td-avatar-text-large-font-size | 16px | - --td-avatar-text-medium-font-size | @font-size-base | - ---td-avatar-text-small-font-size | @font-size-s | - +--td-avatar-text-small-font-size | @font-size-s | - \ No newline at end of file diff --git a/src/avatar/README.md b/src/avatar/README.md index dc1d3eca4..d72933e78 100644 --- a/src/avatar/README.md +++ b/src/avatar/README.md @@ -61,17 +61,20 @@ isComponent: true {{ size }} ## API + ### Avatar Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N badge-props | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N bordered | Boolean | false | 已废弃。是否显示外边框 | N hide-on-load-failed | Boolean | false | 加载失败时隐藏图片 | N icon | String / Object | - | 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N image | String | - | 图片地址 | N -image-props | Object | - | 透传至 Image 组件 | N +image-props | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等 | N @@ -79,34 +82,44 @@ size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等 | 名称 | 参数 | 描述 -- | -- | -- -error | \- | 图片加载失败时触发 +error | - | 图片加载失败时触发 +### Avatar External Classes -### Avatar 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 -t-class-image | 图片样式类 -t-class-icon | 图标样式类 t-class-alt | 替代文本样式类 t-class-content | 内容样式类 +t-class-icon | 图标样式类 +t-class-image | 图片样式类 + ### AvatarGroup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N cascading | String | 'left-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar-group/type.ts) | N -collapse-avatar | String / Slot | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多` | N +collapse-avatar | String / Slot | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N max | Number | - | 能够同时显示的最多头像数量 | N size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N -### AvatarGroup 外部样式类 -类名 | 说明 --- | -- +### AvatarGroup Events + +名称 | 参数 | 描述 +-- | -- | -- +collapsed-item-click | - | 点击头像折叠元素触发 +### AvatarGroup External Classes + +类名 | 描述 +-- | -- t-class | 根节点样式类 -t-class-image | 图片样式类 t-class-content | 内容样式类 +t-class-image | 图片样式类 + +### CSS Variables -### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -130,4 +143,4 @@ t-class-content | 内容样式类 --td-avatar-small-width | 80rpx | - --td-avatar-text-large-font-size | 16px | - --td-avatar-text-medium-font-size | @font-size-base | - ---td-avatar-text-small-font-size | @font-size-s | - +--td-avatar-text-small-font-size | @font-size-s | - \ No newline at end of file diff --git a/src/avatar/props.ts b/src/avatar/props.ts index 9ed033065..f48417a0a 100644 --- a/src/avatar/props.ts +++ b/src/avatar/props.ts @@ -15,7 +15,7 @@ const props: TdAvatarProps = { badgeProps: { type: Object, }, - /** 是否显示外边框 */ + /** 已废弃。是否显示外边框 */ bordered: { type: Boolean, value: false, diff --git a/src/avatar/type.ts b/src/avatar/type.ts index f17904b9f..a36794549 100644 --- a/src/avatar/type.ts +++ b/src/avatar/type.ts @@ -5,6 +5,7 @@ * */ import { BadgeProps } from '../badge/index'; +import { ImageProps } from '../image/index'; export interface TdAvatarProps { /** @@ -23,21 +24,13 @@ export interface TdAvatarProps { value?: BadgeProps; }; /** - * 是否显示外边框 + * 已废弃。是否显示外边框 * @default false */ bordered?: { type: BooleanConstructor; value?: boolean; }; - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; /** * 组件类名，用于设置组件外层元素类名 */ @@ -73,7 +66,7 @@ export interface TdAvatarProps { */ imageProps?: { type: ObjectConstructor; - value?: object; + value?: ImageProps; }; /** * 形状 diff --git a/src/back-top/README.en-US.md b/src/back-top/README.en-US.md index 88439ff91..558178c1e 100644 --- a/src/back-top/README.en-US.md +++ b/src/back-top/README.en-US.md @@ -6,22 +6,30 @@ name | type | default | description | required -- | -- | -- | -- | -- -external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N -visibility-height | Number | 200 | \- | N -scroll-top | Number | 0 | \- | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N fixed | Boolean | true | \- | N -icon | String / Boolean / Object / Slot | - | \- | N +icon | String / Boolean / Object / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +scroll-top | Number | 0 | \- | N text | String | '' | \- | N -theme | String | round | options：round/half-round/round-dark/half-round-dark | N +theme | String | round | options: round/half-round/round-dark/half-round-dark | N +visibility-height | Number | 200 | \- | N ### BackTop Events name | params | description -- | -- | -- to-top | \- | \- +### BackTop External Classes +className | Description +-- | -- +t-class | \- +t-class-icon | \- +t-class-text | \- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -30,4 +38,4 @@ Name | Default Value | Description --td-back-top-round-border-radius | @radius-circle | - --td-back-top-round-color | @font-gray-1 | - --td-back-top-round-dark-bg-color | @gray-color-14 | - ---td-back-top-round-dark-color | @font-white-1 | - +--td-back-top-round-dark-color | @font-white-1 | - \ No newline at end of file diff --git a/src/back-top/README.md b/src/back-top/README.md index 923dd5c03..50b2c2868 100644 --- a/src/back-top/README.md +++ b/src/back-top/README.md @@ -32,32 +32,35 @@ isComponent: true {{ base }} ## API + ### BackTop Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -external-classes | Array | - | 组件类名，分别用于设置外层元素、图标、文本内容等元素类名。`['t-class', 't-class-icon', 't-class-text']` | N -visibility-height | Number | 200 | 滚动高度达到此参数值才出现 | N -scroll-top | Number | 0 | 页面滚动距离 | N +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N -icon | String / Boolean / Object / Slot | true | 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'` | N +icon | String / Boolean / Object / Slot | true | 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +scroll-top | Number | 0 | 页面滚动距离 | N text | String | '' | 文案 | N theme | String | round | 预设的样式类型。可选项：round/half-round/round-dark/half-round-dark | N +visibility-height | Number | 200 | 滚动高度达到此参数值才出现 | N ### BackTop Events 名称 | 参数 | 描述 -- | -- | -- to-top | \- | 点击触发 +### BackTop External Classes -### BackTop 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 t-class-icon | 图标样式类 t-class-text | 文本样式类 -### CSS 变量 +### CSS Variables + 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -66,4 +69,4 @@ t-class-text | 文本样式类 --td-back-top-round-border-radius | @radius-circle | - --td-back-top-round-color | @font-gray-1 | - --td-back-top-round-dark-bg-color | @gray-color-14 | - ---td-back-top-round-dark-color | @font-white-1 | - +--td-back-top-round-dark-color | @font-white-1 | - \ No newline at end of file diff --git a/src/back-top/props.ts b/src/back-top/props.ts index 43127ddac..abdacbaf8 100644 --- a/src/back-top/props.ts +++ b/src/back-top/props.ts @@ -6,30 +6,26 @@ import { TdBackTopProps } from './type'; const props: TdBackTopProps = { - /** 组件类名，分别用于设置外层元素、图标、文本内容等元素类名 */ - externalClasses: { - type: Array, - }, - /** 滚动高度达到此参数值才出现 */ - visibilityHeight: { - type: Number, - value: 200, - }, - /** 页面滚动距离 */ - scrollTop: { - type: Number, - value: 0, - }, /** 是否绝对定位固定到屏幕右下方 */ fixed: { type: Boolean, value: true, }, - /** 图标 */ + /** 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'` */ icon: { type: null, value: true, }, + /** 页面滚动距离 */ + scrollTop: { + type: Number, + value: 0, + }, + /** 自定义组件样式 */ + style: { + type: String, + value: '', + }, /** 文案 */ text: { type: String, @@ -40,6 +36,11 @@ const props: TdBackTopProps = { type: String, value: 'round', }, + /** 滚动高度达到此参数值才出现 */ + visibilityHeight: { + type: Number, + value: 200, + }, }; export default props; diff --git a/src/back-top/type.ts b/src/back-top/type.ts index e4d2601bb..21196e2d2 100644 --- a/src/back-top/type.ts +++ b/src/back-top/type.ts @@ -6,49 +6,36 @@ export interface TdBackTopProps { /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; - /** - * 组件类名，分别用于设置外层元素、图标、文本内容等元素类名 + * 是否绝对定位固定到屏幕右下方 + * @default true */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-icon', 't-class-text']; + fixed?: { + type: BooleanConstructor; + value?: boolean; }; /** - * 滚动高度达到此参数值才出现 + * 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'` + * @default true */ - visibilityHeight?: { - type: NumberConstructor; - value?: 200; + icon?: { + type: null; + value?: string | boolean | object; }; /** * 页面滚动距离 + * @default 0 */ scrollTop?: { type: NumberConstructor; - value: 0; + value?: number; }; /** - * 是否绝对定位固定到屏幕右下方 - * @default true - */ - fixed?: { - type: BooleanConstructor; - value?: boolean; - }; - /** - * 图标 - * @default true + * 自定义组件样式 + * @default '' */ - icon?: { - type: null; - value?: boolean | string | object; + style?: { + type: StringConstructor; + value?: string; }; /** * 文案 @@ -66,4 +53,12 @@ export interface TdBackTopProps { type: StringConstructor; value?: 'round' | 'half-round' | 'round-dark' | 'half-round-dark'; }; + /** + * 滚动高度达到此参数值才出现 + * @default 200 + */ + visibilityHeight?: { + type: NumberConstructor; + value?: number; + }; } diff --git a/src/badge/README.en-US.md b/src/badge/README.en-US.md index 0c39ca648..05103dcf9 100644 --- a/src/badge/README.en-US.md +++ b/src/badge/README.en-US.md @@ -1,23 +1,32 @@ :: BASE_DOC :: ## API + ### Badge Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N color | String | - | \- | N content | String | - | \- | N count | String / Number / Slot | 0 | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N dot | Boolean | false | \- | N -external-classes | Array | - | `['t-class', 't-class-content', 't-class-count']` | N max-count | Number | 99 | \- | N offset | Array | - | Typescript：`Array` | N -shape | String | circle | options：circle/square/bubble/ribbon | N +shape | String | circle | options: circle/square/bubble/ribbon | N show-zero | Boolean | false | \- | N -size | String | medium | options：medium/large | N +size | String | medium | options: medium/large | N +### Badge External Classes +className | Description +-- | -- +t-class | \- +t-class-content | \- +t-class-count | \- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -33,4 +42,4 @@ Name | Default Value | Description --td-badge-large-font-size | @font-size-s | - --td-badge-large-height | 40rpx | - --td-badge-large-padding | 10rpx | - ---td-badge-text-color | @font-white-1 | - +--td-badge-text-color | @font-white-1 | - \ No newline at end of file diff --git a/src/badge/README.md b/src/badge/README.md index 7d111c67c..84db084b0 100644 --- a/src/badge/README.md +++ b/src/badge/README.md @@ -37,10 +37,13 @@ isComponent: true {{ size }} ## API + ### Badge Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N color | String | - | 颜色 | N content | String | - | 徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义 | N count | String / Number / Slot | 0 | 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N @@ -50,15 +53,16 @@ offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['1 shape | String | circle | 形状。可选项：circle/square/bubble/ribbon | N show-zero | Boolean | false | 当数值为 0 时，是否展示徽标 | N size | String | medium | 尺寸。可选项：medium/large | N +### Badge External Classes -### Badge 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 -t-class-count | 计数样式类 t-class-content | 内容样式类 +t-class-count | 计数样式类 + +### CSS Variables -### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -74,4 +78,4 @@ t-class-content | 内容样式类 --td-badge-large-font-size | @font-size-s | - --td-badge-large-height | 40rpx | - --td-badge-large-padding | 10rpx | - ---td-badge-text-color | @font-white-1 | - +--td-badge-text-color | @font-white-1 | - \ No newline at end of file diff --git a/src/button/README.en-US.md b/src/button/README.en-US.md index 3fcf4e2ee..1f9a820bf 100644 --- a/src/button/README.en-US.md +++ b/src/button/README.en-US.md @@ -66,62 +66,69 @@ For global import, configure it in `app.json` in the root directory of the minip ## API + ### Button Props name | type | default | description | required -- | -- | -- | -- | -- -t-id | String | - | button tag id | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +app-parameter | String | - | \- | N block | Boolean | false | make button to be a block-level element | N -content | String / Slot | - | button's children elements | N +content | String / Slot | - | button's children elements。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N custom-dataset | Object | - | Typescript：`any` | N -disabled | Boolean | false | disable the button, make it can not be clicked | N -external-classes | Array | - | `['t-class', 't-class-icon', 't-class-loading']` | N +disabled | Boolean | undefined | disable the button, make it can not be clicked | N ghost | Boolean | false | make background-color to be transparent | N +hover-class | String | - | \- | N +hover-start-time | Number | 20 | \- | N +hover-stay-time | Number | 70 | \- | N +hover-stop-propagation | Boolean | false | \- | N icon | String / Object | - | icon name | N +lang | String | - | message language。options: en/zh_CN/zh_TW | N loading | Boolean | false | set button to be loading state | N loading-props | Object | - | Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/button/type.ts) | 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` | N -suffix | Slot | - | \- | N -theme | String | default | button theme。options：default/primary/danger | N -type | String | - | type of button element, same as formType of Miniprogram。options：submit/reset | N -variant | String | base | button variant。options：base/outline/text | N -open-type | String | - | options：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N -hover-stop-propagation | Boolean | false | \- | N -hover-start-time | Number | 20 | \- | N -hover-stay-time | Number | 70 | \- | N -lang | String | en | options：en/zh_CN/zh_TW | N -session-from | String | - | \- | N -send-message-title | String | 当前标题 | \- | N -send-message-path | String | 当前分享路径 | \- | N +open-type | String | - | open type of button, [Miniprogram Button](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。options: contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N +phone-number-no-quota-toast | Boolean | true | \- | N send-message-img | String | 截图 | \- | N -app-parameter | String | - | \- | N +send-message-path | String | 当前分享路径 | \- | N +send-message-title | String | 当前标题 | \- | N +session-from | String | - | \- | N +shape | String | rectangle | button shape。options: rectangle/square/round/circle | N show-message-card | Boolean | false | \- | N -bindgetuserinfo | Eventhandle | - | \- | N -bindcontact | Eventhandle | - | \- | N -bindgetphonenumber | Eventhandle | - | \- | N -binderror | Eventhandle | - | \- | N -bindopensetting | Eventhandle | - | \- | N -bindlaunchapp | Eventhandle | - | \- | N -bindchooseavatar | Eventhandle | - | \- | N -bindagreeprivacyauthorization | Eventhandle | - | \-| N +size | String | medium | a button has four size。options: extra-small/small/medium/large | N +suffix | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +t-id | String | - | id | N +theme | String | default | button theme。options: default/primary/danger/light | N +type | String | - | type of button element, same as formType of Miniprogram。options: submit/reset | N +variant | String | base | variant of button。options: base/outline/dashed/text | N ### Button Events name | params | description -- | -- | -- -tap | `(e: MouseEvent)` | trigger on click - - -### Button ExternalClasses -类名 | 说明 --- | -- -t-class | root -t-class-icon | icon node -t-class-loading | loading node - +agreeprivacyauthorization | \- | \- +chooseavatar | \- | \- +click | `(e: MouseEvent)` | trigger on click +contact | \- | \- +createliveactivity | \- | \- +error | \- | \- +getphonenumber | \- | \- +getrealtimephonenumber | \- | \- +getuserinfo | \- | \- +launchapp | \- | \- +opensetting | \- | \- +tap | `event` | \- + +### Button External Classes + +className | Description +-- | -- +t-class | \- +t-class-icon | class name of icon +t-class-loading | class name of loading ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -220,4 +227,4 @@ Name | Default Value | Description --td-button-small-font-size | @font-size-base | - --td-button-small-height | 64rpx | - --td-button-small-icon-font-size | 36rpx | - ---td-button-small-padding-horizontal | 24rpx | - +--td-button-small-padding-horizontal | 24rpx | - \ No newline at end of file diff --git a/src/button/README.md b/src/button/README.md index 3b35bff27..12dc3f15a 100644 --- a/src/button/README.md +++ b/src/button/README.md @@ -68,60 +68,69 @@ isComponent: true {{ theme }} ## API + ### Button Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -t-id | String | - | 按钮标签id | N +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +app-parameter | String | - | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | N block | Boolean | false | 是否为块级元素 | N -content | String / Slot | - | 按钮内容 | N -custom-dataset | Object | - | 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取。TS 类型：`any` | N -disabled | Boolean | false | 禁用状态 | N +content | String / Slot | - | 按钮内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +custom-dataset | Object | - | 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取。。TS 类型：`any` | N +disabled | Boolean | undefined | 禁用状态。优先级：Button.disabled > Form.disabled | N ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N -icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N -loading | Boolean | false | 是否显示为加载状态，skyline模式下暂不支持该属性 | N -loading-props | Object | - | 透传至 Loading 组件。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/button/type.ts) | N -shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N -size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large。TS 类型：`SizeEnum` | N -suffix | Slot | - | 右侧内容，可用于定义右侧图标 | N -theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/light | N -type | String | - | 同小程序的 formType。可选项：submit/reset | N -variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/dashed/text | N -open-type | String | - | 微信开放能力。
具体释义：
`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 （*小程序插件中不能使用*）；
`share` 触发用户转发，使用前建议先阅读使用指引；
`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，具体说明 （*小程序插件中不能使用*）；
`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；
`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数具体说明；
`openSetting` 打开授权设置页；
`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容；
`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息；
`agreePrivacyAuthorization`用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过`bindagreeprivacyauthorization`监听用户同意隐私协议事件。隐私合规开发指南详情可见《小程序隐私协议开发指南》。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N -hover-class | String | '' | 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果 | N -hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | N +hover-class | String | - | 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果 | N hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | N hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 | N -lang | String | en | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。。
具体释义：
`en` 英文；
`zh_CN` 简体中文；
`zh_TW` 繁体中文。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：en/zh_CN/zh_TW | N -session-from | String | - | 会话来源，open-type="contact"时有效 | N -send-message-title | String | 当前标题 | 会话内消息卡片标题，open-type="contact"时有效 | N -send-message-path | String | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | N +hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | N +icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N +lang | String | - | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。。
具体释义：
`en` 英文；
`zh_CN` 简体中文；
`zh_TW` 繁体中文。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。。可选项：en/zh_CN/zh_TW | N +loading | Boolean | false | 是否显示为加载状态 | N +loading-props | Object | - | 透传 Loading 组件全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/button/type.ts) | N +open-type | String | - | 微信开放能力。
具体释义：
`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 （*小程序插件中不能使用*）；
`share` 触发用户转发，使用前建议先阅读使用指引；
`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，具体说明 （*小程序插件中不能使用*）；
`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；
`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数具体说明；
`openSetting` 打开授权设置页；
`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容；
`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息；
`agreePrivacyAuthorization`用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过`bindagreeprivacyauthorization`监听用户同意隐私协议事件。隐私合规开发指南详情可见《小程序隐私协议开发指南》。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。。可选项：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N +phone-number-no-quota-toast | Boolean | true | 原生按钮属性，当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示“申请获取你的手机号，但该功能使用次数已达当前小程序上限，暂时无法使用”的提示，默认展示，open-type="getPhoneNumber" 或 open-type="getRealtimePhoneNumber" 时有效 | N send-message-img | String | 截图 | 会话内消息卡片图片，open-type="contact"时有效 | N -app-parameter | String | - | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | N +send-message-path | String | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | N +send-message-title | String | 当前标题 | 会话内消息卡片标题，open-type="contact"时有效 | N +session-from | String | - | 会话来源，open-type="contact"时有效 | N +shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N show-message-card | Boolean | false | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | N -bindgetuserinfo | Eventhandle | - | 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效 | N -bindcontact | Eventhandle | - | 客服消息回调，open-type="contact"时有效 | N -bindgetphonenumber | Eventhandle | - | 获取用户手机号回调，open-type=getPhoneNumber时有效 | N -binderror | Eventhandle | - | 当使用开放能力时，发生错误的回调，open-type=launchApp时有效 | N -bindopensetting | Eventhandle | - | 在打开授权设置页后回调，open-type=openSetting时有效 | N -bindlaunchapp | Eventhandle | - | 打开 APP 成功的回调，open-type=launchApp时有效 | N -bindchooseavatar | Eventhandle | - | 获取用户头像回调，open-type=chooseAvatar时有效 | N -bindagreeprivacyauthorization | Eventhandle | - | 用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 | N +size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large | N +suffix | Slot | - | 右侧内容，可用于定义右侧图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +t-id | String | - | 按钮标签id | N +theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/light | N +type | String | - | 同小程序的 formType。。可选项：submit/reset | N +variant | String | base | 按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text | N ### Button Events 名称 | 参数 | 描述 -- | -- | -- +agreeprivacyauthorization | \- | 原生按钮属性，用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 （Tips: 如果使用 onNeedPrivacyAuthorization 接口，需要在 bindagreeprivacyauthorization 触发后再调用 resolve({ event: "agree", buttonId })） +chooseavatar | \- | 原生按钮属性，获取用户头像回调，`open-type=chooseAvatar` 时有效。返回 `e.detail.avatarUrl` 为头像临时文件链接 +click | `(e: MouseEvent)` | 点击时触发 +contact | \- | 原生按钮属性，客服消息回调，`open-type="contact"` 时有效 +createliveactivity | \- | 新的一次性订阅消息下发机制回调，`open-type=liveActivity` 时有效 +error | \- | 原生按钮属性，当使用开放能力时，发生错误的回调，`open-type=launchApp` 时有效 +getphonenumber | \- | 原生按钮属性，手机号快速验证回调，open-type=getPhoneNumber时有效。Tips：在触发 bindgetphonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用 +getrealtimephonenumber | \- | 原生按钮属性，手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效。Tips：在触发 bindgetrealtimephonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用 +getuserinfo | \- | 原生按钮属性，用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效 +launchapp | \- | 打开 APP 成功的回调，`open-type=launchApp` 时有效 +opensetting | \- | 原生按钮属性，在打开授权设置页后回调，open-type=openSetting时有效 tap | `event` | 点击按钮，当按钮不为加载或禁用状态时触发 -### Button 外部样式类 -类名 | 说明 --- | -- +### Button External Classes + +类名 | 描述 +-- | -- t-class | 根节点样式类 t-class-icon | 图标样式类 t-class-loading | 加载样式类 -### CSS 变量 +### CSS Variables + 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -220,4 +229,4 @@ t-class-loading | 加载样式类 --td-button-small-font-size | @font-size-base | - --td-button-small-height | 64rpx | - --td-button-small-icon-font-size | 36rpx | - ---td-button-small-padding-horizontal | 24rpx | - +--td-button-small-padding-horizontal | 24rpx | - \ No newline at end of file diff --git a/src/button/props.ts b/src/button/props.ts index e4b5354cd..053849d69 100644 --- a/src/button/props.ts +++ b/src/button/props.ts @@ -6,8 +6,8 @@ import { TdButtonProps } from './type'; const props: TdButtonProps = { - /** 按钮id */ - tId: { + /** 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 */ + appParameter: { type: String, value: '', }, @@ -20,119 +20,124 @@ const props: TdButtonProps = { content: { type: String, }, - /** 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取 */ + /** 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取。 */ customDataset: { - type: null, + type: Object, }, - /** 禁用状态 */ + /** 禁用状态。优先级：Button.disabled > Form.disabled */ disabled: { + type: null, + value: undefined, + }, + /** 是否为幽灵按钮（镂空按钮） */ + ghost: { type: Boolean, value: false, }, - /** 组件类名 */ - externalClasses: { - type: Array, + /** 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果 */ + hoverClass: { + type: String, + value: '', + }, + /** 按住后多久出现点击态，单位毫秒 */ + hoverStartTime: { + type: Number, + value: 20, }, - /** 是否为幽灵按钮（镂空按钮） */ - ghost: { + /** 手指松开后点击态保留时间，单位毫秒 */ + hoverStayTime: { + type: Number, + value: 70, + }, + /** 指定是否阻止本节点的祖先节点出现点击态 */ + hoverStopPropagation: { type: Boolean, value: false, }, - /** 图标名称 */ + /** 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 */ icon: { type: null, }, + /** 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。。
具体释义：
`en` 英文；
`zh_CN` 简体中文；
`zh_TW` 繁体中文。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。 */ + lang: { + type: String, + }, /** 是否显示为加载状态 */ loading: { type: Boolean, value: false, }, - /** 透传至 Loading 组件 */ + /** 透传 Loading 组件全部属性 */ loadingProps: { type: Object, }, - /** 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形 */ - shape: { + /** 微信开放能力。
具体释义：
`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 （*小程序插件中不能使用*）；
`share` 触发用户转发，使用前建议先阅读使用指引；
`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，具体说明 （*小程序插件中不能使用*）；
`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；
`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数具体说明；
`openSetting` 打开授权设置页；
`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容；
`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息；
`agreePrivacyAuthorization`用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过`bindagreeprivacyauthorization`监听用户同意隐私协议事件。隐私合规开发指南详情可见《小程序隐私协议开发指南》。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。 */ + openType: { type: String, - value: 'rectangle', }, - /** 组件尺寸 */ - size: { - type: String, - value: 'medium', + /** 原生按钮属性，当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示“申请获取你的手机号，但该功能使用次数已达当前小程序上限，暂时无法使用”的提示，默认展示，open-type="getPhoneNumber" 或 open-type="getRealtimePhoneNumber" 时有效 */ + phoneNumberNoQuotaToast: { + type: Boolean, + value: true, }, - /** 组件风格，依次为品牌色、危险色 */ - theme: { + /** 会话内消息卡片图片，open-type="contact"时有效 */ + sendMessageImg: { type: String, - value: 'default', + value: '截图', }, - /** 同小程序的 formType */ - type: { + /** 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 */ + sendMessagePath: { type: String, + value: '当前分享路径', }, - /** 按钮形式，基础、线框、文字 */ - variant: { + /** 会话内消息卡片标题，open-type="contact"时有效 */ + sendMessageTitle: { type: String, - value: 'base', + value: '当前标题', }, - /** 微信开放能力。
具体释义：
`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 （*小程序插件中不能使用*）；
`share` 触发用户转发，使用前建议先阅读使用指引；
`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，具体说明 （*小程序插件中不能使用*）；
`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；
`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数具体说明；
`openSetting` 打开授权设置页；
`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容；
`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) */ - openType: { + /** 会话来源，open-type="contact"时有效 */ + sessionFrom: { type: String, + value: '', }, - /** 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果 */ - hoverClass: { + /** 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形 */ + shape: { type: String, - value: '', + value: 'rectangle', }, - /** 指定是否阻止本节点的祖先节点出现点击态 */ - hoverStopPropagation: { + /** 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 */ + showMessageCard: { type: Boolean, value: false, }, - /** 按住后多久出现点击态，单位毫秒 */ - hoverStartTime: { - type: Number, - value: 20, - }, - /** 手指松开后点击态保留时间，单位毫秒 */ - hoverStayTime: { - type: Number, - value: 70, - }, - /** 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。。
具体释义：
`en` 英文；
`zh_CN` 简体中文；
`zh_TW` 繁体中文。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) */ - lang: { + /** 组件尺寸 */ + size: { type: String, - value: 'en', + value: 'medium', }, - /** 会话来源，open-type="contact"时有效 */ - sessionFrom: { + /** 自定义组件样式 */ + style: { type: String, value: '', }, - /** 会话内消息卡片标题，open-type="contact"时有效 */ - sendMessageTitle: { + /** 按钮标签id */ + tId: { type: String, value: '', }, - /** 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 */ - sendMessagePath: { + /** 组件风格，依次为品牌色、危险色 */ + theme: { type: String, - value: '', + value: 'default', }, - /** 会话内消息卡片图片，open-type="contact"时有效 */ - sendMessageImg: { + /** 同小程序的 formType。 */ + type: { type: String, - value: '', }, - /** 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 */ - appParameter: { + /** 按钮形式，基础、线框、虚线、文字 */ + variant: { type: String, - value: '', - }, - /** 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 */ - showMessageCard: { - type: Boolean, - value: false, + value: 'base', }, }; diff --git a/src/button/type.ts b/src/button/type.ts index 86f45db2d..e6c8cef48 100644 --- a/src/button/type.ts +++ b/src/button/type.ts @@ -5,11 +5,13 @@ * */ import { LoadingProps } from '../loading/index'; -import { SizeEnum } from '../common/common'; export interface TdButtonProps { - /** 按钮id */ - tId?: { + /** + * 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 + * @default '' + */ + appParameter?: { type: StringConstructor; value?: string; }; @@ -29,27 +31,19 @@ export interface TdButtonProps { value?: string; }; /** - * 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取 + * 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取。 */ customDataset?: { type: ObjectConstructor; value?: any; }; /** - * 禁用状态 - * @default false + * 禁用状态。优先级：Button.disabled > Form.disabled */ disabled?: { type: BooleanConstructor; value?: boolean; }; - /** - * 组件类名 - */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-icon', 't-class-loading']; - }; /** * 是否为幽灵按钮（镂空按钮） * @default false @@ -59,68 +53,68 @@ export interface TdButtonProps { value?: boolean; }; /** - * 图标名称 + * 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果 + * @default '' */ - icon?: { - type: null; - value?: string | object; + hoverClass?: { + type: StringConstructor; + value?: string; }; /** - * 是否显示为加载状态 - * @default false + * 按住后多久出现点击态，单位毫秒 + * @default 20 */ - loading?: { - type: BooleanConstructor; - value?: boolean; + hoverStartTime?: { + type: NumberConstructor; + value?: number; }; /** - * 透传至 Loading 组件 + * 手指松开后点击态保留时间，单位毫秒 + * @default 70 */ - loadingProps?: { - type: ObjectConstructor; - value?: LoadingProps; + hoverStayTime?: { + type: NumberConstructor; + value?: number; }; /** - * 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形 - * @default rectangle + * 指定是否阻止本节点的祖先节点出现点击态 + * @default false */ - shape?: { - type: StringConstructor; - value?: 'rectangle' | 'square' | 'round' | 'circle'; + hoverStopPropagation?: { + type: BooleanConstructor; + value?: boolean; }; /** - * 组件尺寸 - * @default medium + * 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 */ - size?: { - type: StringConstructor; - value?: SizeEnum; + icon?: { + type: null; + value?: string | object; }; /** - * 组件风格，依次为品牌色、危险色 - * @default default + * 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。。
具体释义：
`en` 英文；
`zh_CN` 简体中文；
`zh_TW` 繁体中文。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。 */ - theme?: { + lang?: { type: StringConstructor; - value?: 'default' | 'primary' | 'danger'; + value?: 'en' | 'zh_CN' | 'zh_TW'; }; /** - * 同小程序的 formType + * 是否显示为加载状态 + * @default false */ - type?: { - type: StringConstructor; - value?: 'submit' | 'reset'; + loading?: { + type: BooleanConstructor; + value?: boolean; }; /** - * 按钮形式，基础、线框、文字 - * @default base + * 透传 Loading 组件全部属性 */ - variant?: { - type: StringConstructor; - value?: 'base' | 'outline' | 'text'; + loadingProps?: { + type: ObjectConstructor; + value?: LoadingProps; }; /** - * 微信开放能力。
具体释义：
`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 （*小程序插件中不能使用*）；
`share` 触发用户转发，使用前建议先阅读使用指引；
`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，具体说明 （*小程序插件中不能使用*）；
`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；
`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数具体说明；
`openSetting` 打开授权设置页；
`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容；
`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) + * 微信开放能力。
具体释义：
`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 （*小程序插件中不能使用*）；
`share` 触发用户转发，使用前建议先阅读使用指引；
`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，具体说明 （*小程序插件中不能使用*）；
`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；
`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数具体说明；
`openSetting` 打开授权设置页；
`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容；
`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息；
`agreePrivacyAuthorization`用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过`bindagreeprivacyauthorization`监听用户同意隐私协议事件。隐私合规开发指南详情可见《小程序隐私协议开发指南》。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。 */ openType?: { type: StringConstructor; @@ -136,44 +130,36 @@ export interface TdButtonProps { | 'agreePrivacyAuthorization'; }; /** - * 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果 - * @default '' - */ - hoverClass?: { - type: StringConstructor; - value?: string; - }; - /** - * 指定是否阻止本节点的祖先节点出现点击态 - * @default false + * 原生按钮属性，当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示“申请获取你的手机号，但该功能使用次数已达当前小程序上限，暂时无法使用”的提示，默认展示，open-type="getPhoneNumber" 或 open-type="getRealtimePhoneNumber" 时有效 + * @default true */ - hoverStopPropagation?: { + phoneNumberNoQuotaToast?: { type: BooleanConstructor; value?: boolean; }; /** - * 按住后多久出现点击态，单位毫秒 - * @default 20 + * 会话内消息卡片图片，open-type="contact"时有效 + * @default 截图 */ - hoverStartTime?: { - type: NumberConstructor; - value?: number; + sendMessageImg?: { + type: StringConstructor; + value?: string; }; /** - * 手指松开后点击态保留时间，单位毫秒 - * @default 70 + * 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 + * @default 当前分享路径 */ - hoverStayTime?: { - type: NumberConstructor; - value?: number; + sendMessagePath?: { + type: StringConstructor; + value?: string; }; /** - * 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。。
具体释义：
`en` 英文；
`zh_CN` 简体中文；
`zh_TW` 繁体中文。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) - * @default en + * 会话内消息卡片标题，open-type="contact"时有效 + * @default 当前标题 */ - lang?: { + sendMessageTitle?: { type: StringConstructor; - value?: 'en' | 'zh_CN' | 'zh_TW'; + value?: string; }; /** * 会话来源，open-type="contact"时有效 @@ -184,43 +170,66 @@ export interface TdButtonProps { value?: string; }; /** - * 会话内消息卡片标题，open-type="contact"时有效 - * @default 当前标题 + * 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形 + * @default rectangle */ - sendMessageTitle?: { + shape?: { type: StringConstructor; - value?: string; + value?: 'rectangle' | 'square' | 'round' | 'circle'; }; /** - * 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 - * @default 当前分享路径 + * 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 + * @default false */ - sendMessagePath?: { + showMessageCard?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 组件尺寸 + * @default medium + */ + size?: { type: StringConstructor; - value?: string; + value?: 'extra-small' | 'small' | 'medium' | 'large'; }; /** - * 会话内消息卡片图片，open-type="contact"时有效 - * @default 截图 + * 自定义组件样式 + * @default '' */ - sendMessageImg?: { + style?: { type: StringConstructor; value?: string; }; /** - * 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 + * 按钮标签id * @default '' */ - appParameter?: { + tId?: { type: StringConstructor; value?: string; }; /** - * 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 - * @default false + * 组件风格，依次为品牌色、危险色 + * @default default */ - showMessageCard?: { - type: BooleanConstructor; - value?: boolean; + theme?: { + type: StringConstructor; + value?: 'default' | 'primary' | 'danger' | 'light'; + }; + /** + * 同小程序的 formType。 + */ + type?: { + type: StringConstructor; + value?: 'submit' | 'reset'; + }; + /** + * 按钮形式，基础、线框、虚线、文字 + * @default base + */ + variant?: { + type: StringConstructor; + value?: 'base' | 'outline' | 'dashed' | 'text'; }; } diff --git a/src/cascader/README.en-US.md b/src/cascader/README.en-US.md index 2382bd0a6..ea88014ac 100644 --- a/src/cascader/README.en-US.md +++ b/src/cascader/README.en-US.md @@ -1,10 +1,13 @@ :: BASE_DOC :: ## API + ### Cascader Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N close-btn | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N options | Array | [] | Typescript：`Array` | N @@ -24,8 +27,8 @@ change | `(value: string \| number, selectedOptions: string[])` | `1.0.1` close | `(trigger: TriggerSource)` | `1.0.1`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/cascader/type.ts)。
`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`
pick | `(value: string \| number, index: number)` | `1.0.1` - ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -42,4 +45,4 @@ Name | Default Value | Description --td-cascader-title-color | @text-color-primary | - --td-cascader-title-height | 26rpx | - --td-cascader-title-padding | @spacer-2 | - ---td-cascder-title-font-size | 36rpx | - +--td-cascder-title-font-size | 36rpx | - \ No newline at end of file diff --git a/src/cascader/README.md b/src/cascader/README.md index b277c16d0..3d1dfccf9 100644 --- a/src/cascader/README.md +++ b/src/cascader/README.md @@ -53,10 +53,13 @@ isComponent: true {{ with-title }} ## API + ### Cascader Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N close-btn | Boolean / Slot | true | 关闭按钮。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N options | Array | [] | 可选项数据源。TS 类型：`Array` | N @@ -76,8 +79,8 @@ change | `(value: string \| number, selectedOptions: string[])` | `1.0.1`。值 close | `(trigger: TriggerSource)` | `1.0.1`。关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/cascader/type.ts)。
`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`
pick | `(value: string \| number, index: number)` | `1.0.1`。选择后触发 - ### CSS Variables + 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -94,4 +97,4 @@ pick | `(value: string \| number, index: number)` | `1.0.1`。选择后触发 --td-cascader-title-color | @text-color-primary | - --td-cascader-title-height | 26rpx | - --td-cascader-title-padding | @spacer-2 | - ---td-cascder-title-font-size | 36rpx | - +--td-cascder-title-font-size | 36rpx | - \ No newline at end of file diff --git a/src/cell/README.en-US.md b/src/cell/README.en-US.md index df5087322..e71073e8c 100644 --- a/src/cell/README.en-US.md +++ b/src/cell/README.en-US.md @@ -1,33 +1,50 @@ :: BASE_DOC :: ## API + ### Cell Props name | type | default | description | required -- | -- | -- | -- | -- -align | String | middle | options：top/middle/bottom | N -arrow | Boolean | false | \- | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +align | String | middle | options: top/middle/bottom | N +arrow | Boolean / Object | false | \- | N bordered | Boolean | true | \- | N -description | String / Slot | - | \- | N -external-classes | Array | - | `['t-class', 't-class-title', 't-class-note', 't-class-description', 't-class-thumb', 't-class-hover', 't-class-left', 't-class-right']` | N +description | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N hover | Boolean | - | \- | N -image | String / Slot | - | \- | N -jump-type | String | navigateTo | options：switchTab/reLaunch/redirectTo/navigateTo | N -left-icon | String / Slot | - | \- | N -note | String / Slot | - | \- | N +image | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +jump-type | String | navigateTo | options: switchTab/reLaunch/redirectTo/navigateTo | N +left-icon | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +note | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N required | Boolean | false | \- | N -right-icon | String / Slot | - | \- | N -title | String / Slot | - | \- | N +right-icon | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +title | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N url | String | - | \- | N ### Cell Events name | params | description -- | -- | -- -click | - | \- +click | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) +### Cell External Classes +className | Description +-- | -- +t-class | \- +t-class-center | \- +t-class-description | \- +t-class-hover | \- +t-class-image | \- +t-class-left | \- +t-class-left-icon | \- +t-class-note | \- +t-class-right | \- +t-class-right-icon | \- +t-class-title | \- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -61,4 +78,4 @@ Name | Default Value | Description --td-cell-right-icon-font-size | 48rpx | - --td-cell-title-color | @font-gray-1 | - --td-cell-title-font-size | @font-size-m | - ---td-cell-vertical-padding | 32rpx | - +--td-cell-vertical-padding | 32rpx | - \ No newline at end of file diff --git a/src/cell/README.md b/src/cell/README.md index 845967a06..6488542c6 100644 --- a/src/cell/README.md +++ b/src/cell/README.md @@ -46,60 +46,50 @@ isComponent: true {{ theme }} ## API + ### Cell Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N align | String | middle | 内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N arrow | Boolean / Object | false | 是否显示右侧箭头 | N -bordered | Boolean| true | 是否显示下边框 | N -description | String / Slot | - | 下方内容描述 | N +bordered | Boolean | true | 是否显示下边框 | N +description | String / Slot | - | 下方内容描述。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N hover | Boolean | - | 是否开启点击反馈 | N -image | String / Slot | - | 主图 | N +image | String / Slot | - | 主图。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N jump-type | String | navigateTo | 链接跳转类型。可选项：switchTab/reLaunch/redirectTo/navigateTo | N -left-icon | String / Object / Slot | - | 左侧图标，出现在单元格标题的左侧 | N -note | String / Slot | - | 和标题同行的说明文字 | N +left-icon | String / Object / Slot | - | 左侧图标，出现在单元格标题的左侧。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +note | String / Slot | - | 和标题同行的说明文字。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N required | Boolean | false | 是否显示表单必填星号 | N -right-icon | String / Object / Slot | - | 最右侧图标 | N -title | String / Slot | - | 标题 | N +right-icon | String / Object / Slot | - | 最右侧图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +title | String / Slot | - | 标题。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N url | String | - | 点击后跳转链接地址。如果值为空，则表示不需要跳转 | N ### Cell Events 名称 | 参数 | 描述 -- | -- | -- -click | - | 右侧内容 +click | - | 右侧内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) +### Cell External Classes -### Cell 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 -t-class-title | 标题样式类 +t-class-center | 中间（`title`, `description`）内容样式类 t-class-description | 下方描述内容样式类 -t-class-note | 右侧说明文字样式类 t-class-hover | 悬停样式类 t-class-image | 图片样式类 t-class-left | 左侧内容样式类 t-class-left-icon | 左侧图标样式类 -t-class-center | 中间（`title`, `description`）内容样式类 +t-class-note | 右侧说明文字样式类 t-class-right | 右侧内容样式类 t-class-right-icon | 右侧图标样式类 - -### CellGroup Props - -名称 | 类型 | 默认值 | 说明 | 必传 --- | -- | -- | -- | -- -bordered | Boolean | - | 是否显示组边框 | N -theme | String | default | 单元格风格。可选项：default/card | N -title | String | - | 单元格组标题 | N - -### CellGroup 外部样式类 -类名 | 说明 --- | -- -t-class | 根节点样式类 t-class-title | 标题样式类 -### CSS 变量 +### CSS Variables + 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -133,4 +123,4 @@ t-class-title | 标题样式类 --td-cell-right-icon-font-size | 48rpx | - --td-cell-title-color | @font-gray-1 | - --td-cell-title-font-size | @font-size-m | - ---td-cell-vertical-padding | 32rpx | - +--td-cell-vertical-padding | 32rpx | - \ No newline at end of file diff --git a/src/cell/props.ts b/src/cell/props.ts index e6bf89b5b..45632070e 100644 --- a/src/cell/props.ts +++ b/src/cell/props.ts @@ -25,10 +25,6 @@ const props: TdCellProps = { description: { type: String, }, - /** 组件类名，分别用于设置 组件外层类名、标题类名、右侧说明文字类名、下方描述内容类名、图片类名、激活态类名、左侧图标类名、右侧图标类名 等 */ - externalClasses: { - type: Array, - }, /** 是否开启点击反馈 */ hover: { type: Boolean, diff --git a/src/cell/type.ts b/src/cell/type.ts index 1a784e75e..2a16bac24 100644 --- a/src/cell/type.ts +++ b/src/cell/type.ts @@ -29,14 +29,6 @@ export interface TdCellProps { type: BooleanConstructor; value?: boolean; }; - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; /** * 下方内容描述 */ @@ -44,22 +36,6 @@ export interface TdCellProps { type: StringConstructor; value?: string; }; - /** - * 组件类名，分别用于设置 组件外层类名、标题类名、右侧说明文字类名、下方描述内容类名、图片类名、激活态类名、左侧图标类名、右侧图标类名 等 - */ - externalClasses?: { - type: ArrayConstructor; - value?: [ - 't-class', - 't-class-title', - 't-class-note', - 't-class-description', - 't-class-thumb', - 't-class-hover', - 't-class-left', - 't-class-right', - ]; - }; /** * 是否开启点击反馈 */ diff --git a/src/check-tag/props.ts b/src/check-tag/props.ts index 26ecae6ad..4cc452ef6 100644 --- a/src/check-tag/props.ts +++ b/src/check-tag/props.ts @@ -30,10 +30,6 @@ const props: TdCheckTagProps = { type: Boolean, value: false, }, - /** 组件类名，用于设置 组件外层元素元素类名 */ - externalClasses: { - type: Array, - }, /** 标签图标 */ icon: { type: null, diff --git a/src/check-tag/type.ts b/src/check-tag/type.ts index 203c9bbb3..35304d752 100644 --- a/src/check-tag/type.ts +++ b/src/check-tag/type.ts @@ -44,13 +44,6 @@ export interface TdCheckTagProps { type: BooleanConstructor; value?: boolean; }; - /** - * 组件类名，用于设置 组件外层元素元素类名 - */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class']; - }; /** * 标签图标 */ diff --git a/src/checkbox/README.en-US.md b/src/checkbox/README.en-US.md index cf8f34c94..75066c3ff 100644 --- a/src/checkbox/README.en-US.md +++ b/src/checkbox/README.en-US.md @@ -1,10 +1,13 @@ :: BASE_DOC :: ## API + ### Checkbox Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N block | Boolean | true | \- | N borderless | Boolean | false | \- | N check-all | Boolean | false | \- | N @@ -13,14 +16,13 @@ default-checked | Boolean | undefined | uncontrolled property | N content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N content-disabled | Boolean | - | \- | N disabled | Boolean | undefined | \- | N -external-classes | Array | - | `['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']` | N icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'rectangle' \| string[]` | N indeterminate | Boolean | false | \- | N label | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N max-content-row | Number | 5 | \- | N max-label-row | Number | 3 | \- | N name | String | - | \- | N -placement | String | left | options：left/right | N +placement | String | left | options: left/right | N readonly | Boolean | false | \- | N value | String / Number / Boolean | - | value of checkbox。Typescript：`string \| number \| boolean` | N @@ -28,14 +30,25 @@ value | String / Number / Boolean | - | value of checkbox。Typescript：`string name | params | description -- | -- | -- -change | `(checked: boolean, context: { value: boolean|number|string, label: boolean|number|string })` | \- +change | `(checked: boolean, context: { value: boolean\|number\|string, label: boolean\|number\|string })` | \- +### Checkbox External Classes + +className | Description +-- | -- +t-class | \- +t-class-border | \- +t-class-content | \- +t-class-icon | \- +t-class-label | \- + ### CheckboxGroup Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N borderless | Boolean | false | \- | N -disabled | Boolean | - | \- | N max | Number | undefined | \- | N name | String | - | \- | N options | Array | [] | Typescript：`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N @@ -46,8 +59,7 @@ default-value | Array | undefined | uncontrolled property。Typescript：`T` `ty name | params | description -- | -- | -- -change | `(value: CheckboxGroupValue, context: { value: boolean|number|string, label: boolean|number|string })` | \- - +change | `(value: CheckboxGroupValue, context: { value: boolean\|number\|string, label: boolean\|number\|string })` | \- ### CSS Variables @@ -70,4 +82,4 @@ Name | Default Value | Description --td-checkbox-title-color | @text-color-primary | - --td-checkbox-title-disabled-color | @text-color-disabled | - --td-checkbox-title-line-height | 48rpx | - ---td-checkbox-vertical-padding | 32rpx | - +--td-checkbox-vertical-padding | 32rpx | - \ No newline at end of file diff --git a/src/checkbox/README.md b/src/checkbox/README.md index 0daa465c0..82486e0a0 100644 --- a/src/checkbox/README.md +++ b/src/checkbox/README.md @@ -66,10 +66,13 @@ isComponent: true {{ special }} ## API + ### Checkbox Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N block | Boolean | true | 是否为块级元素 | N borderless | Boolean | false | 是否开启无边框模式 | N check-all | Boolean | false | 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 | N @@ -92,23 +95,25 @@ value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| 名称 | 参数 | 描述 -- | -- | -- -change | `(checked: boolean, context: { value: boolean|number|string, label: boolean|number|string })` | 值变化时触发。`context` 表示当前点击项内容。 +change | `(checked: boolean, context: { value: boolean\|number\|string, label: boolean\|number\|string })` | 值变化时触发。`context` 表示当前点击项内容。 +### Checkbox External Classes -### Checkbox 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 -t-class-label | 标签样式类 -t-class-icon | 图标样式类 -t-class-content | 内容样式类 t-class-border | 边框样式类 +t-class-content | 内容样式类 +t-class-icon | 图标样式类 +t-class-label | 标签样式类 + ### CheckboxGroup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N borderless | Boolean | false | 是否开启无边框模式 | N -disabled | Boolean | - | 是否禁用组件，默认为 false。 CheckboxGroup.disabled < Checkbox.disabled ，后续新增 Form 组件后，Form.disabled 优先级最低 | N max | Number | undefined | 支持最多选中的数量 | N name | String | - | 统一设置内部复选框 HTML 属性 | N options | Array | [] | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N @@ -119,8 +124,7 @@ default-value | Array | undefined | 选中值。非受控属性。TS 类型：`T 名称 | 参数 | 描述 -- | -- | -- -change | `(value: CheckboxGroupValue, context: { value: boolean|number|string, label: boolean|number|string })` | 值变化时触发。`context` 表示当前点击项内容。 - +change | `(value: CheckboxGroupValue, context: { value: boolean\|number\|string, label: boolean\|number\|string })` | 值变化时触发。`context` 表示当前点击项内容。 ### CSS Variables @@ -143,4 +147,4 @@ change | `(value: CheckboxGroupValue, context: { value: boolean|number|string, l --td-checkbox-title-color | @text-color-primary | - --td-checkbox-title-disabled-color | @text-color-disabled | - --td-checkbox-title-line-height | 48rpx | - ---td-checkbox-vertical-padding | 32rpx | - +--td-checkbox-vertical-padding | 32rpx | - \ No newline at end of file diff --git a/src/col/README.en-US.md b/src/col/README.en-US.md index a3d615021..7ad8352e5 100644 --- a/src/col/README.en-US.md +++ b/src/col/README.en-US.md @@ -1,15 +1,21 @@ :: BASE_DOC :: ## API + ### Col Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N offset | String / Number | - | \- | N span | String / Number | - | \- | N + ### Row Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N gutter | String / Number | - | \- | N diff --git a/src/col/README.md b/src/col/README.md index 0ec8c520c..32473012f 100644 --- a/src/col/README.md +++ b/src/col/README.md @@ -39,15 +39,21 @@ isComponent: true ## API + ### Col Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N offset | String / Number | - | 列的偏移量（默认单位px） | N span | String / Number | - | 列的宽度（默认单位px） | N + ### Row Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N gutter | String / Number | - | 列之间的间距（默认单位px） | N diff --git a/src/collapse-panel/props.ts b/src/collapse-panel/props.ts index fc21848d6..238c3a837 100644 --- a/src/collapse-panel/props.ts +++ b/src/collapse-panel/props.ts @@ -12,12 +12,12 @@ const props: TdCollapsePanelProps = { }, /** 禁止当前面板展开，优先级大于 Collapse 的同名属性 */ disabled: { - type: Boolean, + type: null, value: undefined, }, /** 当前折叠面板展开图标，优先级大于 Collapse 的同名属性 */ expandIcon: { - type: Boolean, + type: null, value: undefined, }, /** 组件类名，用于组件外层元素、标题、内容 */ diff --git a/src/collapse/README.en-US.md b/src/collapse/README.en-US.md index dc96873ba..7eeacda63 100644 --- a/src/collapse/README.en-US.md +++ b/src/collapse/README.en-US.md @@ -1,15 +1,18 @@ :: BASE_DOC :: ## API + ### Collapse Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N default-expand-all | Boolean | false | \- | N disabled | Boolean | - | \- | N expand-icon | Boolean | true | \- | N expand-mutex | Boolean | false | \- | N -theme | String | default | options：default/card | N +theme | String | default | options: default/card | N value | Array | [] | Typescript：`CollapseValue` `type CollapseValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/collapse/type.ts) | N default-value | Array | undefined | uncontrolled property。Typescript：`CollapseValue` `type CollapseValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/collapse/type.ts) | N @@ -19,22 +22,31 @@ name | params | description -- | -- | -- change | `(value: CollapseValue)` | \- + ### CollapsePanel Props name | type | default | description | required -- | -- | -- | -- | -- -content | String / Slot | - | \- | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N disabled | Boolean | undefined | \- | N -expand-icon | Boolean / Slot | undefined | \- | N -external-classes | Array | - | `['t-class', 't-class-header', 't-class-content']` | N -header | String / Slot | - | \- | N -header-left-icon | String / Slot | - | \- | N -header-right-content | String / Slot | - | \- | N -placement | String | bottom | `0.34.0`。options：bottom/top | N +expand-icon | Boolean / Slot | undefined | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +header | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +header-left-icon | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +header-right-content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +placement | String | bottom | `0.34.0`。options: bottom/top | N value | String / Number | - | \- | N +### CollapsePanel External Classes +className | Description +-- | -- +t-class | \- +t-class-content | \- +t-class-header | \- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -50,4 +62,4 @@ Name | Default Value | Description --td-collapse-horizontal-padding | 32rpx | - --td-collapse-icon-color | @font-gray-3 | - --td-collapse-panel-bg-color | @bg-color-container | - ---td-collapse-title-font-size | @font-size-m | - +--td-collapse-title-font-size | @font-size-m | - \ No newline at end of file diff --git a/src/collapse/README.md b/src/collapse/README.md index cdbcea5f6..b88782c1a 100644 --- a/src/collapse/README.md +++ b/src/collapse/README.md @@ -55,10 +55,13 @@ isComponent: true {{ theme }} ## API + ### Collapse Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N default-expand-all | Boolean | false | 默认是否展开全部 | N disabled | Boolean | - | 是否禁用面板展开/收起操作 | N expand-icon | Boolean | true | 展开图标 | N @@ -73,27 +76,31 @@ default-value | Array | undefined | 展开的面板集合。非受控属性。TS -- | -- | -- change | `(value: CollapseValue)` | 切换面板时触发，返回变化的值 + ### CollapsePanel Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -content | String / Slot | - | 折叠面板内容 | N +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +content | String / Slot | - | 折叠面板内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Collapse 的同名属性 | N -expand-icon | Boolean / Slot | undefined | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性 | N -header | String / Slot | - | 面板头内容 | N -header-left-icon | String / Slot | - | 面板头左侧图标 | N -header-right-content | String / Slot | - | 面板头的右侧区域，一般用于呈现面板操作 | N +expand-icon | Boolean / Slot | undefined | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +header | String / Slot | - | 面板头内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +header-left-icon | String / Slot | - | 面板头左侧图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +header-right-content | String / Slot | - | 面板头的右侧区域，一般用于呈现面板操作。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N placement | String | bottom | `0.34.0`。选项卡内容的位置。可选项：bottom/top | N value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N +### CollapsePanel External Classes -### CollapsePanel 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 t-class-content | 内容样式类 t-class-header | 头部样式类 -### CSS 变量 +### CSS Variables + 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -109,4 +116,4 @@ t-class-header | 头部样式类 --td-collapse-horizontal-padding | 32rpx | - --td-collapse-icon-color | @font-gray-3 | - --td-collapse-panel-bg-color | @bg-color-container | - ---td-collapse-title-font-size | @font-size-m | - +--td-collapse-title-font-size | @font-size-m | - \ No newline at end of file diff --git a/src/count-down/README.en-US.md b/src/count-down/README.en-US.md index 65b70355b..9518e7e90 100644 --- a/src/count-down/README.en-US.md +++ b/src/count-down/README.en-US.md @@ -6,14 +6,16 @@ name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N auto-start | Boolean | true | \- | N -content | String / Slot | 'default' | \- | N +content | String / Slot | 'default' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N format | String | HH:mm:ss | \- | N millisecond | Boolean | false | \- | N -size | String `v0.5.1` | 'small' | options：small/medium/large | N -split-with-unit `v0.5.1` | Boolean | false | \- | N -theme | String `v0.5.1` | 'default' | options：default/round/square | N -time | Number | - | required | Y +size | String | 'medium' | `0.5.1`。options: small/medium/large | N +split-with-unit | Boolean | false | `0.5.1` | N +theme | String | 'default' | `0.5.1`。options: default/round/square | N +time | Number | 0 | required | Y ### CountDown Events @@ -21,9 +23,16 @@ name | params | description -- | -- | -- change | `(time: TimeData)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/count-down/type.ts)。
`interface TimeData { days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`
finish | \- | \- +### CountDown External Classes +className | Description +-- | -- +t-class | \- +t-class-count | \- +t-class-split | \- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -31,4 +40,4 @@ Name | Default Value | Description --td-countdown-default-color | @font-gray-1 | - --td-countdown-round-border-radius | @radius-circle | - --td-countdown-round-color | @font-white-1 | - ---td-countdown-square-border-radius | @radius-small | - +--td-countdown-square-border-radius | @radius-small | - \ No newline at end of file diff --git a/src/count-down/README.md b/src/count-down/README.md index 1da46e901..72efb6d2b 100644 --- a/src/count-down/README.md +++ b/src/count-down/README.md @@ -37,18 +37,21 @@ isComponent: true {{ size }} ## API + ### CountDown Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N auto-start | Boolean | true | 是否自动开始倒计时 | N -content | String / Slot | 'default' | 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽 | N +content | String / Slot | 'default' | 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N format | String | HH:mm:ss | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | N millisecond | Boolean | false | 是否开启毫秒级渲染 | N -size | String `v0.5.1` | 'medium' | 倒计时尺寸。可选项：small/medium/large | N -split-with-unit `v0.5.1` | Boolean | false | 使用时间单位分割 | N -theme | String `v0.5.1` | 'default' | 倒计时风格。可选项：default/round/square | N -time | Number | - | 必需。倒计时时长，单位毫秒 | Y +size | String | 'medium' | `0.5.1`。倒计时尺寸。可选项：small/medium/large | N +split-with-unit | Boolean | false | `0.5.1`。使用时间单位分割 | N +theme | String | 'default' | `0.5.1`。倒计时风格。可选项：default/round/square | N +time | Number | 0 | 必需。倒计时时长，单位毫秒 | Y ### CountDown Events @@ -56,15 +59,16 @@ time | Number | - | 必需。倒计时时长，单位毫秒 | Y -- | -- | -- change | `(time: TimeData)` | 时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/count-down/type.ts)。
`interface TimeData { days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`
finish | \- | 倒计时结束时触发 +### CountDown External Classes -### CountDown 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 t-class-count | 计数样式类 t-class-split | 分隔线样式类 -### CSS 变量 +### CSS Variables + 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -72,4 +76,4 @@ t-class-split | 分隔线样式类 --td-countdown-default-color | @font-gray-1 | - --td-countdown-round-border-radius | @radius-circle | - --td-countdown-round-color | @font-white-1 | - ---td-countdown-square-border-radius | @radius-small | - +--td-countdown-square-border-radius | @radius-small | - \ No newline at end of file diff --git a/src/count-down/props.ts b/src/count-down/props.ts index bfd441817..4fd7b1f20 100644 --- a/src/count-down/props.ts +++ b/src/count-down/props.ts @@ -44,6 +44,8 @@ const props: TdCountDownProps = { /** 倒计时时长，单位毫秒 */ time: { type: Number, + value: 0, + required: true, }, }; diff --git a/src/count-down/type.ts b/src/count-down/type.ts index 31b0fdf11..d7c95d926 100644 --- a/src/count-down/type.ts +++ b/src/count-down/type.ts @@ -21,14 +21,6 @@ export interface TdCountDownProps { type: StringConstructor; value?: string; }; - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; /** * 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 * @default HH:mm:ss @@ -47,7 +39,7 @@ export interface TdCountDownProps { }; /** * 倒计时尺寸 - * @default 'small' + * @default 'medium' */ size?: { type: StringConstructor; @@ -71,9 +63,11 @@ export interface TdCountDownProps { }; /** * 倒计时时长，单位毫秒 + * @default 0 */ time: { type: NumberConstructor; value?: number; + required?: boolean; }; } diff --git a/src/date-time-picker/props.ts b/src/date-time-picker/props.ts index 4f2f77c34..2fc477473 100644 --- a/src/date-time-picker/props.ts +++ b/src/date-time-picker/props.ts @@ -9,7 +9,7 @@ const props: TdDateTimePickerProps = { /** 取消按钮文字 */ cancelBtn: { type: String, - value: '', + value: '取消', }, /** 确定按钮文字 */ confirmBtn: { diff --git a/src/divider/README.en-US.md b/src/divider/README.en-US.md index 9528a70aa..08a4d5ab3 100644 --- a/src/divider/README.en-US.md +++ b/src/divider/README.en-US.md @@ -1,18 +1,26 @@ :: BASE_DOC :: ## API + ### Divider Props name | type | default | description | required -- | -- | -- | -- | -- -align | String | center | options：left/right/center | N -content | String / Slot | - | \- | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +align | String | center | options: left/right/center | N +content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N dashed | Boolean | false | \- | N -external-classes | Array | - | `['t-class', 't-class-line', 't-class-content']` | N -layout | String | horizontal | options：horizontal/vertical | N +layout | String | horizontal | options: horizontal/vertical | N +### Divider External Classes +className | Description +-- | -- +t-class | \- +t-class-content | \- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -20,4 +28,4 @@ Name | Default Value | Description --td-divider-content-color | @font-gray-3 | - --td-divider-content-font-size | 24rpx | - --td-divider-content-line-height | 40rpx | - ---td-divider-content-line-style | solid | - +--td-divider-content-line-style | solid | - \ No newline at end of file diff --git a/src/divider/README.md b/src/divider/README.md index bf945aa24..d567bcbe2 100644 --- a/src/divider/README.md +++ b/src/divider/README.md @@ -37,22 +37,26 @@ isComponent: true {{ theme }} ## API + ### Divider Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N align | String | center | 文本位置（仅在水平分割线有效）。可选项：left/right/center | N -content | String / Slot | - | 子元素 | N +content | String / Slot | - | 子元素。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N +### Divider External Classes -### Divider 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 t-class-content | 内容样式类 -### CSS 变量 +### CSS Variables + 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -60,4 +64,4 @@ t-class-content | 内容样式类 --td-divider-content-color | @font-gray-3 | - --td-divider-content-font-size | 24rpx | - --td-divider-content-line-height | 40rpx | - ---td-divider-content-line-style | solid | - +--td-divider-content-line-style | solid | - \ No newline at end of file diff --git a/src/divider/props.ts b/src/divider/props.ts index 53b1b14f8..8cb1cc463 100644 --- a/src/divider/props.ts +++ b/src/divider/props.ts @@ -15,20 +15,11 @@ const props: TdDividerProps = { content: { type: String, }, - /** 自定义组件样式 */ - style: { - type: String, - value: '', - }, /** 是否虚线（仅在水平分割线有效） */ dashed: { type: Boolean, value: false, }, - /** 组件类名，分别用于设置 组件外层类名、分隔线类名 等 */ - externalClasses: { - type: Array, - }, /** 分隔线类型有两种：水平和垂直 */ layout: { type: String, diff --git a/src/divider/type.ts b/src/divider/type.ts index 771493255..fa01886f5 100644 --- a/src/divider/type.ts +++ b/src/divider/type.ts @@ -20,14 +20,6 @@ export interface TdDividerProps { type: StringConstructor; value?: string; }; - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; /** * 是否虚线（仅在水平分割线有效） * @default false @@ -36,13 +28,6 @@ export interface TdDividerProps { type: BooleanConstructor; value?: boolean; }; - /** - * 组件类名，分别用于设置 组件外层类名、分隔线类名 等 - */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-line', 't-class-content']; - }; /** * 分隔线类型有两种：水平和垂直 * @default horizontal diff --git a/src/dropdown-item/props.ts b/src/dropdown-item/props.ts index 7db38fff7..1982c3def 100644 --- a/src/dropdown-item/props.ts +++ b/src/dropdown-item/props.ts @@ -6,7 +6,7 @@ import { TdDropdownItemProps } from './type'; const props: TdDropdownItemProps = { - /** 是否禁用 */ + /** 是否禁用操作项 */ disabled: { type: Boolean, value: false, @@ -39,11 +39,6 @@ const props: TdDropdownItemProps = { type: null, value: 1, }, - /** 已废弃。选项排列；不再支持 tree 布局，可与 treeSelect 配合使用 */ - optionsLayout: { - type: String, - value: 'columns', - }, /** 选中值 */ value: { type: null, diff --git a/src/dropdown-item/type.ts b/src/dropdown-item/type.ts index 2f7e31003..320ba2c81 100644 --- a/src/dropdown-item/type.ts +++ b/src/dropdown-item/type.ts @@ -8,15 +8,7 @@ import { KeysType } from '../common/common'; export interface TdDropdownItemProps { /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; - /** - * 是否禁用 + * 是否禁用操作项 * @default false */ disabled?: { @@ -76,15 +68,6 @@ export interface TdDropdownItemProps { type: null; value?: string | number; }; - /** - * 选项排列；不再支持 tree 布局，可与 treeSelect 配合使用 - * @default columns - * @deprecated - */ - optionsLayout?: { - type: StringConstructor; - value?: string; - }; /** * 选中值 */ diff --git a/src/dropdown-menu/README.en-US.md b/src/dropdown-menu/README.en-US.md index 176d32f14..73a74db1f 100644 --- a/src/dropdown-menu/README.en-US.md +++ b/src/dropdown-menu/README.en-US.md @@ -1,14 +1,16 @@ :: BASE_DOC :: ## API + ### DropdownMenu Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N arrow-icon | String / Object | 'caret-down-small' | \- | N close-on-click-overlay | Boolean | true | \- | N duration | String / Number | 200 | \- | N -external-classes | Array | - | `['t-class', 't-class-item', 't-class-label', 't-class-icon']` | N show-overlay | Boolean | true | \- | N z-index | Number | 11600 | \- | N @@ -16,16 +18,27 @@ z-index | Number | 11600 | \- | N name | params | description -- | -- | -- -open | \- | \- close | \- | \- +open | \- | \- +### DropdownMenu External Classes + +className | Description +-- | -- +t-class | \- +t-class-icon | \- +t-class-item | \- +t-class-label | \- + ### DropdownItem Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N disabled | Boolean | false | \- | N -external-classes | Array | - | `['t-class','t-class-content', 't-class-column', 't-class-column-item', 't-class-column-item-label', 't-class-footer']` | N -keys | Object | - | Typescript：`KeysType` | N +footer | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N label | String | - | \- | N multiple | Boolean | false | \- | N options | Array | [] | Typescript：`Array` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N @@ -39,10 +52,19 @@ default-value | String / Number / Array | undefined | uncontrolled property。Ty name | params | description -- | -- | -- change | `(value: DropdownValue)` | \- +close | \- | \- confirm | `(value: DropdownValue)` | \- reset | \- | \- -close | \- | \- +### DropdownItem External Classes +className | Description +-- | -- +t-class | \- +t-class-column | \- +t-class-column-item | \- +t-class-column-item-label | \- +t-class-content | \- +t-class-footer | \- ### CSS Variables @@ -63,4 +85,4 @@ Name | Default Value | Description --td-dropdown-menu-disabled-colorm | @text-color-disabled | - --td-dropdown-menu-font-sizem | 28rpx | - --td-dropdown-menu-height | 96rpx | - ---td-dropdown-menu-icon-sizem | 48rpx | - +--td-dropdown-menu-icon-sizem | 48rpx | - \ No newline at end of file diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md index fa1e59f4f..20a7a7c28 100644 --- a/src/dropdown-menu/README.md +++ b/src/dropdown-menu/README.md @@ -48,10 +48,13 @@ isComponent: true {{ tree }} ## API + ### DropdownMenu Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N arrow-icon | String / Object | 'caret-down-small' | 自定义箭头图标 | N close-on-click-overlay | Boolean | true | 是否在点击遮罩层后关闭菜单 | N duration | String / Number | 200 | 动画时长 | N @@ -62,23 +65,27 @@ z-index | Number | 11600 | 菜单栏 z-index 层级 | N 名称 | 参数 | 描述 -- | -- | -- -open | \- | 菜单展开时触发 close | \- | 菜单关闭时触发 +open | \- | 菜单展开时触发 +### DropdownMenu External Classes -### DropdownMenu 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 +t-class-icon | 图标样式类 t-class-item | 选项样式类 t-class-label | 标签样式类 -t-class-icon | 图标样式类 + ### DropdownItem Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -disabled | Boolean | false | 是否禁用 | N -keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType` | N +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +disabled | Boolean | false | 是否禁用操作项 | N +footer | Slot | - | 底部。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N label | String | - | 标题 | N multiple | Boolean | false | 是否多选 | N options | Array | [] | 选项数据。TS 类型：`Array` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N @@ -92,21 +99,20 @@ default-value | String / Number / Array | undefined | 选中值。非受控属 名称 | 参数 | 描述 -- | -- | -- change | `(value: DropdownValue)` | 值改变时触发 +close | \- | 关闭时触发 confirm | `(value: DropdownValue)` | 点击确认时触发 reset | \- | 点击重置时触发 -close | \- | 关闭时触发 +### DropdownItem External Classes -### DropdownItem 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 -t-class-content | 内容样式类 t-class-column | 菜单列样式类 t-class-column-item | 菜单列选项样式类 t-class-column-item-label | 菜单列选项标签样式类 +t-class-content | 内容样式类 t-class-footer | 底部样式类 - ### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 @@ -126,4 +132,4 @@ t-class-footer | 底部样式类 --td-dropdown-menu-disabled-colorm | @text-color-disabled | - --td-dropdown-menu-font-sizem | 28rpx | - --td-dropdown-menu-height | 96rpx | - ---td-dropdown-menu-icon-sizem | 48rpx | - +--td-dropdown-menu-icon-sizem | 48rpx | - \ No newline at end of file diff --git a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap index 5d7daf061..2e5899c20 100644 --- a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap +++ b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap @@ -138,11 +138,11 @@ exports[`dropdown-menu :base 1`] = ` > ` `interface LinkObj { name: string; url?: string; openType?: 'navigate' \| 'redirect' \| 'relaunch' \| 'switchTab' \| 'navigateBack' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/footer/type.ts) | N theme | String | 'text' | 已废弃。页脚展示类型。可选项：text/logo | N -### CSS 变量 +### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 diff --git a/src/footer/props.ts b/src/footer/props.ts index a8f403386..9497e6909 100644 --- a/src/footer/props.ts +++ b/src/footer/props.ts @@ -15,11 +15,6 @@ const props: TdFooterProps = { logo: { type: Object, }, - /** 自定义组件样式 */ - style: { - type: String, - value: '', - }, /** 版权信息 */ text: { type: String, diff --git a/src/footer/type.ts b/src/footer/type.ts index a8bdda3b8..4537fbf7a 100644 --- a/src/footer/type.ts +++ b/src/footer/type.ts @@ -20,14 +20,6 @@ export interface TdFooterProps { type: ObjectConstructor; value?: FooterLogo; }; - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; /** * 版权信息 * @default '' diff --git a/src/grid-item/props.ts b/src/grid-item/props.ts index 557f70d54..c2e31f468 100644 --- a/src/grid-item/props.ts +++ b/src/grid-item/props.ts @@ -15,15 +15,11 @@ const props: TdGridItemProps = { description: { type: String, }, - /** 组件类名，分别用于设置组件外层元素、图片、文本、描述等元素类名 */ - externalClasses: { - type: Array, - }, /** 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` */ icon: { type: null, }, - /** 图片，可以是图片地址，也可以自定义图片节点 */ + /** 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽 */ image: { type: String, }, diff --git a/src/grid-item/type.ts b/src/grid-item/type.ts index 3c54f00a7..c9d94ef9b 100644 --- a/src/grid-item/type.ts +++ b/src/grid-item/type.ts @@ -5,6 +5,7 @@ * */ import { BadgeProps } from '../badge/index'; +import { ImageProps } from '../image/index'; export interface TdGridItemProps { /** @@ -15,14 +16,6 @@ export interface TdGridItemProps { type: ObjectConstructor; value?: BadgeProps; }; - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; /** * 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点 */ @@ -30,13 +23,6 @@ export interface TdGridItemProps { type: StringConstructor; value?: string; }; - /** - * 组件类名，分别用于设置组件外层元素、图片、文本、描述等元素类名 - */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-image', 't-class-text', 't-class-description']; - }; /** * 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` */ @@ -45,7 +31,7 @@ export interface TdGridItemProps { value?: string | object; }; /** - * 图片，可以是图片地址，也可以自定义图片节点 + * 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽 */ image?: { type: StringConstructor; @@ -56,7 +42,7 @@ export interface TdGridItemProps { */ imageProps?: { type: ObjectConstructor; - value?: object; + value?: ImageProps; }; /** * 链接跳转类型 diff --git a/src/grid/README.en-US.md b/src/grid/README.en-US.md index 81a309fe5..b7ed1a81e 100644 --- a/src/grid/README.en-US.md +++ b/src/grid/README.en-US.md @@ -1,35 +1,59 @@ :: BASE_DOC :: ## API + ### Grid Props name | type | default | description | required -- | -- | -- | -- | -- -align | String | center | options：left/center | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +align | String | center | options: left/center | N border | Boolean / Object | false | Typescript：`boolean \| { color?: string; width?: string; style?: 'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'groove' \| 'inset' \| 'outset' }` | N column | Number | 4 | \- | N -external-classes | Array | - | `['t-class']` | N gutter | Number | - | \- | N hover | Boolean | false | \- | N -theme | String | default | options：default/card | N +theme | String | default | options: default/card | N +### Grid External Classes + +className | Description +-- | -- +t-class | \- + ### GridItem Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N badge-props | Object | null | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/grid-item/type.ts) | N -description | String / Slot | - | \- | N -external-classes | Array | - | `['t-class', 't-class-image', 't-class-text', 't-class-description']` | N +description | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N icon | String / Object | - | \- | N -image | String / Slot | - | \- | N -image-props | Object | - | \- | N -jump-type | String | navigate-to | options：redirect-to/switch-tab/relaunch/navigate-to | N -layout | String | vertical | options：vertical/horizontal | N -text | String / Slot | - | \- | N +image | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +image-props | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/grid-item/type.ts) | N +jump-type | String | navigate-to | options: redirect-to/switch-tab/relaunch/navigate-to | N +layout | String | vertical | options: vertical/horizontal | N +text | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N url | String | - | \- | N +### GridItem Events + +name | params | description +-- | -- | -- +click | \- | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) +### GridItem External Classes + +className | Description +-- | -- +t-class | \- +t-class-content | \- +t-class-description | \- +t-class-image | \- +t-class-text | \- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -52,4 +76,4 @@ Name | Default Value | Description --td-grid-item-text-line-height | 44rpx | - --td-grid-item-text-middle-font-size | 24rpx | - --td-grid-item-text-padding-top | 16rpx | - ---td-grid-item-text-small-font-size | 24rpx | - +--td-grid-item-text-small-font-size | 24rpx | - \ No newline at end of file diff --git a/src/grid/README.md b/src/grid/README.md index 8e4dd0c1b..93499f46a 100644 --- a/src/grid/README.md +++ b/src/grid/README.md @@ -62,54 +62,59 @@ isComponent: true ## API + ### Grid Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N align | String | center | 内容对齐方式。可选项：left/center | N border | Boolean / Object | false | 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式。TS 类型：`boolean \| { color?: string; width?: string; style?: 'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'groove' \| 'inset' \| 'outset' }` | N column | Number | 4 | 每一行的列数量；为 0 时等于固定大小 | N gutter | Number | - | 间隔大小 | N hover | Boolean | false | 是否开启点击反馈 | N theme | String | default | 宫格的风格。可选项：default/card | N +### Grid External Classes -### Grid 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 ### GridItem Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N badge-props | Object | null | 透传至 Badge 属性。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/grid-item/type.ts) | N -description | String / Slot | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点 | N +description | String / Slot | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N -image | String / Slot | - | 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽 | N -image-props | Object | - | 透传至 Image 组件 | N +image | String / Slot | - | 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +image-props | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/grid-item/type.ts) | N jump-type | String | navigate-to | 链接跳转类型。可选项：redirect-to/switch-tab/relaunch/navigate-to | N layout | String | vertical | 内容布局方式。可选项：vertical/horizontal | N -text | String / Slot | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点 | N +text | String / Slot | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N url | String | - | 点击后的跳转链接 | N ### GridItem Events 名称 | 参数 | 描述 -- | -- | -- -click | \- | 点击子项后触发 +click | \- | 点击子项后触发。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) +### GridItem External Classes -### GridItem 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 t-class-content | 内容样式类 +t-class-description | 描述样式类 t-class-image | 图片样式类 t-class-text | 文本样式类 -t-class-description | 描述样式类 +### CSS Variables -### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -132,4 +137,4 @@ t-class-description | 描述样式类 --td-grid-item-text-line-height | 44rpx | - --td-grid-item-text-middle-font-size | 24rpx | - --td-grid-item-text-padding-top | 16rpx | - ---td-grid-item-text-small-font-size | 24rpx | - +--td-grid-item-text-small-font-size | 24rpx | - \ No newline at end of file diff --git a/src/grid/props.ts b/src/grid/props.ts index dfb58b1e5..4caed6f95 100644 --- a/src/grid/props.ts +++ b/src/grid/props.ts @@ -21,10 +21,6 @@ const props: TdGridProps = { type: Number, value: 4, }, - /** 组件类名，用于设置组件外层元素类名 */ - externalClasses: { - type: Array, - }, /** 间隔大小 */ gutter: { type: Number, diff --git a/src/grid/type.ts b/src/grid/type.ts index c705b59f7..247fe742c 100644 --- a/src/grid/type.ts +++ b/src/grid/type.ts @@ -35,21 +35,6 @@ export interface TdGridProps { type: NumberConstructor; value?: number; }; - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; - /** - * 组件类名，用于设置组件外层元素类名 - */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class']; - }; /** * 间隔大小 */ diff --git a/src/guide/README.en-US.md b/src/guide/README.en-US.md index 25805314c..c211b3562 100644 --- a/src/guide/README.en-US.md +++ b/src/guide/README.en-US.md @@ -64,8 +64,8 @@ show-overlay | Boolean | true | \- | N skip-button-props | Object | - | Typescript：`ButtonProps` | N title | String | - | title of current step | N - ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -103,4 +103,4 @@ Name | Default Value | Description --td-guide-reference-border-radius | @radius-default | - --td-guide-reference-mask-color | @font-gray-2 | - --td-guide-title-color | @font-gray-1 | - ---td-guide-title-font-weight | 600 | - +--td-guide-title-font-weight | 600 | - \ No newline at end of file diff --git a/src/guide/README.md b/src/guide/README.md index 187c88adb..b16668641 100644 --- a/src/guide/README.md +++ b/src/guide/README.md @@ -112,8 +112,8 @@ show-overlay | Boolean | true | 是否出现遮罩层 | N skip-button-props | Object | - | 用于自定义当前步骤引导框的跳过按钮的内容。TS 类型：`ButtonProps` | N title | String | - | 当前步骤的标题内容，支持插槽：slot="title-{{index}}" (1、当要显示body-{{index}}插槽时，请将title设置为空；2、当要显示content-{{index}}插槽完全自定义内容时，请将body和title都设置为空) | N +### CSS Variables -### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -151,4 +151,4 @@ title | String | - | 当前步骤的标题内容，支持插槽：slot="title-{{ --td-guide-reference-border-radius | @radius-default | - --td-guide-reference-mask-color | @font-gray-2 | - --td-guide-title-color | @font-gray-1 | - ---td-guide-title-font-weight | 600 | - +--td-guide-title-font-weight | 600 | - \ No newline at end of file diff --git a/src/icon/README.en-US.md b/src/icon/README.en-US.md new file mode 100644 index 000000000..b408f55c4 --- /dev/null +++ b/src/icon/README.en-US.md @@ -0,0 +1,26 @@ +:: BASE_DOC :: + +## API + + +### Icon Props + +name | type | default | description | required +-- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +color | String | - | \- | N +name | String | - | required | Y +prefix | String | - | \- | N +size | String / Number | - | \- | N + +### Icon Events + +name | params | description +-- | -- | -- +click | \- | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) +### Icon External Classes + +className | Description +-- | -- +t-class | \- diff --git a/src/icon/README.md b/src/icon/README.md index dfcb48b98..c93e1f6ec 100644 --- a/src/icon/README.md +++ b/src/icon/README.md @@ -91,18 +91,24 @@ isComponent: true ## API -#### Props - -| 属性 | 值类型 | 默认值 | 必传 | 说明 | -| ----------- | -------- | ---------- | ---- |----------------------------------------------------------------- | -| name | String | - | Y | 图标名称或图片链接 | -| size | String | - | N | 图标大小, 如 `20`, `20px`, `48rpx`, 默认单位是 `px` | -| color | String | - | N | 图标颜色 | -| prefix | String | - | N | 自定义图标前缀 | -| external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、图片图标、基础图标等元素类名。`['t-class']` | N - -#### Events - -| 事件 | 参数 | 说明 | -| ---------- | ------------ | -------------- | -| click | \- | 点击图标时触发 | +### Icon Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +color | String | - | 图标颜色 | N +name | String | - | 必需。图标名称或图片链接 | Y +prefix | String | - | 自定义图标前缀 | N +size | String / Number | - | 图标大小, 如 `20`, `20px`, `48rpx`, 默认单位是 `px` | N + +### Icon Events + +名称 | 参数 | 描述 +-- | -- | -- +click | \- | 点击图标时触发。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) +### Icon External Classes + +类名 | 描述 +-- | -- +t-class | 根节点样式类 diff --git a/src/icon/props.ts b/src/icon/props.ts index 2c376d9aa..21856b05e 100644 --- a/src/icon/props.ts +++ b/src/icon/props.ts @@ -2,7 +2,6 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-09-20 16:58:42 * */ import { TdIconProps } from './type'; @@ -12,21 +11,20 @@ const props: TdIconProps = { type: String, value: '', }, - /** 图标名称 */ + /** 图标名称或图片链接 */ name: { type: String, value: '', required: true, }, - /** 图标尺寸，支持 'small', 'medium', 'large'，'35px', '3em' 等 */ - size: { - type: String, - value: '', - }, /** 自定义图标前缀 */ prefix: { type: String, - value: undefined, + value: '', + }, + /** 图标大小, 如 `20`, `20px`, `48rpx`, 默认单位是 `px` */ + size: { + type: null, }, }; diff --git a/src/icon/type.ts b/src/icon/type.ts index afa0feb25..6f6f957c5 100644 --- a/src/icon/type.ts +++ b/src/icon/type.ts @@ -2,28 +2,20 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-09-20 16:58:42 * */ export interface TdIconProps { - /** - * 自定义组件样式 - */ - style?: { - type: StringConstructor; - value?: string; - required?: boolean; - }; /** * 图标颜色 + * @default '' */ color?: { type: StringConstructor; value?: string; - required?: boolean; }; /** - * 图标名称 + * 图标名称或图片链接 + * @default '' */ name: { type: StringConstructor; @@ -31,19 +23,18 @@ export interface TdIconProps { required?: boolean; }; /** - * 图标尺寸，支持 'small', 'medium', 'large'，'35px', '3em' 等 + * 自定义图标前缀 + * @default '' */ - size?: { + prefix?: { type: StringConstructor; value?: string; - required?: boolean; }; /** - * 自定义图标前缀 + * 图标大小, 如 `20`, `20px`, `48rpx`, 默认单位是 `px` */ - prefix?: { - type: StringConstructor; - value?: string; - reuqired?: boolean; + size?: { + type: null; + value?: string | number; }; } diff --git a/src/image-viewer/README.en-US.md b/src/image-viewer/README.en-US.md index f625d861e..b16272dc9 100644 --- a/src/image-viewer/README.en-US.md +++ b/src/image-viewer/README.en-US.md @@ -1,19 +1,22 @@ :: BASE_DOC :: ## API + ### ImageViewer Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N background-color | String | 'rgba(0, 0, 0, 1)' | \- | N -close-btn | String / Boolean / Object / Slot | false | \- | N -delete-btn | String / Boolean / Object / Slot | false | \- | N +close-btn | String / Boolean / Object / Slot | false | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +delete-btn | String / Boolean / Object / Slot | false | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N images | Array | [] | Typescript：`Array` | N initial-index | Number | 0 | Typescript：`Number` | N show-index | Boolean | false | \- | N -using-custom-navbar | Boolean | false | \- | N -visible | Boolean | false | \- | N -default-visible | Boolean | undefined | uncontrolled property | N +using-custom-navbar | Boolean | false | `v1.1.4` | N +visible | Boolean | false | hide or show image viewer | N +default-visible | Boolean | undefined | hide or show image viewer。uncontrolled property | N ### ImageViewer Events @@ -23,8 +26,8 @@ change | `(index: Number)` | \- close | `(trigger: 'overlay' \| 'button', visible: Boolean, index: Number)` | \- delete | `(index: Number)` | \- - ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -34,4 +37,4 @@ Name | Default Value | Description --td-image-viewer-nav-color | @font-white-1 | - --td-image-viewer-nav-height | 96rpx | - --td-image-viewer-nav-index-font-size | @font-size-base | - ---td-image-viewer-top | @position-fixed-top | - +--td-image-viewer-top | @position-fixed-top | - \ No newline at end of file diff --git a/src/image-viewer/README.md b/src/image-viewer/README.md index 2566b741b..e02fda6a2 100644 --- a/src/image-viewer/README.md +++ b/src/image-viewer/README.md @@ -47,17 +47,20 @@ isComponent: true > 当使用自定义导航栏的时候，顶部的操作按钮会被遮挡，此时需要开启 `using-custom-navbar` 来解决 ## API + ### ImageViewer Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N background-color | String | 'rgba(0, 0, 0, 1)' | 遮罩的背景颜色 | N -close-btn | String / Boolean / Object / Slot | false | 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标 | N -delete-btn | String / Boolean / Object / Slot | false | 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标 | N +close-btn | String / Boolean / Object / Slot | false | 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +delete-btn | String / Boolean / Object / Slot | false | 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N images | Array | [] | 图片数组。TS 类型：`Array` | N initial-index | Number | 0 | 初始化页码。TS 类型：`Number` | N show-index | Boolean | false | 是否显示页码 | N -using-custom-navbar | Boolean | false | `v1.1.4` 是否使用了自定义导航栏 | N +using-custom-navbar | Boolean | false | `v1.1.4`。是否使用了自定义导航栏 | N visible | Boolean | false | 隐藏/显示预览 | N default-visible | Boolean | undefined | 隐藏/显示预览。非受控属性 | N @@ -69,8 +72,8 @@ change | `(index: Number)` | 翻页时回调 close | `(trigger: 'overlay' \| 'button', visible: Boolean, index: Number)` | 点击操作按钮button或者overlay时触发 delete | `(index: Number)` | 点击删除操作按钮时触发 +### CSS Variables -### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -80,4 +83,4 @@ delete | `(index: Number)` | 点击删除操作按钮时触发 --td-image-viewer-nav-color | @font-white-1 | - --td-image-viewer-nav-height | 96rpx | - --td-image-viewer-nav-index-font-size | @font-size-base | - ---td-image-viewer-top | @position-fixed-top | - +--td-image-viewer-top | @position-fixed-top | - \ No newline at end of file diff --git a/src/image/README.en-US.md b/src/image/README.en-US.md index 8793cf889..b7c76178f 100644 --- a/src/image/README.en-US.md +++ b/src/image/README.en-US.md @@ -6,16 +6,17 @@ name | type | default | description | required -- | -- | -- | -- | -- -t-id | String | - | `1.2.10`. image tag id | N -error | String / Slot | 'default' | \- | N -external-classes | Array | - | `['t-class', 't-class-load']` | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +error | String / Slot | 'default' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N height | String / Number | - | \- | N lazy | Boolean | false | \- | N -loading | String / Slot | 'default' | \- | N -mode | String | scaleToFill | options：scaleToFill/aspectFit/aspectFill/widthFix/heightFix/top/bottom/center/left/right/top left/top right/bottom left/bottom right | N -shape | String | square | options：circle/round/square | N +loading | String / Slot | 'default' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +mode | String | scaleToFill | options: scaleToFill/aspectFit/aspectFill/widthFix/heightFix/top/bottom/center/left/right/top left/top right/bottom left/bottom right | N +shape | String | square | options: circle/round/square | N show-menu-by-longpress | Boolean | false | \- | N -src | String | - | \- | N +src | String | - | src attribute of ``. image File can also be loaded | N +t-id | String | - | `1.2.10`。image tag id | N webp | Boolean | false | \- | N width | String / Number | - | \- | N @@ -23,8 +24,14 @@ width | String / Number | - | \- | N name | params | description -- | -- | -- -error | \- | \- -load | \- | \- +error | - | trigger on image load failed +load | - | trigger on image loaded +### Image External Classes + +className | Description +-- | -- +t-class | \- +t-class-load | \- ### CSS Variables @@ -34,4 +41,4 @@ Name | Default Value | Description --td-image-color | @font-gray-3 | - --td-image-loading-bg-color | @bg-color-secondarycontainer | - --td-image-loading-color | @font-gray-3 | - ---td-image-round-radius | @radius-default | - +--td-image-round-radius | @radius-default | - \ No newline at end of file diff --git a/src/image/README.md b/src/image/README.md index d2d4f1e6f..a047a0228 100644 --- a/src/image/README.md +++ b/src/image/README.md @@ -49,17 +49,19 @@ isComponent: true ### Image Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -t-id | String | - | `1.2.10`。图片标签id | N -error | String / Slot | 'default' | 加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败” | N +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +error | String / Slot | 'default' | 加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败”。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N height | String / Number | - | 高度，默认单位为`px` | N lazy | Boolean | false | 是否开启图片懒加载 | N -loading | String / Slot | 'default' | 加载态内容。值为 `default` 则表示使用默认加载中风格；值为其他则表示普通文本内容，如“加载中” | N +loading | String / Slot | 'default' | 加载态内容。值为 `default` 则表示使用默认加载中风格；值为其他则表示普通文本内容，如“加载中”。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N mode | String | scaleToFill | 图片裁剪、缩放的模式；[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)。可选项：scaleToFill/aspectFit/aspectFill/widthFix/heightFix/top/bottom/center/left/right/top left/top right/bottom left/bottom right | N shape | String | square | 图片圆角类型。可选项：circle/round/square | N show-menu-by-longpress | Boolean | false | 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。 | N src | String | - | 图片链接 | N +t-id | String | - | `1.2.10`。图片标签id | N webp | Boolean | false | 默认不解析 webP 格式，只支持网络资源 | N width | String / Number | - | 宽度，默认单位为`px` | N @@ -67,17 +69,16 @@ width | String / Number | - | 宽度，默认单位为`px` | N 名称 | 参数 | 描述 -- | -- | -- -error | \- | 图片加载失败时触发 -load | \- | 图片加载完成时触发 - -### Image 外部样式类 +error | - | 图片加载失败时触发 +load | - | 图片加载完成时触发 +### Image External Classes -类名 | 说明 +类名 | 描述 -- | -- t-class | 根节点样式类 t-class-load | 加载样式类 -### CSS 变量 +### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 @@ -85,4 +86,4 @@ t-class-load | 加载样式类 --td-image-color | @font-gray-3 | - --td-image-loading-bg-color | @bg-color-secondarycontainer | - --td-image-loading-color | @font-gray-3 | - ---td-image-round-radius | @radius-default | - +--td-image-round-radius | @radius-default | - \ No newline at end of file diff --git a/src/image/image.ts b/src/image/image.ts index a23a6070d..b84da048a 100644 --- a/src/image/image.ts +++ b/src/image/image.ts @@ -48,7 +48,7 @@ export default class Image extends SuperComponent { if (mode === 'heightFix' && isInCompatible) { // 实现heightFix模式，保持高度和宽高比，设置对应的宽度 const { height: picHeight, width: picWidth } = e.detail; - getRect(this, `#${tId ?? 'image'}`).then((rect) => { + getRect(this, `#${tId || 'image'}`).then((rect) => { const { height } = rect; const resultWidth = ((height / picHeight) * picWidth).toFixed(2); this.setData({ innerStyle: `height: ${addUnit(height)}; width: ${resultWidth}px;` }); diff --git a/src/image/props.ts b/src/image/props.ts index 140716608..dbf1f50ab 100644 --- a/src/image/props.ts +++ b/src/image/props.ts @@ -6,20 +6,11 @@ import { TdImageProps } from './type'; const props: TdImageProps = { - /** id，默认为null */ - tId: { - type: String, - value: null, - }, /** 加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败” */ error: { type: String, value: 'default', }, - /** 组件类名，分别用于设置加载组件外层元素，中间内容等元素类名 */ - externalClasses: { - type: Array, - }, /** 高度，默认单位为`px` */ height: { type: null, @@ -29,7 +20,7 @@ const props: TdImageProps = { type: Boolean, value: false, }, - /** 加载态内容。值为 `default` 则表示使用默认加载中风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `loading`；值为其他则表示普通文本内容，如“加载中” */ + /** 加载态内容。值为 `default` 则表示使用默认加载中风格；值为其他则表示普通文本内容，如“加载中” */ loading: { type: String, value: 'default', @@ -54,6 +45,11 @@ const props: TdImageProps = { type: String, value: '', }, + /** 图片标签id */ + tId: { + type: String, + value: '', + }, /** 默认不解析 webP 格式，只支持网络资源 */ webp: { type: Boolean, diff --git a/src/image/type.ts b/src/image/type.ts index 380337b9b..1fa751e35 100644 --- a/src/image/type.ts +++ b/src/image/type.ts @@ -5,22 +5,6 @@ * */ export interface TdImageProps { - /** - * 自定义组件id - * @default null - */ - tId?: { - type: StringConstructor; - value?: string; - }; - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; /** * 加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败” * @default 'default' @@ -29,13 +13,6 @@ export interface TdImageProps { type: StringConstructor; value?: string; }; - /** - * 组件类名，分别用于设置加载组件外层元素，中间内容等元素类名 - */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-load']; - }; /** * 高度，默认单位为`px` */ @@ -52,7 +29,7 @@ export interface TdImageProps { value?: boolean; }; /** - * 加载态内容。值为 `default` 则表示使用默认加载中风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `loading`；值为其他则表示普通文本内容，如“加载中” + * 加载态内容。值为 `default` 则表示使用默认加载中风格；值为其他则表示普通文本内容，如“加载中” * @default 'default' */ loading?: { @@ -105,6 +82,14 @@ export interface TdImageProps { type: StringConstructor; value?: string; }; + /** + * 图片标签id + * @default '' + */ + tId?: { + type: StringConstructor; + value?: string; + }; /** * 默认不解析 webP 格式，只支持网络资源 * @default false diff --git a/src/indexes-anchor/props.ts b/src/indexes-anchor/props.ts index 417753854..5884d3aab 100644 --- a/src/indexes-anchor/props.ts +++ b/src/indexes-anchor/props.ts @@ -6,10 +6,6 @@ import { TdIndexesAnchorProps } from './type'; const props: TdIndexesAnchorProps = { - /** 组件类名，用于设置组件外层元素类名 */ - externalClasses: { - type: Array, - }, /** 索引字符 */ index: { type: null, diff --git a/src/indexes-anchor/type.ts b/src/indexes-anchor/type.ts index 55b66a214..4e42ff3dd 100644 --- a/src/indexes-anchor/type.ts +++ b/src/indexes-anchor/type.ts @@ -5,21 +5,6 @@ * */ export interface TdIndexesAnchorProps { - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; - /** - * 组件类名，用于设置组件外层元素类名 - */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class']; - }; /** * 索引字符 */ diff --git a/src/indexes/README.en-US.md b/src/indexes/README.en-US.md index dbb33e999..8b1e92cdf 100644 --- a/src/indexes/README.en-US.md +++ b/src/indexes/README.en-US.md @@ -1,10 +1,13 @@ :: BASE_DOC :: ## API + ### Indexes Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N index-list | Array | - | `0.32.0`。Typescript：`string [] \| number[]` | N list | Array | [] | `deprecated`。Typescript：`ListItem[] ` `interface ListItem { title: string; index: string; children: { title: string; [key: string]: any} [] }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/indexes/type.ts) | N sticky | Boolean | true | Typescript：`Boolean` | N @@ -17,15 +20,24 @@ name | params | description change | `(index: string \| number)` | `0.34.0` select | `(index: string \| number)` | \- + ### IndexesAnchor Props name | type | default | description | required -- | -- | -- | -- | -- -external-classes | Array | - | `['t-class']` | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N index | String / Number | - | \- | N +### IndexesAnchor External Classes +className | Description +-- | -- +t-class | class name of root node +t-class-sidebar | \- +t-class-sidebar-item | \- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -47,4 +59,4 @@ Name | Default Value | Description --td-indexes-anchor-bg-color | @bg-color-secondarycontainer | - --td-indexes-anchor-color | @font-gray-1 | - --td-indexes-anchor-font-size | 28rpx | - ---td-indexes-anchor-line-height | 44rpx | - +--td-indexes-anchor-line-height | 44rpx | - \ No newline at end of file diff --git a/src/indexes/README.md b/src/indexes/README.md index 207777e5d..77c99f855 100644 --- a/src/indexes/README.md +++ b/src/indexes/README.md @@ -44,12 +44,15 @@ isComponent: true {{ custom }} ### API + ### Indexes Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N index-list | Array | - | `0.32.0`。索引字符列表。不传默认 `A-Z`。TS 类型：`string [] \| number[]` | N -list | Array | [] | 已废弃。索引列表的列表数据。每个元素包含三个子元素，index(string)：索引值，例如1，2，3，...或A，B，C等；title(string): 索引标题，可不填将默认设为索引值；children(Array<{title: string}>): 子元素列表，title为子元素的展示文案。。TS 类型：`ListItem[] ` `interface ListItem { title: string; index: string; children: { title: string; [key: string]: any} [] }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/indexes/type.ts) | N +list | Array | [] | 已废弃。索引列表的列表数据。每个元素包含三个子元素，index(string)：索引值，例如1，2，3，...或A，B，C等；title(string): 索引标题，可不填将默认设为索引值；children(Array<{title: string}>): 子元素列表，title为子元素的展示文案。TS 类型：`ListItem[] ` `interface ListItem { title: string; index: string; children: { title: string; [key: string]: any} [] }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/indexes/type.ts) | N sticky | Boolean | true | 索引是否吸顶，默认为true。TS 类型：`Boolean` | N sticky-offset | Number | 0 | `1.0.0`。锚点吸顶时与顶部的距离 | N @@ -60,20 +63,24 @@ sticky-offset | Number | 0 | `1.0.0`。锚点吸顶时与顶部的距离 | N change | `(index: string \| number)` | `0.34.0`。索引发生变更时触发事件 select | `(index: string \| number)` | 点击侧边栏时触发事件 + ### IndexesAnchor Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N index | String / Number | - | 索引字符 | N +### IndexesAnchor External Classes -### IndexesAnchor 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 t-class-sidebar | 侧边栏样式类 t-class-sidebar-item | 侧边栏选项样式类 -### CSS 变量 +### CSS Variables + 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -95,4 +102,4 @@ t-class-sidebar-item | 侧边栏选项样式类 --td-indexes-anchor-bg-color | @bg-color-secondarycontainer | - --td-indexes-anchor-color | @font-gray-1 | - --td-indexes-anchor-font-size | 28rpx | - ---td-indexes-anchor-line-height | 44rpx | - +--td-indexes-anchor-line-height | 44rpx | - \ No newline at end of file diff --git a/src/indexes/props.ts b/src/indexes/props.ts index ffd3060d1..ef5de1270 100644 --- a/src/indexes/props.ts +++ b/src/indexes/props.ts @@ -10,11 +10,6 @@ const props: TdIndexesProps = { indexList: { type: null, }, - /** 已废弃。索引列表的列表数据。每个元素包含三个子元素，index(string)：索引值，例如1，2，3，...或A，B，C等；title(string): 索引标题，可不填将默认设为索引值；children(Array<{title: string}>): 子元素列表，title为子元素的展示文案。 */ - list: { - type: Array, - value: [], - }, /** 索引是否吸顶，默认为true */ sticky: { type: Boolean, diff --git a/src/indexes/type.ts b/src/indexes/type.ts index b54f3a106..95d6679bd 100644 --- a/src/indexes/type.ts +++ b/src/indexes/type.ts @@ -5,14 +5,6 @@ * */ export interface TdIndexesProps { - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; /** * 索引字符列表。不传默认 `A-Z` */ @@ -20,15 +12,6 @@ export interface TdIndexesProps { type: null; value?: string[] | number[]; }; - /** - * 索引列表的列表数据。每个元素包含三个子元素，index(string)：索引值，例如1，2，3，...或A，B，C等；title(string): 索引标题，可不填将默认设为索引值；children(Array<{title: string}>): 子元素列表，title为子元素的展示文案。 - * @default [] - * @deprecated - */ - list?: { - type: ArrayConstructor; - value?: ListItem[]; - }; /** * 索引是否吸顶，默认为true * @default true @@ -46,9 +29,3 @@ export interface TdIndexesProps { value?: number; }; } - -export interface ListItem { - title: string; - index: string; - children: { title: string; [key: string]: any }[]; -} diff --git a/src/input/README.en-US.md b/src/input/README.en-US.md index 85b698161..0b9cd8642 100644 --- a/src/input/README.en-US.md +++ b/src/input/README.en-US.md @@ -6,49 +6,50 @@ name | type | default | description | required -- | -- | -- | -- | -- -align | String | left | options：left/center/right | N -layout | String | horizontal | options：vertical/horizontal | N -borderless | Boolean | true | \- | N -clearable | Boolean | false | \- | N -clear-trigger | String | always | options：always / focus | N -disabled | Boolean | - | \- | N -error-message | String | - | `deprecated` | N -external-classes | Array | - | `['t-class', 't-class-input', 't-class-placeholder', 't-class-error-msg']` | N -format | Function | - | Typescript：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N -label | String / Slot | - | \- | N -maxcharacter | Number | - | \- | N -maxlength | Number | - | \- | N -placeholder | String | undefined | \- | N -prefix-icon | String / Slot | - | \- | N -readonly | Boolean | false | \- | N -size | String | small | options：small/medium。Typescript：`'medium' \| 'small'` | N -status | String | default | options：default/success/warning/error | N -suffix | String / Slot | - | \- | N -suffix-icon | String / Slot | - | \- | N -tips | String / Slot | - | \- | N -value | String / Number | - | Typescript：`InputValue` `type InputValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N -default-value | String / Number | undefined | uncontrolled property。Typescript：`InputValue` `type InputValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N -type | String | text | options：text/number/idcard/digit/safe-password/nickname | N -password | Boolean | false | \- | N -placeholder-style | String | - | required | Y -placeholder-class | String | input-placeholder | \- | N -cursor-spacing | Number | 0 | \- | N -auto-focus | Boolean | false | \- | N -focus | Boolean | false | \- | N -confirm-type | String | done | options：send/search/next/go/done | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +adjust-position | Boolean | true | \- | N +align | String | left | text align type。options: left/center/right | N always-embed | Boolean | false | \- | N +auto-focus | Boolean | false | \- | N +borderless | Boolean | false | input without border | N +clear-trigger | String | always | show clear icon, clicked to clear input value。options: always / focus | N +clearable | Boolean / Object | false | show clear icon, clicked to clear input value | N confirm-hold | Boolean | false | \- | N +confirm-type | String | done | options: send/search/next/go/done | N cursor | Number | - | required | Y -selection-start | Number | -1 | \- | N -selection-end | Number | -1 | \- | N -adjust-position | Boolean | true | \- | N +cursor-spacing | Number | 0 | \- | N +disabled | Boolean | false | make input to be disabled | N +error-message | String | - | `deprecated` | N +focus | Boolean | false | \- | N +format | Function | - | input value formatter, `type=number` does not work. if you need to format number, `InputNumber` Component might be better。Typescript：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N hold-keyboard | Boolean | false | \- | N +label | String / Slot | - | text on the left of input。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +layout | String | horizontal | options: vertical/horizontal | N +maxcharacter | Number | - | \- | N +maxlength | Number | -1 | \- | N +password | Boolean | false | `deprecated` | N +placeholder | String | undefined | \- | N +placeholder-class | String | input-placeholder | \- | N +placeholder-style | String | - | required | Y +prefix-icon | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +readonly | Boolean | false | \- | N safe-password-cert-path | String | - | \- | N +safe-password-custom-hash | String | - | \- | N safe-password-length | Number | - | \- | N -safe-password-time-stamp | Number | - | \- | N safe-password-nonce | String | - | \- | N safe-password-salt | String | - | \- | N -safe-password-custom-hash | String | - | \- | N +safe-password-time-stamp | Number | - | \- | N +selection-end | Number | -1 | \- | N +selection-start | Number | -1 | \- | N +size | String | medium | `deprecated`。options: small/medium。Typescript：`'medium' \| 'small'` | N +status | String | default | options: default/success/warning/error | N +suffix | String / Slot | - | suffix content before suffixIcon。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +suffix-icon | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +tips | String / Slot | - | tips on the bottom of input, different `status` can make tips to be different color。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +type | String | text | options: text/number/idcard/digit/safe-password/password/nickname | N +value | String / Number | - | input value。Typescript：`InputValue` `type InputValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N +default-value | String / Number | undefined | input value。uncontrolled property。Typescript：`InputValue` `type InputValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N ### Input Events @@ -57,9 +58,24 @@ name | params | description blur | `(value: InputValue)` | \- change | `(value: InputValue, cursor: number, keyCode: number)` | \- clear | \- | \- +click | `(trigger: InputTrigger)` | `0.32.0` enter | `(value: InputValue)` | \- focus | `(value: InputValue)` | \- keyboardheightchange | `(height: number, duration: number)` | \- +nicknamereview | `(pass: boolean, timeout: boolean)` | \- +validate | `(detail: { error?: 'exceed-maximum' \| 'below-minimum' })` | trigger on text length being over max length or max character +### Input External Classes + +className | Description +-- | -- +t-class | \- +t-class-clearable | \- +t-class-input | \- +t-class-label | \- +t-class-prefix-icon | \- +t-class-suffix | \- +t-class-suffix-icon | \- +t-class-tips | \- ### CSS Variables @@ -88,4 +104,4 @@ Name | Default Value | Description --td-input-suffix-text-color | @font-gray-1 | - --td-input-vertical-padding | 32rpx | - --td-input-warning-text-color | @warning-color | - ---td-input-warning-tips-color | @warning-color | - +--td-input-warning-tips-color | @warning-color | - \ No newline at end of file diff --git a/src/input/README.md b/src/input/README.md index d9c1dff66..71f9bf773 100644 --- a/src/input/README.md +++ b/src/input/README.md @@ -83,50 +83,52 @@ isComponent: true ### Input Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N align | String | left | 文本内容位置，居左/居中/居右。可选项：left/center/right | N -layout | String | horizontal | 标题输入框布局方式。可选项：vertical/horizontal | N +always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | N +auto-focus | Boolean | false | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 | N borderless | Boolean | false | 是否开启无边框模式 | N -clearable | Boolean / Object | false | 是否可清空，默认不启动。值为 `true` 表示使用默认清除空按钮，值为 `Object` 表示透传至 `icon` | N clear-trigger | String | always | 清空图标触发方式，仅在输入框有值时有效。可选项：always / focus | N +clearable | Boolean / Object | false | 是否可清空，默认不启动。值为 `true` 表示使用默认清除空按钮，值为 `Object` 表示透传至 `icon` | N +confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | N +confirm-type | String | done | 设置键盘右下角按钮的文字，仅在type='text'时生效。
具体释义：
`send` 右下角按钮为“发送”；
`search` 右下角按钮为“搜索”；
`next` 右下角按钮为“下一个”；
`go` 右下角按钮为“前往”；
`done` 右下角按钮为“完成”。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)。可选项：send/search/next/go/done | N +cursor | Number | - | 必需。指定 focus 时的光标位置 | Y +cursor-spacing | Number | 0 | 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 | N disabled | Boolean | false | 是否禁用输入框 | N error-message | String | - | 已废弃。错误提示文本，值为空不显示（废弃属性，如果需要，请更为使用 status 和 tips） | N -format | Function | - | 【开发中】指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => number | string`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N -label | String / Slot | - | 左侧文本。 | N +focus | Boolean | false | 获取焦点 | N +format | Function | - | 【开发中】指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N +hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N +label | String / Slot | - | 左侧文本。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +layout | String | horizontal | 标题输入框布局方式。可选项：vertical/horizontal | N maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N maxlength | Number | -1 | 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N +password | Boolean | false | 已废弃。是否是密码类型（已废弃，请更为使用 type 指定输入框类型） | N placeholder | String | undefined | 占位符 | N -prefix-icon | String / Object / Slot | - | 组件前置图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N -readonly | Boolean | false | 【开发中】只读状态 | N -size | String | medium | 【已废弃】输入框尺寸。可选项：small/medium。TS 类型：`'medium' \| 'small'` | N -status | String | - | 输入框状态。可选项：success/warning/error | N -suffix | String / Slot | - | 后置图标前的后置内容 | N -suffix-icon | String / Object / Slot | - | 后置文本内容。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N -tips | String / Slot | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 | N -type | String | text | 输入框类型。可选项：text/number/idcard/digit/safe-password/password/nickname | N -value | String / Number | - | 输入框的值。TS 类型：`InputValue` `type InputValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N -default-value | String / Number | undefined | 输入框的值。非受控属性。TS 类型：`InputValue` `type InputValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N -password | Boolean | false | 是否是密码类型（已废弃，请更为使用 type 指定输入框类型） | N -placeholder-style | String | - | 必需。指定 placeholder 的样式 | Y placeholder-class | String | input-placeholder | 指定 placeholder 的样式类 | N -cursor-spacing | Number | 0 | 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 | N -auto-focus | Boolean | false | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 | N -focus | Boolean | false | 获取焦点 | N -confirm-type | String | done | 设置键盘右下角按钮的文字，仅在type='text'时生效。
具体释义：
`send` 右下角按钮为“发送”；
`search` 右下角按钮为“搜索”；
`next` 右下角按钮为“下一个”；
`go` 右下角按钮为“前往”；
`done` 右下角按钮为“完成”。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)。可选项：send/search/next/go/done | N -always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | N -confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | N -cursor | Number | - | 必需。指定 focus 时的光标位置 | Y -selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N -selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N -adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N -hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N +placeholder-style | String | - | 必需。指定 placeholder 的样式 | Y +prefix-icon | String / Object / Slot | - | 组件前置图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +readonly | Boolean | false | 【开发中】只读状态 | N safe-password-cert-path | String | - | 安全键盘加密公钥的路径，只支持包内路径 | N +safe-password-custom-hash | String | - | 安全键盘计算 hash 的算法表达式，如 `md5(sha1('foo' + sha256(sm3(password + 'bar'))))` | N safe-password-length | Number | - | 安全键盘输入密码长度 | N -safe-password-time-stamp | Number | - | 安全键盘加密时间戳 | N safe-password-nonce | String | - | 安全键盘加密盐值 | N safe-password-salt | String | - | 安全键盘计算 hash 盐值，若指定custom-hash 则无效 | N -safe-password-custom-hash | String | - | 安全键盘计算 hash 的算法表达式，如 `md5(sha1('foo' + sha256(sm3(password + 'bar'))))` | N +safe-password-time-stamp | Number | - | 安全键盘加密时间戳 | N +selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N +selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N +size | String | medium | 已废弃。输入框尺寸。可选项：small/medium。TS 类型：`'medium' \| 'small'` | N +status | String | default | 输入框状态。可选项：default/success/warning/error | N +suffix | String / Slot | - | 后置图标前的后置内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +suffix-icon | String / Object / Slot | - | 后置文本内容。值为字符串则表示图标名称，值为 `Object` 类型，表示透传至 `icon`。。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +tips | String / Slot | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +type | String | text | 输入框类型。可选项：text/number/idcard/digit/safe-password/password/nickname | N +value | String / Number | - | 输入框的值。TS 类型：`InputValue` `type InputValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N +default-value | String / Number | undefined | 输入框的值。非受控属性。TS 类型：`InputValue` `type InputValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N ### Input Events @@ -135,26 +137,26 @@ safe-password-custom-hash | String | - | 安全键盘计算 hash 的算法表达 blur | `(value: InputValue)` | 失去焦点时触发 change | `(value: InputValue, cursor: number, keyCode: number)` | 输入框值发生变化时触发；cursor 为光标位置； clear | \- | 清空按钮点击时触发 +click | `(trigger: InputTrigger)` | `0.32.0`。点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts)。
`type InputTrigger = 'suffix' \| 'suffix-icon';`
enter | `(value: InputValue)` | 回车键按下时触发 focus | `(value: InputValue)` | 获得焦点时触发 keyboardheightchange | `(height: number, duration: number)` | 键盘高度发生变化的时候触发此事件 -nicknamereview | `(pass: boolean, timeout: boolean)`| 用户昵称审核完毕后触发，仅在 type 为 "nickname" 时有效 -click `v0.32.0`| `(trigger: InputTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts)。
`type InputTrigger = 'suffix' \| 'suffix-icon';`
+nicknamereview | `(pass: boolean, timeout: boolean)` | 用户昵称审核完毕后触发，仅在 type 为 "nickname" 时有效 +validate | `(detail: { error?: 'exceed-maximum' \| 'below-minimum' })` | 字数超出限制时触发 +### Input External Classes -### CellGroup 外部样式类 - -类名 | 说明 +类名 | 描述 -- | -- t-class | 根节点样式类 -t-class-prefix-icon | 前置图标样式类 -t-class-label | 标题样式类 -t-class-input | 标题样式类 t-class-clearable | 标题样式类 +t-class-input | 标题样式类 +t-class-label | 标题样式类 +t-class-prefix-icon | 前置图标样式类 t-class-suffix | 后置样式类 t-class-suffix-icon | 后置图标样式类 t-class-tips | 提示样式类 -### CSS 变量 +### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 @@ -181,4 +183,4 @@ t-class-tips | 提示样式类 --td-input-suffix-text-color | @font-gray-1 | - --td-input-vertical-padding | 32rpx | - --td-input-warning-text-color | @warning-color | - ---td-input-warning-tips-color | @warning-color | - +--td-input-warning-tips-color | @warning-color | - \ No newline at end of file diff --git a/src/input/props.ts b/src/input/props.ts index b68180e9f..bc498ba30 100644 --- a/src/input/props.ts +++ b/src/input/props.ts @@ -6,58 +6,94 @@ import { TdInputProps } from './type'; const props: TdInputProps = { + /** 键盘弹起时，是否自动上推页面 */ + adjustPosition: { + type: Boolean, + value: true, + }, /** 文本内容位置，居左/居中/居右 */ align: { type: String, value: 'left', }, - /** 标题输入框布局方式 */ - layout: { - type: String, - value: 'horizontal', + /** 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) */ + alwaysEmbed: { + type: Boolean, + value: false, + }, + /** (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 */ + autoFocus: { + type: Boolean, + value: false, }, /** 是否开启无边框模式 */ borderless: { type: Boolean, value: false, }, - /** 是否可清空 */ + /** 清空图标触发方式，仅在输入框有值时有效 */ + clearTrigger: { + type: String, + value: 'always', + }, + /** 是否可清空，默认不启动。值为 `true` 表示使用默认清除空按钮，值为 `Object` 表示透传至 `icon` */ clearable: { type: null, value: false, }, - /** 清空图标触发方式 */ - clearTrigger: { + /** 点击键盘右下角按钮时是否保持键盘不收起 */ + confirmHold: { + type: Boolean, + value: false, + }, + /** 设置键盘右下角按钮的文字，仅在type='text'时生效。
具体释义：
`send` 右下角按钮为“发送”；
`search` 右下角按钮为“搜索”；
`next` 右下角按钮为“下一个”；
`go` 右下角按钮为“前往”；
`done` 右下角按钮为“完成”。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html) */ + confirmType: { type: String, - value: 'always', + value: 'done', + }, + /** 指定 focus 时的光标位置 */ + cursor: { + type: Number, + required: true, + }, + /** 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 */ + cursorSpacing: { + type: Number, + value: 0, }, /** 是否禁用输入框 */ disabled: { type: Boolean, value: false, }, - /** 已废弃。错误提示文本，值为空不显示（废弃属性，如果需要，请更为使用 status 和 tips） */ - errorMessage: { - type: String, - value: '', - }, - /** 组件类名，用于设置组件外层元素、输入框、占位符、错误信息等元素类名 */ - externalClasses: { - type: Array, + /** 获取焦点 */ + focus: { + type: Boolean, + value: false, }, /** 【开发中】指定输入框展示值的格式 */ format: { type: null, }, + /** focus时，点击页面的时候不收起键盘 */ + holdKeyboard: { + type: Boolean, + value: false, + }, /** 左侧文本 */ label: { type: String, }, + /** 标题输入框布局方式 */ + layout: { + type: String, + value: 'horizontal', + }, /** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 */ maxcharacter: { type: Number, }, - /** 用户最多可以输入的文本长度，一个中文等于一个计数长度，默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 */ + /** 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 */ maxlength: { type: Number, value: -1, @@ -67,146 +103,89 @@ const props: TdInputProps = { type: String, value: undefined, }, - /** 组件前置图标，值为字符串则表示图标名称 */ - prefixIcon: { - type: null, - value: null, - }, - /** 只读状态 */ - readonly: { - type: Boolean, - value: false, - }, - /** 输入框尺寸 */ - size: { - type: String, - value: 'medium', - }, - /** 输入框状态 */ - status: { + /** 指定 placeholder 的样式类 */ + placeholderClass: { type: String, - value: 'default', + value: 'input-placeholder', }, - /** 后置图标前的后置内容 */ - suffix: { + /** 指定 placeholder 的样式 */ + placeholderStyle: { type: String, + value: '', + required: true, }, - /** 后置文本内容，值为字符串则表示图标名称 */ - suffixIcon: { + /** 组件前置图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` */ + prefixIcon: { type: null, - value: null, }, - /** 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 */ - tips: { - type: String, - }, - /** 输入框的值 */ - value: { - type: String, - optionalTypes: [Number], - value: null, - }, - /** 输入框的值，非受控属性 */ - defaultValue: { - type: String, - optionalTypes: [Number], - }, - /** input 的类型。
具体释义：
`text` 文本输入键盘；
`number` 数字输入键盘；
`idcard` 身份证输入键盘；
`digit` 带小数点的数字键盘；
`safe-password` 密码安全输入键盘 指引；
`nickname` 昵称输入键盘。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html) */ - type: { - type: String, - value: 'text', + /** 【开发中】只读状态 */ + readonly: { + type: Boolean, + value: false, }, - /** 指定 placeholder 的样式 */ - placeholderStyle: { + /** 安全键盘加密公钥的路径，只支持包内路径 */ + safePasswordCertPath: { type: String, value: '', }, - /** 指定 placeholder 的样式类 */ - placeholderClass: { + /** 安全键盘计算 hash 的算法表达式，如 `md5(sha1('foo' + sha256(sm3(password + 'bar'))))` */ + safePasswordCustomHash: { type: String, - value: 'input-placeholder', + value: '', }, - /** 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 */ - cursorSpacing: { + /** 安全键盘输入密码长度 */ + safePasswordLength: { type: Number, - value: 0, - }, - /** (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 */ - autoFocus: { - type: Boolean, - value: false, }, - /** 获取焦点 */ - focus: { - type: Boolean, - value: false, - }, - /** 设置键盘右下角按钮的文字，仅在type='text'时生效。
具体释义：
`send` 右下角按钮为“发送”；
`search` 右下角按钮为“搜索”；
`next` 右下角按钮为“下一个”；
`go` 右下角按钮为“前往”；
`done` 右下角按钮为“完成”。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html) */ - confirmType: { + /** 安全键盘加密盐值 */ + safePasswordNonce: { type: String, - value: 'done', - }, - /** 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) */ - alwaysEmbed: { - type: Boolean, - value: false, + value: '', }, - /** 点击键盘右下角按钮时是否保持键盘不收起 */ - confirmHold: { - type: Boolean, - value: false, + /** 安全键盘计算 hash 盐值，若指定custom-hash 则无效 */ + safePasswordSalt: { + type: String, + value: '', }, - /** 指定focus时的光标位置 */ - cursor: { + /** 安全键盘加密时间戳 */ + safePasswordTimeStamp: { type: Number, }, - /** 光标起始位置，自动聚集时有效，需与selection-end搭配使用 */ - selectionStart: { + /** 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 */ + selectionEnd: { type: Number, value: -1, }, - /** 光标结束位置，自动聚集时有效，需与selection-start搭配使用 */ - selectionEnd: { + /** 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 */ + selectionStart: { type: Number, value: -1, }, - /** 键盘弹起时，是否自动上推页面 */ - adjustPosition: { - type: Boolean, - value: true, - }, - /** focus时，点击页面的时候不收起键盘 */ - holdKeyboard: { - type: Boolean, - value: false, - }, - /** 安全键盘加密公钥的路径，只支持包内路径 */ - safePasswordCertPath: { + /** 输入框状态 */ + status: { type: String, - value: '', + value: 'default', }, - /** 安全键盘输入密码长度 */ - safePasswordLength: { - type: Number, + /** 后置图标前的后置内容 */ + suffix: { + type: String, }, - /** 安全键盘加密时间戳 */ - safePasswordTimeStamp: { - type: Number, + /** 后置文本内容。值为字符串则表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 */ + suffixIcon: { + type: null, }, - /** 安全键盘加密盐值 */ - safePasswordNonce: { + /** 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 */ + tips: { type: String, - value: '', }, - /** 安全键盘计算hash盐值，若指定custom-hash 则无效 */ - safePasswordSalt: { + /** 输入框类型 */ + type: { type: String, - value: '', + value: 'text', }, - /** 安全键盘计算hash的算法表达式，如 `md5(sha1('foo' + sha256(sm3(password + 'bar'))))` */ - safePasswordCustomHash: { - type: String, - value: '', + /** 输入框的值 */ + value: { + type: null, }, }; diff --git a/src/input/type.ts b/src/input/type.ts index d8693e844..c7183157b 100644 --- a/src/input/type.ts +++ b/src/input/type.ts @@ -5,6 +5,14 @@ * */ export interface TdInputProps { + /** + * 键盘弹起时，是否自动上推页面 + * @default true + */ + adjustPosition?: { + type: BooleanConstructor; + value?: boolean; + }; /** * 文本内容位置，居左/居中/居右 * @default left @@ -14,31 +22,31 @@ export interface TdInputProps { value?: 'left' | 'center' | 'right'; }; /** - * 标题输入框布局方式 - * @default horizontal + * 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) + * @default false */ - layout?: { - type: StringConstructor; - value?: 'horizontal' | 'vertical'; + alwaysEmbed?: { + type: BooleanConstructor; + value?: boolean; }; /** - * 是否开启无边框模式 - * @default true + * (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 + * @default false */ - borderless?: { + autoFocus?: { type: BooleanConstructor; value?: boolean; }; /** - * 是否可清空 + * 是否开启无边框模式 * @default false */ - clearable?: { - type: null; - value?: boolean | object; + borderless?: { + type: BooleanConstructor; + value?: boolean; }; /** - * 清空图标触发方式 + * 清空图标触发方式，仅在输入框有值时有效 * @default always */ clearTrigger?: { @@ -46,148 +54,120 @@ export interface TdInputProps { value?: 'always' | 'focus'; }; /** - * 自定义组件样式 - * @default '' + * 是否可清空，默认不启动。值为 `true` 表示使用默认清除空按钮，值为 `Object` 表示透传至 `icon` + * @default false */ - style?: { - type: StringConstructor; - value?: string; + clearable?: { + type: null; + value?: boolean | object; }; /** - * 是否禁用输入框 + * 点击键盘右下角按钮时是否保持键盘不收起 * @default false */ - disabled?: { + confirmHold?: { type: BooleanConstructor; value?: boolean; }; /** - * 错误提示文本，值为空不显示（废弃属性，如果需要，请更为使用 status 和 tips） - * @default '' - * @deprecated - */ - errorMessage?: { - type: StringConstructor; - value?: string; - }; - /** - * 组件类名，用于设置组件外层元素、输入框、占位符、错误信息等元素类名 - */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-input', 't-class-placeholder', 't-class-error-msg']; - }; - /** - * 【开发中】指定输入框展示值的格式 - */ - format?: { - type: null; - value?: InputFormatType; - }; - /** - * 左侧文本 + * 设置键盘右下角按钮的文字，仅在type='text'时生效。
具体释义：
`send` 右下角按钮为“发送”；
`search` 右下角按钮为“搜索”；
`next` 右下角按钮为“下一个”；
`go` 右下角按钮为“前往”；
`done` 右下角按钮为“完成”。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html) + * @default done */ - label?: { + confirmType?: { type: StringConstructor; - value?: string; + value?: 'send' | 'search' | 'next' | 'go' | 'done'; }; /** - * 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 + * 指定 focus 时的光标位置 */ - maxcharacter?: { + cursor: { type: NumberConstructor; value?: number; + required?: boolean; }; /** - * 用户最多可以输入的文本长度，一个中文等于一个计数长度，默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 - * @default -1 + * 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 + * @default 0 */ - maxlength?: { + cursorSpacing?: { type: NumberConstructor; value?: number; }; /** - * 占位符 - */ - placeholder?: { - type: StringConstructor; - value?: string; - }; - /** - * 组件前置图标，值为字符串则表示图标名称 + * 是否禁用输入框 + * @default false */ - prefixIcon?: { - type: null; - value?: string | object; + disabled?: { + type: BooleanConstructor; + value?: boolean; }; /** - * 只读状态 + * 获取焦点 * @default false */ - readonly?: { + focus?: { type: BooleanConstructor; value?: boolean; }; /** - * 输入框尺寸 - * @default small + * 【开发中】指定输入框展示值的格式 */ - size?: { - type: StringConstructor; - value?: 'medium' | 'small'; + format?: { + type: undefined; + value?: InputFormatType; }; /** - * 输入框状态 - * @default default + * focus时，点击页面的时候不收起键盘 + * @default false */ - status?: { - type: StringConstructor; - value?: 'default' | 'success' | 'warning' | 'error'; + holdKeyboard?: { + type: BooleanConstructor; + value?: boolean; }; /** - * 后置图标前的后置内容 + * 左侧文本 */ - suffix?: { + label?: { type: StringConstructor; value?: string; }; /** - * 后置文本内容，值为字符串则表示图标名称 + * 标题输入框布局方式 + * @default horizontal */ - suffixIcon?: { - type: null; - value?: string | object; + layout?: { + type: StringConstructor; + value?: 'vertical' | 'horizontal'; }; /** - * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 + * 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 */ - tips?: { - type: StringConstructor; - value?: string; + maxcharacter?: { + type: NumberConstructor; + value?: number; }; /** - * 输入框类型 - * @default text + * 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 + * @default -1 */ - type?: { - type: StringConstructor; - value?: 'text' | 'number' | 'idcard' | 'digit' | 'safe-password' | 'password' | 'nickname'; + maxlength?: { + type: NumberConstructor; + value?: number; }; /** - * 输入框的值 + * 占位符 */ - value?: { + placeholder?: { type: StringConstructor; - optionalTypes: Array; - value?: InputValue; + value?: string; }; /** - * 输入框的值，非受控属性 + * 指定 placeholder 的样式类 + * @default input-placeholder */ - defaultValue?: { + placeholderClass?: { type: StringConstructor; - optionalTypes: Array; - value?: InputValue; + value?: string; }; /** * 指定 placeholder 的样式 @@ -196,80 +176,71 @@ export interface TdInputProps { placeholderStyle: { type: StringConstructor; value?: string; + required?: boolean; }; /** - * 指定 placeholder 的样式类 - * @default input-placeholder - */ - placeholderClass?: { - type: StringConstructor; - value?: string; - }; - /** - * 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 - * @default 0 + * 组件前置图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` */ - cursorSpacing?: { - type: NumberConstructor; - value?: number; + prefixIcon?: { + type: null; + value?: string | object; }; /** - * (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 + * 【开发中】只读状态 * @default false */ - autoFocus?: { + readonly?: { type: BooleanConstructor; value?: boolean; }; /** - * 获取焦点 - * @default false + * 安全键盘加密公钥的路径，只支持包内路径 + * @default '' */ - focus?: { - type: BooleanConstructor; - value?: boolean; + safePasswordCertPath?: { + type: StringConstructor; + value?: string; }; /** - * 设置键盘右下角按钮的文字，仅在type='text'时生效。
具体释义：
`send` 右下角按钮为“发送”；
`search` 右下角按钮为“搜索”；
`next` 右下角按钮为“下一个”；
`go` 右下角按钮为“前往”；
`done` 右下角按钮为“完成”。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html) - * @default done + * 安全键盘计算 hash 的算法表达式，如 `md5(sha1('foo' + sha256(sm3(password + 'bar'))))` + * @default '' */ - confirmType?: { + safePasswordCustomHash?: { type: StringConstructor; - value?: 'send' | 'search' | 'next' | 'go' | 'done'; + value?: string; }; /** - * 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) - * @default false + * 安全键盘输入密码长度 */ - alwaysEmbed?: { - type: BooleanConstructor; - value?: boolean; + safePasswordLength?: { + type: NumberConstructor; + value?: number; }; /** - * 点击键盘右下角按钮时是否保持键盘不收起 - * @default false + * 安全键盘加密盐值 + * @default '' */ - confirmHold?: { - type: BooleanConstructor; - value?: boolean; + safePasswordNonce?: { + type: StringConstructor; + value?: string; }; /** - * 指定focus时的光标位置 + * 安全键盘计算 hash 盐值，若指定custom-hash 则无效 + * @default '' */ - cursor: { - type: NumberConstructor; - value?: number; + safePasswordSalt?: { + type: StringConstructor; + value?: string; }; /** - * 光标起始位置，自动聚集时有效，需与selection-end搭配使用 - * @default -1 + * 安全键盘加密时间戳 */ - selectionStart?: { + safePasswordTimeStamp?: { type: NumberConstructor; value?: number; }; /** - * 光标结束位置，自动聚集时有效，需与selection-start搭配使用 + * 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 * @default -1 */ selectionEnd?: { @@ -277,69 +248,59 @@ export interface TdInputProps { value?: number; }; /** - * 键盘弹起时，是否自动上推页面 - * @default true + * 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 + * @default -1 */ - adjustPosition?: { - type: BooleanConstructor; - value?: boolean; + selectionStart?: { + type: NumberConstructor; + value?: number; }; /** - * focus时，点击页面的时候不收起键盘 - * @default false + * 输入框状态 + * @default default */ - holdKeyboard?: { - type: BooleanConstructor; - value?: boolean; + status?: { + type: StringConstructor; + value?: 'default' | 'success' | 'warning' | 'error'; }; /** - * 安全键盘加密公钥的路径，只支持包内路径 - * @default '' + * 后置图标前的后置内容 */ - safePasswordCertPath?: { + suffix?: { type: StringConstructor; value?: string; }; /** - * 安全键盘输入密码长度 - */ - safePasswordLength?: { - type: NumberConstructor; - value?: number; - }; - /** - * 安全键盘加密时间戳 + * 后置文本内容。值为字符串则表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 */ - safePasswordTimeStamp?: { - type: NumberConstructor; - value?: number; + suffixIcon?: { + type: null; + value?: string | object; }; /** - * 安全键盘加密盐值 - * @default '' + * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 */ - safePasswordNonce?: { + tips?: { type: StringConstructor; value?: string; }; /** - * 安全键盘计算hash盐值，若指定custom-hash 则无效 - * @default '' + * 输入框类型 + * @default text */ - safePasswordSalt?: { + type?: { type: StringConstructor; - value?: string; + value?: 'text' | 'number' | 'idcard' | 'digit' | 'safe-password' | 'password' | 'nickname'; }; /** - * 安全键盘计算hash的算法表达式，如 `md5(sha1('foo' + sha256(sm3(password + 'bar'))))` - * @default '' + * 输入框的值 */ - safePasswordCustomHash?: { - type: StringConstructor; - value?: string; + value?: { + type: null; + value?: InputValue; }; } -export type InputFormatType = (value: InputValue) => number | string; +export type InputFormatType = (value: InputValue) => string; export type InputValue = string | number; diff --git a/src/link/README.en-US.md b/src/link/README.en-US.md index 7ab37a553..624069424 100644 --- a/src/link/README.en-US.md +++ b/src/link/README.en-US.md @@ -1,19 +1,22 @@ :: BASE_DOC :: ## API + ### Link Props name | type | default | description | required -- | -- | -- | -- | -- -content | String / Slot | - | \- | N -navigator-props | Object | - | \- | N -prefix-icon | String / Object / Slot | - | \- | N -size | String | medium | options：small/medium/large。Typescript：`SizeEnum` | N -status | String | normal | options：normal/active/disabled | N -disabled | Boolean | false | \- | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +disabled | Boolean | false | make link to be disabled | N hover | Boolean | - | \- | N -suffix-icon | String / Object / Slot | - | \- | N -theme | String | default | options：default/primary/danger/warning/success | N +navigator-props | Object | - | \- | N +prefix-icon | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +status | String | normal | `deprecated`。options: normal/active/disabled | N +suffix-icon | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +theme | String | default | options: default/primary/danger/warning/success | N underline | Boolean | - | \- | N ### Link Events @@ -23,9 +26,18 @@ name | params | description complete | \- | \- fail | \- | \- success | \- | \- +### Link External Classes +className | Description +-- | -- +t-class | class name of root node +t-class-content | \- +t-class-hover | \- +t-class-prefix-icon | \- +t-class-suffix-icon | \- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -43,4 +55,4 @@ Name | Default Value | Description --td-link-success-disabled-color | @success-color-disabled | - --td-link-warning-active-color | @warning-color-active | - --td-link-warning-color | @warning-color | - ---td-link-warning-disabled-color | @warning-color-disabled | - +--td-link-warning-disabled-color | @warning-color-disabled | - \ No newline at end of file diff --git a/src/link/README.md b/src/link/README.md index 641478ae9..d3e514008 100644 --- a/src/link/README.md +++ b/src/link/README.md @@ -65,20 +65,24 @@ isComponent: true {{ size }} ## API + ### Link Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -content | String / Slot | - | 链接内容 | N -navigator-props | Object | - | 与 navigator 原生组件属性保持一致，具体使用参考：[微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)。使用时请将形如 `open-type` 风格的属性名改为 `openType` 风格 | N -prefix-icon | String / Object / Slot | - | 前置图标 | N -size | String | medium | 尺寸。可选项：small/medium/large。TS 类型：`SizeEnum` | N -status | String | normal | 已废弃。组件状态。可选项：normal/active/disabled | N +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +content | String / Slot | - | 链接内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N disabled | Boolean | false | 是否为禁用态 | N hover | Boolean | - | 是否开启点击反馈 | N -suffix-icon | String / Object / Slot | - | 前置图标 | N +navigator-props | Object | - | 与 navigator 原生组件属性保持一致，具体使用参考：[微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)。使用时请将形如 `open-type` 风格的属性名改为 `openType` 风格 | N +prefix-icon | String / Object / Slot | - | 前置图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +size | String | medium | 尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +status | String | normal | 已废弃。组件状态。可选项：normal/active/disabled | N +suffix-icon | String / Object / Slot | - | 后置图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N theme | String | default | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N underline | Boolean | - | 是否显示链接下划线 | N + ### Link Events 名称 | 参数 | 描述 @@ -86,17 +90,18 @@ underline | Boolean | - | 是否显示链接下划线 | N complete | \- | 页面链接执行完成后触发（失败或成功均会触发） fail | \- | 页面链接跳转失败后触发 success | \- | 页面链接跳转成功后触发 +### Link External Classes -### Link 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 +t-class-content | 内容样式类 t-class-hover | 悬停样式类 t-class-prefix-icon | 前置图标样式类 -t-class-content | 内容样式类 t-class-suffix-icon | 后置图标样式类 -### CSS 变量 +### CSS Variables + 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -114,4 +119,4 @@ t-class-suffix-icon | 后置图标样式类 --td-link-success-disabled-color | @success-color-disabled | - --td-link-warning-active-color | @warning-color-active | - --td-link-warning-color | @warning-color | - ---td-link-warning-disabled-color | @warning-color-disabled | - +--td-link-warning-disabled-color | @warning-color-disabled | - \ No newline at end of file diff --git a/src/link/props.ts b/src/link/props.ts index b1021d552..848d14019 100644 --- a/src/link/props.ts +++ b/src/link/props.ts @@ -10,7 +10,16 @@ const props: TdLinkProps = { content: { type: String, }, - /** 与 navigator 原生组件属性保持一致，具体使用参考：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html。 */ + /** 是否为禁用态 */ + disabled: { + type: Boolean, + value: false, + }, + /** 是否开启点击反馈 */ + hover: { + type: Boolean, + }, + /** 与 navigator 原生组件属性保持一致，具体使用参考：[微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)。使用时请将形如 `open-type` 风格的属性名改为 `openType` 风格 */ navigatorProps: { type: Object, }, @@ -23,22 +32,7 @@ const props: TdLinkProps = { type: String, value: 'medium', }, - /** 已废弃。组件状态 */ - status: { - type: String, - value: 'normal', - }, - /** 禁用态 */ - disabled: { - type: Boolean, - value: false, - }, - /** 是否开启点击反馈 */ - hover: { - type: Boolean, - value: false, - }, - /** 前置图标 */ + /** 后置图标 */ suffixIcon: { type: null, }, @@ -47,7 +41,7 @@ const props: TdLinkProps = { type: String, value: 'default', }, - /** 普通状态是否显示链接下划线 */ + /** 是否显示链接下划线 */ underline: { type: Boolean, }, diff --git a/src/link/type.ts b/src/link/type.ts index c218fca23..855b2f40f 100644 --- a/src/link/type.ts +++ b/src/link/type.ts @@ -15,7 +15,22 @@ export interface TdLinkProps { value?: string; }; /** - * 与 navigator 原生组件属性保持一致，具体使用参考：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html。 + * 是否为禁用态 + * @default false + */ + disabled?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 是否开启点击反馈 + */ + hover?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 与 navigator 原生组件属性保持一致，具体使用参考：[微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)。使用时请将形如 `open-type` 风格的属性名改为 `openType` 风格 */ navigatorProps?: { type: ObjectConstructor; @@ -37,30 +52,7 @@ export interface TdLinkProps { value?: SizeEnum; }; /** - * 已废弃。组件状态 - * @default normal - */ - status?: { - type: StringConstructor; - value?: 'normal' | 'active' | 'disabled'; - }; - /** - * 禁用态 - * @default false - */ - disabled?: { - type: BooleanConstructor; - value?: boolean; - }; - /** - * 是否开启点击反馈 - */ - hover?: { - type: BooleanConstructor; - value?: boolean; - }; - /** - * 前置图标 + * 后置图标 */ suffixIcon?: { type: null; diff --git a/src/loading/README.en-US.md b/src/loading/README.en-US.md index c2414ba34..ac1e999f7 100644 --- a/src/loading/README.en-US.md +++ b/src/loading/README.en-US.md @@ -1,30 +1,39 @@ :: BASE_DOC :: ## API + ### Loading Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N delay | Number | 0 | \- | N duration | Number | 800 | \- | N -external-classes | Array | - | `['t-class', 't-class-text', 't-class-indicator']` | N indicator | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N inherit-color | Boolean | false | \- | N -layout | String | horizontal | options：horizontal/vertical | N +layout | String | horizontal | options: horizontal/vertical | N loading | Boolean | true | \- | N pause | Boolean | false | \- | N progress | Number | - | \- | N reverse | Boolean | - | \- | N size | String | '40rpx' | \- | N text | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N -theme | String | circular | options：circular/spinner/dots | N +theme | String | circular | options: circular/spinner/dots | N +### Loading External Classes +className | Description +-- | -- +t-class | \- +t-class-indicator | \- +t-class-text | \- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- --td-loading-color | @brand-color | - --td-loading-text-color | inherit | - --td-loading-text-font-size | 24rpx | - ---td-loading-text-line-height | 40rpx | - +--td-loading-text-line-height | 40rpx | - \ No newline at end of file diff --git a/src/loading/README.md b/src/loading/README.md index 7ead6dad7..50dad4760 100644 --- a/src/loading/README.md +++ b/src/loading/README.md @@ -57,10 +57,13 @@ isComponent: true {{ size }} ## API + ### Loading Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N duration | Number | 800 | 加载动画执行完成一次的时间，单位：毫秒 | N indicator | Boolean / Slot | true | 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N @@ -73,19 +76,20 @@ reverse | Boolean | - | 加载动画是否反向 | N size | String | '40rpx' | 尺寸，示例：40rpx/20px | N text | String / Slot | - | 加载提示文案。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N theme | String | circular | 加载组件类型。可选项：circular/spinner/dots，skyline 模式下暂不支持枚举值 circular | N +### Loading External Classes -### Loading 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 -t-class-text | 文本样式类 t-class-indicator | 指示符样式类 +t-class-text | 文本样式类 + +### CSS Variables -### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- --td-loading-color | @brand-color | - --td-loading-text-color | inherit | - --td-loading-text-font-size | 24rpx | - ---td-loading-text-line-height | 40rpx | - +--td-loading-text-line-height | 40rpx | - \ No newline at end of file diff --git a/src/message/README.en-US.md b/src/message/README.en-US.md index ea7a62639..b6146551a 100644 --- a/src/message/README.en-US.md +++ b/src/message/README.en-US.md @@ -1,25 +1,28 @@ :: BASE_DOC :: ## API + ### Message Props name | type | default | description | required -- | -- | -- | -- | -- -action | String / Slot | - | operation | N -align | String | left | options：left/center。Typescript：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N -close-btn | String / Boolean / Object / Slot | false | \- | N -content | String / Slot | - | \- | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +action | String / Slot | - | `deprecated`。operation。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +align | String | left | options: left/center。Typescript：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N +close-btn | String / Boolean / Object / Slot | false | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N duration | Number | 3000 | \- | N -external-classes | Array | - | `['t-class', 't-class-content', 't-class-icon', 't-class-link', 't-class-close-btn']` | N -icon | String / Boolean / Object/ Slot | true | Typescript：`boolean \| 'info' \| 'bell'` | N -marquee | Boolean / Object | false | Typescript：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N +gap | String / Number / Boolean | 12 | \- | N +icon | String / Boolean / Object / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +link | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +marquee | Boolean / Object | false | Typescript：`boolean \| MessageMarquee` `interface MessageMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N offset | Array | - | Typescript：`Array` | N -theme | String | info | options：info/success/warning/error。Typescript：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N +single | Boolean | true | \- | N +theme | String | info | options: info/success/warning/error。Typescript：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N visible | Boolean | false | \- | N -default-visible | Boolean | false | uncontrolled property | N +default-visible | Boolean | undefined | uncontrolled property | N z-index | Number | 15000 | \- | N -single | Boolean | true | Whether to display only one message. Note that when single=false, the three categories of link, scroll, and close will not be covered.| N -gap | String | 12 | The spacing between two messages, default 12px. Example: '12', '12px', '18rpx' | N ### Message Events @@ -28,10 +31,19 @@ name | params | description action-btn-click | - | \- close-btn-click | - | \- duration-end | \- | \- -link-click | \- | \- +link-click | - | \- +### Message External Classes +className | Description +-- | -- +t-class | \- +t-class-close-btn | \- +t-class-content | \- +t-class-icon | \- +t-class-link | \- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -43,4 +55,4 @@ Name | Default Value | Description --td-message-error-color | @error-color | - --td-message-info-color | @brand-color | - --td-message-success-color | @success-color | - ---td-message-warning-color | @warning-color | - +--td-message-warning-color | @warning-color | - \ No newline at end of file diff --git a/src/message/README.md b/src/message/README.md index 245479261..bd52765f2 100644 --- a/src/message/README.md +++ b/src/message/README.md @@ -47,25 +47,29 @@ import Message from 'tdesign-miniprogram/message/index'; {{ theme }} ## API + ### Message Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -action | String / Slot | - | 已废弃。操作 | N +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +action | String / Slot | - | 已废弃。操作。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N align | String | left | 文本对齐方式。可选项：left/center。TS 类型：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N -close-btn | String / Boolean / Object / Slot | false | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'user'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件。| N -content | String / Slot | - | 用于自定义消息弹出内容 | N +close-btn | String / Boolean / Object / Slot | false | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'user'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +content | String / Slot | - | 用于自定义消息弹出内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。 | N -icon | String / Boolean / Object / Slot | true | 消息提醒前面的图标，可以自定义。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'info'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件。| N -marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N +gap | String / Number / Boolean | 12 | 两条 `message` 之间的间距 | N +icon | String / Boolean / Object / Slot | true | 消息提醒前面的图标，可以自定义。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'info'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +link | String / Object / Slot | - | 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| MessageMarquee` `interface MessageMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N offset | Array | - | 相对于 placement 的偏移量，默认单位 rpx。示例：[-10, 20] 或 ['10rpx', '8rpx']。TS 类型：`Array` | N +single | Boolean | true | 是否保持仅显示一条信息 | N theme | String | info | 消息组件风格。可选项：info/success/warning/error。TS 类型：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N visible | Boolean | false | 是否显示，隐藏时默认销毁组件 | N -default-visible | Boolean | false | 是否显示，隐藏时默认销毁组件。非受控属性 | N +default-visible | Boolean | undefined | 是否显示，隐藏时默认销毁组件。非受控属性 | N z-index | Number | 15000 | 元素层级，样式默认为 15000 | N -link | String / Object / Slot | - | 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link`。 | N -single | Boolean | true | 是否仅显示一条消息。注意 single=false 时带链接、滚动、带关闭此三类不会被覆盖 | N -gap | String | 12 | 两条消息之间的间距，默认12px。示例：'12', '12px', '18rpx' | N + ### Message Events 名称 | 参数 | 描述 @@ -74,17 +78,18 @@ action-btn-click | - | 已废弃。当操作按钮存在时，用户点击操作 close-btn-click | - | 当关闭按钮存在时，用户点击关闭按钮触发 duration-end | \- | 计时结束后触发 link-click | - | 当`link`链接存在时，点击链接文本时触发 +### Message External Classes -### Message 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 +t-class-close-btn | 关闭按钮样式类 t-class-content | 内容样式类 t-class-icon | 图标样式类 t-class-link | 链接样式类 -t-class-close-btn | 关闭按钮样式类 -### CSS 变量 +### CSS Variables + 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -96,4 +101,4 @@ t-class-close-btn | 关闭按钮样式类 --td-message-error-color | @error-color | - --td-message-info-color | @brand-color | - --td-message-success-color | @success-color | - ---td-message-warning-color | @warning-color | - +--td-message-warning-color | @warning-color | - \ No newline at end of file diff --git a/src/message/props.ts b/src/message/props.ts index e325f5252..375da6bd6 100644 --- a/src/message/props.ts +++ b/src/message/props.ts @@ -6,16 +6,12 @@ import { TdMessageProps } from './type'; const props: TdMessageProps = { - /** 操作 */ - action: { - type: String, - }, /** 文本对齐方式 */ align: { type: String, value: 'left', }, - /** 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮 */ + /** 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'user'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件 */ closeBtn: { type: null, value: false, @@ -29,24 +25,34 @@ const props: TdMessageProps = { type: Number, value: 3000, }, - /** 样式类名，分别用于设置 组件外层、消息内容、左侧图标、操作按钮、关闭按钮等元素类名 */ - externalClasses: { - type: Array, + /** 两条 `message` 之间的间距 */ + gap: { + type: null, + value: 12, }, - /** 消息提醒前面的图标。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 'info' 或 'bell' 则显示组件内置图标。也可以完全自定义图标节点 */ + /** 消息提醒前面的图标，可以自定义。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'info'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件 */ icon: { type: null, value: true, }, + /** 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link` */ + link: { + type: null, + }, /** 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放 */ marquee: { type: null, value: false, }, - /** 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10rpx', '8rpx'] */ + /** 相对于 placement 的偏移量，默认单位 rpx。示例：[-10, 20] 或 ['10rpx', '8rpx'] */ offset: { type: Array, }, + /** 是否保持仅显示一条信息 */ + single: { + type: Boolean, + value: true, + }, /** 消息组件风格 */ theme: { type: String, @@ -62,29 +68,11 @@ const props: TdMessageProps = { type: Boolean, value: false, }, - /** 组件层级，样式默认为 15000 */ + /** 元素层级，样式默认为 15000 */ zIndex: { type: Number, value: 15000, }, - /** 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link`。 */ - link: { - type: null, - }, - /** - * 两条message之间的间距 - */ - gap: { - type: null, - value: 12, - }, - /** - * 是否保持仅显示一条信息 - */ - single: { - type: Boolean, - value: true, - }, }; export default props; diff --git a/src/message/type.ts b/src/message/type.ts index 63b6d4a00..84ca88743 100644 --- a/src/message/type.ts +++ b/src/message/type.ts @@ -5,13 +5,6 @@ * */ export interface TdMessageProps { - /** - * 操作 - */ - action?: { - type: StringConstructor; - value?: string; - }; /** * 文本对齐方式 * @default left @@ -21,12 +14,12 @@ export interface TdMessageProps { value?: MessageAlignType; }; /** - * 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮 + * 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'user'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件 * @default false */ closeBtn?: { type: null; - value?: string | boolean; + value?: string | boolean | object; }; /** * 用于自定义消息弹出内容 @@ -35,14 +28,6 @@ export interface TdMessageProps { type: StringConstructor; value?: string; }; - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; /** * 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。 * @default 3000 @@ -52,19 +37,27 @@ export interface TdMessageProps { value?: number; }; /** - * 样式类名，分别用于设置 组件外层、消息内容、左侧图标、操作按钮、关闭按钮等元素类名 + * 两条 `message` 之间的间距 + * @default 12 */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-content', 't-class-icon', 't-class-action', 't-class-close-btn']; + gap?: { + type: null; + value?: string | number | boolean; }; /** - * 消息提醒前面的图标。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 'info' 或 'bell' 则显示组件内置图标。也可以完全自定义图标节点 + * 消息提醒前面的图标，可以自定义。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'info'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件 * @default true */ icon?: { type: null; - value?: boolean | 'info' | 'bell'; + value?: string | boolean | object; + }; + /** + * 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link` + */ + link?: { + type: null; + value?: string | object; }; /** * 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放 @@ -72,15 +65,23 @@ export interface TdMessageProps { */ marquee?: { type: null; - value?: boolean | DrawMarquee; + value?: boolean | MessageMarquee; }; /** - * 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10rpx', '8rpx'] + * 相对于 placement 的偏移量，默认单位 rpx。示例：[-10, 20] 或 ['10rpx', '8rpx'] */ offset?: { type: ArrayConstructor; value?: Array; }; + /** + * 是否保持仅显示一条信息 + * @default true + */ + single?: { + type: BooleanConstructor; + value?: boolean; + }; /** * 消息组件风格 * @default info @@ -106,39 +107,18 @@ export interface TdMessageProps { value?: boolean; }; /** - * 组件层级，样式默认为 15000 + * 元素层级，样式默认为 15000 * @default 15000 */ zIndex?: { type: NumberConstructor; value?: number; }; - /** - * 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link`。 - */ - link?: { - type: null; - value?: string | object; - }; - /** - * 两条message之间的间距 - */ - gap?: { - type: null; - value?: string | number; - }; - /** - * 是否保持仅显示一条信息 - */ - single?: { - type: BooleanConstructor; - value?: boolean; - }; } export type MessageAlignType = 'left' | 'center'; -export interface DrawMarquee { +export interface MessageMarquee { speed?: number; loop?: number; delay?: number; diff --git a/src/notice-bar/README.en-US.md b/src/notice-bar/README.en-US.md index 9abafcde9..e5ecd0e7f 100644 --- a/src/notice-bar/README.en-US.md +++ b/src/notice-bar/README.en-US.md @@ -1,31 +1,42 @@ :: BASE_DOC :: ## API + ### NoticeBar Props name | type | default | description | required -- | -- | -- | -- | -- -content | String / Array / Slot | - | \- | N -direction | String | horizontal | options：horizontal/vertical | N -external-classes | Array | - | `['t-class', 't-class-content', 't-class-prefix-icon', 't-class-operation', 't-class-suffix-icon']` | N -operation | String / Slot | - | \- | N -marquee | Boolean / Object | false | Typescript：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N -interval | Number | 2000 | - | N -prefix-icon | String / Boolean/ Object / Slot | - | \- | N -suffix-icon | String / Boolean / Object / Slot | - | \- | N -theme | String | info | options：info/success/warning/error | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +content | String / Array / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +direction | String | horizontal | options: horizontal/vertical | N +interval | Number | 2000 | \- | N +marquee | Boolean / Object | false | Typescript：`boolean \| NoticeBarMarquee` `interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N +operation | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +prefix-icon | String / Boolean / Object / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +suffix-icon | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +theme | String | info | options: info/success/warning/error | N visible | Boolean | false | \- | N -default-visible | Boolean | false | uncontrolled property | N +default-visible | Boolean | undefined | uncontrolled property | N ### NoticeBar Events name | params | description -- | -- | -- +change | `(current: number, source: '' \| 'autoplay' \| 'touch')` | \- click | `(trigger: NoticeBarTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。
`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`
-change | `(current: number, source: '' \| 'autoplay' \| 'touch')` | `direction="vertical"` +### NoticeBar External Classes +className | Description +-- | -- +t-class | \- +t-class-content | \- +t-class-operation | \- +t-class-prefix-icon | \- +t-class-suffix-icon | \- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -39,4 +50,4 @@ Name | Default Value | Description --td-notice-bar-success-color | @success-color | - --td-notice-bar-suffix-icon-color | @font-gray-3 | - --td-notice-bar-warning-bg-color | @warning-color-1 | - ---td-notice-bar-warning-color | @warning-color | - +--td-notice-bar-warning-color | @warning-color | - \ No newline at end of file diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md index 18332e012..280646242 100644 --- a/src/notice-bar/README.md +++ b/src/notice-bar/README.md @@ -72,38 +72,42 @@ isComponent: true ## API + ### NoticeBar Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -content | String / Array / Slot | - | 文本内容 | N +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +content | String / Array / Slot | - | 文本内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N direction | String | horizontal | 滚动方向。可选项：horizontal/vertical | N -operation | String / Slot | - | 右侧额外信息 | N -marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N -interval | Number | 2000 | 间隔时间【仅在 direction='vertical' 有效】。 | N -prefix-icon | String / Boolean / Object / Slot | - | 前缀图标。值为字符串表示图标名称，值为 `false` 表示不显示前缀图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标。| N -suffix-icon | String / Object / Slot | - | 后缀图标。值为字符串表示图标名称。值为 `Object` 类型，表示透传至 `icon`，不传表示不显示后缀图标。 | N +interval | Number | 2000 | 间隔时间【仅在 direction='vertical' 有效】 | N +marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】。TS 类型：`boolean \| NoticeBarMarquee` `interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N +operation | String / Slot | - | 右侧额外信息。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +prefix-icon | String / Boolean / Object / Slot | true | 前缀图标。值为字符串表示图标名称，值为 `false` 表示不显示前缀图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +suffix-icon | String / Object / Slot | - | 后缀图标。值为字符串表示图标名称。值为 `Object` 类型，表示透传至 `icon`，不传表示不显示后缀图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N theme | String | info | 内置主题。可选项：info/success/warning/error | N visible | Boolean | false | 显示/隐藏 | N -default-visible | Boolean | false | 显示/隐藏。非受控属性 | N +default-visible | Boolean | undefined | 显示/隐藏。非受控属性 | N ### NoticeBar Events 名称 | 参数 | 描述 -- | -- | -- -click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。
`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`
change | `(current: number, source: '' \| 'autoplay' \| 'touch')` | 当 `direction="vertical"` 时轮播切换时触发 +click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。
`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`
+### NoticeBar External Classes -### NoticeBar 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 t-class-content | 内容样式类 -t-class-prefix-icon | 前置图标样式类 t-class-operation | 右侧额外信息样式类 +t-class-prefix-icon | 前置图标样式类 t-class-suffix-icon | 后置图标样式类 -### CSS 变量 +### CSS Variables + 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -117,4 +121,4 @@ t-class-suffix-icon | 后置图标样式类 --td-notice-bar-success-color | @success-color | - --td-notice-bar-suffix-icon-color | @font-gray-3 | - --td-notice-bar-warning-bg-color | @warning-color-1 | - ---td-notice-bar-warning-color | @warning-color | - +--td-notice-bar-warning-color | @warning-color | - \ No newline at end of file diff --git a/src/notice-bar/props.ts b/src/notice-bar/props.ts index 835ee6bc7..8fc240435 100644 --- a/src/notice-bar/props.ts +++ b/src/notice-bar/props.ts @@ -10,38 +10,33 @@ const props: TdNoticeBarProps = { content: { type: null, }, - /** 滚动方向，可选 horizontal、vertical */ + /** 滚动方向 */ direction: { type: String, value: 'horizontal', }, - /** 组件类名，分别用于设置 组件外层元素、文本内容、前缀图标、右侧额外信息、后缀图标 等元素类名。 */ - externalClasses: { - type: Array, - }, - /** 右侧额外信息 */ - operation: { - type: String, - }, - /** 间隔时间 */ + /** 间隔时间【仅在 direction='vertical' 有效】 */ interval: { type: Number, value: 2000, }, - /** 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放 */ + /** 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】 */ marquee: { type: null, value: false, }, - /** 前缀图标 */ + /** 右侧额外信息 */ + operation: { + type: String, + }, + /** 前缀图标。值为字符串表示图标名称，值为 `false` 表示不显示前缀图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标 */ prefixIcon: { type: null, value: true, }, - /** 后缀图标 */ + /** 后缀图标。值为字符串表示图标名称。值为 `Object` 类型，表示透传至 `icon`，不传表示不显示后缀图标 */ suffixIcon: { type: null, - value: null, }, /** 内置主题 */ theme: { diff --git a/src/notice-bar/type.ts b/src/notice-bar/type.ts index 71276dd0b..5c9342126 100644 --- a/src/notice-bar/type.ts +++ b/src/notice-bar/type.ts @@ -10,18 +10,10 @@ export interface TdNoticeBarProps { */ content?: { type: null; - value?: null; + value?: string | string[]; }; /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; - /** - * 滚动方向，可选 horizontal、vertical + * 滚动方向 * @default horizontal */ direction?: { @@ -29,44 +21,38 @@ export interface TdNoticeBarProps { value?: 'horizontal' | 'vertical'; }; /** - * 组件类名，分别用于设置 组件外层元素、文本内容、前缀图标、右侧额外信息、后缀图标 等元素类名。 - */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-content', 't-class-prefix-icon', 't-class-operation', 't-class-suffix-icon']; - }; - /** - * 右侧额外信息 + * 间隔时间【仅在 direction='vertical' 有效】 + * @default 2000 */ - operation?: { - type: StringConstructor; - value?: string; - }; - /** - * 间隔时间 - */ - interval: { + interval?: { type: NumberConstructor; - value: number; + value?: number; }; /** - * 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放 + * 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】 * @default false */ marquee?: { type: null; - value?: boolean | DrawMarquee; + value?: boolean | NoticeBarMarquee; }; /** - * 前缀图标 + * 右侧额外信息 + */ + operation?: { + type: StringConstructor; + value?: string; + }; + /** + * 前缀图标。值为字符串表示图标名称，值为 `false` 表示不显示前缀图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标 * @default true */ prefixIcon?: { type: null; - value?: boolean | string | object; + value?: string | boolean | object; }; /** - * 后缀图标 + * 后缀图标。值为字符串表示图标名称。值为 `Object` 类型，表示透传至 `icon`，不传表示不显示后缀图标 */ suffixIcon?: { type: null; @@ -98,9 +84,7 @@ export interface TdNoticeBarProps { }; } -export type NoticeBarTrigger = 'prefix-icon' | 'content' | 'operation' | 'suffix-icon'; - -export interface DrawMarquee { +export interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number; diff --git a/src/overlay/README.en-US.md b/src/overlay/README.en-US.md index 3f9a209eb..e268e0940 100644 --- a/src/overlay/README.en-US.md +++ b/src/overlay/README.en-US.md @@ -1,14 +1,7 @@ - -### CSS Variables -The component provides the following CSS variables, which can be used to customize styles. -Name | Default Value | Description --- | -- | -- ---td-overlay-bg-color | @font-gray-2 | - ---td-overlay-transition-duration | 300ms | - - ## API + ### Overlay Props name | type | default | description | required @@ -28,6 +21,7 @@ name | params | description -- | -- | -- click | `({ visible: boolean })` | \- + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. @@ -35,24 +29,3 @@ Name | Default Value | Description -- | -- | -- --td-overlay-bg-color | @font-gray-2 | - --td-overlay-transition-duration | 300ms | - - -## API - - -### Overlay Props - -name | type | default | description | required --- | -- | -- | -- | -- -style | Object | - | CSS(Cascading Style Sheets) | N -custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N -background-color | String | - | \- | N -duration | Number | 300 | \- | N -prevent-scroll-through | Boolean | true | \- | N -visible | Boolean | false | \- | N -z-index | Number | 11000 | \- | N - -### Overlay Events - -name | params | description --- | -- | -- -click | `({ visible: boolean })` | \- \ No newline at end of file diff --git a/src/overlay/overlay.ts b/src/overlay/overlay.ts index 0ef854078..91f2e1fb2 100644 --- a/src/overlay/overlay.ts +++ b/src/overlay/overlay.ts @@ -3,10 +3,13 @@ import config from '../common/config'; import props from './props'; import transition from '../mixins/transition'; import useCustomNavbar from '../mixins/using-custom-navbar'; +import { TdOverlayProps } from './type'; const { prefix } = config; const name = `${prefix}-overlay`; +export interface OverlayProps extends TdOverlayProps {} + @wxComponent() export default class Overlay extends SuperComponent { properties = props; diff --git a/src/overlay/props.ts b/src/overlay/props.ts index e0ce77b54..dbfb85ad0 100644 --- a/src/overlay/props.ts +++ b/src/overlay/props.ts @@ -11,11 +11,6 @@ const props: TdOverlayProps = { type: String, value: '', }, - /** 自定义组件样式 */ - customStyle: { - type: String, - value: '', - }, /** 背景色过渡时间，单位毫秒 */ duration: { type: Number, @@ -26,11 +21,6 @@ const props: TdOverlayProps = { type: Boolean, value: true, }, - /** 自定义组件样式 */ - style: { - type: String, - value: '', - }, /** 遮罩层级 */ zIndex: { type: Number, diff --git a/src/overlay/type.ts b/src/overlay/type.ts index 73a59c7a7..a85073493 100644 --- a/src/overlay/type.ts +++ b/src/overlay/type.ts @@ -13,14 +13,6 @@ export interface TdOverlayProps { type: StringConstructor; value?: string; }; - /** - * 自定义组件样式 - * @default '' - */ - customStyle?: { - type: StringConstructor; - value?: string; - }; /** * 背景色过渡时间，单位毫秒 * @default 300 @@ -37,14 +29,6 @@ export interface TdOverlayProps { type: BooleanConstructor; value?: boolean; }; - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; /** * 是否使用了自定义导航栏 * @default false diff --git a/src/popup/README.en-US.md b/src/popup/README.en-US.md index dc58ce2fb..286f744c7 100644 --- a/src/popup/README.en-US.md +++ b/src/popup/README.en-US.md @@ -11,14 +11,13 @@ custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on v close-btn | Boolean / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N close-on-overlay-click | Boolean | true | \- | N content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N -default-visible | Boolean | - | Typescript：`boolean` | N duration | Number | 240 | \- | N overlay-props | Object | {} | Typescript：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/popup/type.ts) | N placement | String | top | options: top/left/right/bottom/center | N prevent-scroll-through | Boolean | true | \- | N show-overlay | Boolean | true | \- | N using-custom-navbar | Boolean | false | \- | N -visible | Boolean | false | Typescript：`boolean` | N +visible | Boolean | - | Typescript：`boolean` | N default-visible | Boolean | undefined | uncontrolled property。Typescript：`boolean` | N z-index | Number | 11500 | \- | N @@ -41,4 +40,4 @@ Name | Default Value | Description -- | -- | -- --td-popup-bg-color | @bg-color-container | - --td-popup-border-radius | @radius-default | - ---td-popup-close-btn-color | @text-color-primary | - +--td-popup-close-btn-color | @text-color-primary | - \ No newline at end of file diff --git a/src/popup/README.md b/src/popup/README.md index 2d943be8a..6928738c9 100644 --- a/src/popup/README.md +++ b/src/popup/README.md @@ -50,14 +50,13 @@ custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场 close-btn | Boolean / Slot | - | 关闭按钮，值类型为 Boolean 时表示是否显示关闭按钮。也可以自定义关闭按钮。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N close-on-overlay-click | Boolean | true | 点击遮罩层是否关闭 | N content | String / Slot | - | 浮层里面的内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N -default-visible | Boolean | - | 是否显示浮层。非受控属性。TS 类型：`boolean` | N duration | Number | 240 | 动画过渡时间 | N overlay-props | Object | {} | 遮罩层的属性，透传至 overlay。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/popup/type.ts) | N placement | String | top | 浮层出现位置。可选项：top/left/right/bottom/center | N -prevent-scroll-through | Boolean | true | 防止滚动穿透 | N +prevent-scroll-through | Boolean | true | 是否阻止背景滚动 | N show-overlay | Boolean | true | 是否显示遮罩层 | N using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N -visible | Boolean | false | 是否显示浮层。TS 类型：`boolean` | N +visible | Boolean | - | 是否显示浮层。TS 类型：`boolean` | N default-visible | Boolean | undefined | 是否显示浮层。非受控属性。TS 类型：`boolean` | N z-index | Number | 11500 | 组件层级，Web 侧样式默认为 5500，移动端样式默认为 1500，小程序样式默认为11500 | N @@ -80,4 +79,4 @@ t-class-content | 内容样式类 -- | -- | -- --td-popup-bg-color | @bg-color-container | - --td-popup-border-radius | @radius-default | - ---td-popup-close-btn-color | @text-color-primary | - +--td-popup-close-btn-color | @text-color-primary | - \ No newline at end of file diff --git a/src/popup/props.ts b/src/popup/props.ts index 32d0aba38..c369dd416 100644 --- a/src/popup/props.ts +++ b/src/popup/props.ts @@ -38,7 +38,7 @@ const props: TdPopupProps = { type: String, value: 'top', }, - /** 防止滚动穿透 */ + /** 是否阻止背景滚动 */ preventScrollThrough: { type: Boolean, value: true, @@ -48,6 +48,11 @@ const props: TdPopupProps = { type: Boolean, value: true, }, + /** 是否使用了自定义导航栏 */ + usingCustomNavbar: { + type: Boolean, + value: false, + }, /** 是否显示浮层 */ visible: { type: Boolean, @@ -56,7 +61,6 @@ const props: TdPopupProps = { /** 是否显示浮层，非受控属性 */ defaultVisible: { type: Boolean, - value: false, }, /** 组件层级，Web 侧样式默认为 5500，移动端样式默认为 1500，小程序样式默认为11500 */ zIndex: { diff --git a/src/popup/type.ts b/src/popup/type.ts index 2597b5646..f0cf384f4 100644 --- a/src/popup/type.ts +++ b/src/popup/type.ts @@ -4,7 +4,7 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { TdOverlayProps as OverlayProps } from '../overlay/index'; +import { OverlayProps } from '../overlay/index'; export interface TdPopupProps { /** @@ -61,7 +61,7 @@ export interface TdPopupProps { value?: 'top' | 'left' | 'right' | 'bottom' | 'center'; }; /** - * 防止滚动穿透 + * 是否阻止背景滚动 * @default true */ preventScrollThrough?: { @@ -86,7 +86,6 @@ export interface TdPopupProps { }; /** * 是否显示浮层 - * @default false */ visible?: { type: BooleanConstructor; @@ -94,7 +93,6 @@ export interface TdPopupProps { }; /** * 是否显示浮层，非受控属性 - * @default false */ defaultVisible?: { type: BooleanConstructor; @@ -109,7 +107,3 @@ export interface TdPopupProps { value?: number; }; } - -export interface PopupVisibleChangeContext { - trigger: 'close-btn' | 'overlay'; -} diff --git a/src/progress/README.en-US.md b/src/progress/README.en-US.md index 5f228cc56..238932a51 100644 --- a/src/progress/README.en-US.md +++ b/src/progress/README.en-US.md @@ -11,9 +11,9 @@ custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on v color | String / Object / Array | '' | Typescript：`string \| Array \| Record` | N label | String / Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N percentage | Number | 0 | \- | N -status | String | - | options: success/error/warning/active。Typescript：`StatusEnum` `type StatusEnum = 'success' \| 'error' \| 'warning' \| 'active'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N +status | String | - | options: success/error/warning/active。Typescript：`ProgressStatus` `type ProgressStatus = 'success' \| 'error' \| 'warning' \| 'active'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N stroke-width | String / Number | - | \- | N -theme | String | line | options: line/plump/circle。Typescript：`ThemeEnum` `type ThemeEnum = 'line' \| 'plump' \| 'circle'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N +theme | String | line | options: line/plump/circle。Typescript：`ProgressTheme` `type ProgressTheme = 'line' \| 'plump' \| 'circle'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N track-color | String | '' | \- | N ### Progress External Classes @@ -35,5 +35,4 @@ Name | Default Value | Description --td-progress-line-stroke-width | 12rpx | - --td-progress-stroke-circle-width | 12rpx | - --td-progress-stroke-plump-width | 40rpx | - ---td-progress-track-bg-color | @bg-color-component | - - +--td-progress-track-bg-color | @bg-color-component | - \ No newline at end of file diff --git a/src/progress/README.md b/src/progress/README.md index c4e88c91d..b2e0c3264 100644 --- a/src/progress/README.md +++ b/src/progress/README.md @@ -73,9 +73,9 @@ custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场 color | String / Object / Array | '' | 进度条颜色。示例：'#ED7B2F' 或 'orange' 或 `['#f00', '#0ff', '#f0f']` 或 `{ '0%': '#f00', '100%': '#0ff' }` 或 `{ from: '#000', to: '#000' }` 等。TS 类型：`string \| Array \| Record` | N label | String / Boolean / Slot | true | 进度百分比，可自定义。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N percentage | Number | 0 | 进度条百分比 | N -status | String | - | 进度条状态。可选项：success/error/warning/active。TS 类型：`StatusEnum` `type StatusEnum = 'success' \| 'error' \| 'warning' \| 'active'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N +status | String | - | 进度条状态。可选项：success/error/warning/active。TS 类型：`ProgressStatus` `type ProgressStatus = 'success' \| 'error' \| 'warning' \| 'active'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N stroke-width | String / Number | - | 进度条线宽，默认单位 `px` | N -theme | String | line | 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间。可选项：line/plump/circle，skyline 模式下暂不支持枚举值 circle。TS 类型：`ThemeEnum` `type ThemeEnum = 'line' \| 'plump' \| 'circle'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N +theme | String | line | 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间。可选项：line/plump/circle。TS 类型：`ProgressTheme` `type ProgressTheme = 'line' \| 'plump' \| 'circle'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N track-color | String | '' | 进度条未完成部分颜色 | N ### Progress External Classes @@ -97,5 +97,4 @@ t-class-label | 标签样式类 --td-progress-line-stroke-width | 12rpx | - --td-progress-stroke-circle-width | 12rpx | - --td-progress-stroke-plump-width | 40rpx | - ---td-progress-track-bg-color | @bg-color-component | - - +--td-progress-track-bg-color | @bg-color-component | - \ No newline at end of file diff --git a/src/progress/type.ts b/src/progress/type.ts index 9351a95b3..8e6493f3d 100644 --- a/src/progress/type.ts +++ b/src/progress/type.ts @@ -34,7 +34,7 @@ export interface TdProgressProps { */ status?: { type: StringConstructor; - value?: StatusEnum; + value?: ProgressStatus; }; /** * 进度条线宽，默认单位 `px` @@ -57,7 +57,7 @@ export interface TdProgressProps { */ theme?: { type: StringConstructor; - value?: ThemeEnum; + value?: ProgressTheme; }; /** * 进度条未完成部分颜色 @@ -69,6 +69,6 @@ export interface TdProgressProps { }; } -export type StatusEnum = 'success' | 'error' | 'warning' | 'active'; +export type ProgressStatus = 'success' | 'error' | 'warning' | 'active'; -export type ThemeEnum = 'line' | 'plump' | 'circle'; +export type ProgressTheme = 'line' | 'plump' | 'circle'; diff --git a/src/pull-down-refresh/README.en-US.md b/src/pull-down-refresh/README.en-US.md index f96a556a0..88a0f4816 100644 --- a/src/pull-down-refresh/README.en-US.md +++ b/src/pull-down-refresh/README.en-US.md @@ -35,7 +35,6 @@ dragstart | `(scrollTop: number, scrollLeft: number)` | `1.2.10` refresh | \- | \- scrolltolower | \- | \- timeout | \- | \- - ### PullDownRefresh External Classes className | Description diff --git a/src/pull-down-refresh/README.md b/src/pull-down-refresh/README.md index c17cf99fb..e68e8491a 100644 --- a/src/pull-down-refresh/README.md +++ b/src/pull-down-refresh/README.md @@ -68,8 +68,7 @@ dragstart | `(scrollTop: number, scrollLeft: number)` | `1.2.10`。滑动开始 refresh | \- | 结束下拉时触发 scrolltolower | \- | 滚动到页面底部时触发 timeout | \- | 刷新超时触发 - -### PullDownRefresh 外部样式类 +### PullDownRefresh External Classes 类名 | 描述 -- | -- @@ -78,7 +77,7 @@ t-class-indicator | 指示样式类 t-class-loading | 加载样式类 t-class-text | 文本样式类 -### CSS 变量 +### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 diff --git a/src/radio-group/props.ts b/src/radio-group/props.ts index d414b3d68..107f6edb7 100644 --- a/src/radio-group/props.ts +++ b/src/radio-group/props.ts @@ -6,11 +6,6 @@ import { TdRadioGroupProps } from './type'; const props: TdRadioGroupProps = { - /** 复选框和内容相对位置；仅在使用 options 时生效 */ - placement: { - type: String, - value: 'left', - }, /** 是否开启无边框模式 */ borderless: { type: Boolean, @@ -18,10 +13,10 @@ const props: TdRadioGroupProps = { }, /** 是否禁用全部子单选框 */ disabled: { - type: Boolean, + type: null, value: undefined, }, - /** 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。值为 circle 表示图标为填充型图标，值为 line 表示图标为描边型图标；仅在使用 options 时生效 */ + /** 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标；仅在使用 options 时生效 */ icon: { type: null, value: 'circle', @@ -39,6 +34,11 @@ const props: TdRadioGroupProps = { options: { type: Array, }, + /** 复选框和内容相对位置 */ + placement: { + type: String, + value: 'left', + }, /** 选中的值 */ value: { type: null, diff --git a/src/radio-group/type.ts b/src/radio-group/type.ts index dc666c07e..8f9987377 100644 --- a/src/radio-group/type.ts +++ b/src/radio-group/type.ts @@ -3,18 +3,10 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { RadioValue } from '../radio/type'; + import { KeysType } from '../common/common'; export interface TdRadioGroupProps { - /** - * 复选框和内容相对位置；仅在使用 options 时生效 - * @default left - */ - placement?: { - type: StringConstructor; - value?: 'left' | 'right'; - }; /** * 是否开启无边框模式 * @default false @@ -23,14 +15,6 @@ export interface TdRadioGroupProps { type: BooleanConstructor; value?: boolean; }; - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; /** * 是否禁用全部子单选框 */ @@ -39,8 +23,8 @@ export interface TdRadioGroupProps { value?: boolean; }; /** - * 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。值为 fill-circle 表示图标为填充型图标，值为 stroke-line 表示图标为描边型图标；仅在使用 options 时生效 - * @default 'fill-circle' + * 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标；仅在使用 options 时生效 + * @default 'circle' */ icon?: { type: null; @@ -68,6 +52,14 @@ export interface TdRadioGroupProps { type: ArrayConstructor; value?: Array; }; + /** + * 复选框和内容相对位置 + * @default left + */ + placement?: { + type: StringConstructor; + value?: 'left' | 'right'; + }; /** * 选中的值 */ @@ -93,3 +85,5 @@ export interface RadioOptionObj { disabled?: boolean; allowUncheck?: boolean; } + +export type RadioValue = string | number | boolean; diff --git a/src/radio/README.en-US.md b/src/radio/README.en-US.md index 97fa9df19..4e217d34c 100644 --- a/src/radio/README.en-US.md +++ b/src/radio/README.en-US.md @@ -1,55 +1,69 @@ :: BASE_DOC :: ## API + ### Radio Props name | type | default | description | required -- | -- | -- | -- | -- -placement | String | left | options：left/right | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N allow-uncheck | Boolean | false | \- | N block | Boolean | true | \- | N checked | Boolean | false | \- | N default-checked | Boolean | undefined | uncontrolled property | N -content | String / Slot | - | \- | N +content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N content-disabled | Boolean | false | \- | N disabled | Boolean | undefined | \- | N -external-classes | Array | - | `['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']` | N -icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| Array` | N -label | String / Slot | - | \- | N +icon | String / Array / Slot | 'circle' | Typescript：`'circle' \| 'line' \| 'dot' \| Array` | N +label | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N max-content-row | Number | 5 | \- | N max-label-row | Number | 3 | \- | N name | String | - | \- | N -value | String / Number / Boolean | false | Typescript：`T` | N +placement | String | left | options: left/right | N +readonly | Boolean | false | \- | N +value | String / Number / Boolean | false | Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio/type.ts) | N ### Radio Events name | params | description -- | -- | -- change | `(checked: boolean)` | \- +### Radio External Classes + +className | Description +-- | -- +t-class | \- +t-class-border | \- +t-class-content | \- +t-class-icon | \- +t-class-label | \- + ### RadioGroup Props name | type | default | description | required -- | -- | -- | -- | -- -placement | String | left | options：left/right | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N borderless | Boolean | false | \- | N -readonly | Boolean | false | \- | N disabled | Boolean | undefined | \- | N -icon | String / Array | 'circle' | Typescript：`'circle' | 'line' | Array` | N -keys | Object | - | Typescript：`KeysType` | N +icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'dot' \| Array` | N +keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N name | String | - | \- | N -options | Array | - | Typescript：`Array` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N -value | String / Number / Boolean | - | Typescript：`T` | N -default-value | String / Number / Boolean | undefined | uncontrolled property。Typescript：`T` | N +options | Array | - | Typescript：`Array` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; readonly?: boolean; disabled?: boolean; allowUncheck?: boolean; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N +placement | String | left | options: left/right | N +value | String / Number / Boolean | - | Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N +default-value | String / Number / Boolean | undefined | uncontrolled property。Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N ### RadioGroup Events name | params | description -- | -- | -- -change | `(value: T)` | \- - +change | `(value: RadioValue)` | \- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -70,4 +84,4 @@ Name | Default Value | Description --td-radio-label-color | @font-gray-1 | - --td-radio-label-disabled-color | @font-gray-4 | - --td-radio-label-line-height | 48rpx | - ---td-radio-vertical-padding | 32rpx | - +--td-radio-vertical-padding | 32rpx | - \ No newline at end of file diff --git a/src/radio/README.md b/src/radio/README.md index 35a182664..aa58bf81b 100644 --- a/src/radio/README.md +++ b/src/radio/README.md @@ -54,54 +54,60 @@ isComponent: true {{ special }} ## API + ### Radio Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -placement | String | left | 复选框和内容相对位置。可选项：left/right | N +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N allow-uncheck | Boolean | false | 是否允许取消选中 | N block | Boolean | true | 是否为块级元素 | N checked | Boolean | false | 是否选中 | N default-checked | Boolean | undefined | 是否选中。非受控属性 | N -content | String / Slot | - | 单选内容 | N +content | String / Slot | - | 单选内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N content-disabled | Boolean | false | 是否禁用组件内容（content）触发选中 | N -readonly | Boolean | false | 只读状态 | N disabled | Boolean | undefined | 是否为禁用态 | N icon | String / Array / Slot | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标，值为 slot 时使用插槽。TS 类型：`'circle' \| 'line' \| 'dot' \| Array` | N -label | String / Slot | - | 主文案 | N +label | String / Slot | - | 主文案。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N max-content-row | Number | 5 | 内容最大行数限制 | N max-label-row | Number | 3 | 主文案最大行数限制 | N name | String | - | HTML 元素原生属性 | N -value | String / Number / Boolean | false | 单选按钮的值。TS 类型：`RadioValue` `type RadioValue = string | number | boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio/type.ts) | N +placement | String | left | 复选框和内容相对位置。可选项：left/right | N +readonly | Boolean | false | 只读状态 | N +value | String / Number / Boolean | false | 单选按钮的值。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio/type.ts) | N ### Radio Events 名称 | 参数 | 描述 -- | -- | -- change | `(checked: boolean)` | 值变化时触发 +### Radio External Classes -### Radio 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 -t-class-label | 标签样式类 -t-class-icon | 图标样式类 -t-class-content | 内容样式类 t-class-border | 边框样式类 +t-class-content | 内容样式类 +t-class-icon | 图标样式类 +t-class-label | 标签样式类 + ### RadioGroup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -placement | String | 'left' | 复选框和内容相对位置；仅在使用 options 时生效。可选项：left/right | N +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N borderless | Boolean | false | 是否开启无边框模式 | N disabled | Boolean | undefined | 是否禁用全部子单选框 | N -icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标；仅在使用 options 时生效。TS 类型：`'circle' | 'line' | 'dot' | Array` | N -keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType` | N +icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标；仅在使用 options 时生效。TS 类型：`'circle' \| 'line' \| 'dot' \| Array` | N +keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N name | String | - | HTML 元素原生属性 | N -options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; disabled?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N -value | String / Number / Boolean | false | 选中的值。TS 类型：`RadioValue` | N -default-value | String / Number / Boolean | undefined | 选中的值。非受控属性。TS 类型：`RadioValue` | N +options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; readonly?: boolean; disabled?: boolean; allowUncheck?: boolean; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N +placement | String | left | 复选框和内容相对位置。可选项：left/right | N +value | String / Number / Boolean | - | 选中的值。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N +default-value | String / Number / Boolean | undefined | 选中的值。非受控属性。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N ### RadioGroup Events @@ -109,8 +115,8 @@ default-value | String / Number / Boolean | undefined | 选中的值。非受控 -- | -- | -- change | `(value: RadioValue)` | 选中值发生变化时触发 +### CSS Variables -### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -131,4 +137,4 @@ change | `(value: RadioValue)` | 选中值发生变化时触发 --td-radio-label-color | @font-gray-1 | - --td-radio-label-disabled-color | @font-gray-4 | - --td-radio-label-line-height | 48rpx | - ---td-radio-vertical-padding | 32rpx | - +--td-radio-vertical-padding | 32rpx | - \ No newline at end of file diff --git a/src/radio/props.ts b/src/radio/props.ts index cfe79076d..db0b07977 100644 --- a/src/radio/props.ts +++ b/src/radio/props.ts @@ -6,11 +6,6 @@ import { TdRadioProps } from './type'; const props: TdRadioProps = { - /** 复选框和内容相对位置 */ - placement: { - type: String, - value: null, - }, /** 是否允许取消选中 */ allowUncheck: { type: Boolean, @@ -40,21 +35,12 @@ const props: TdRadioProps = { type: Boolean, value: false, }, - /** 只读状态 */ - readonly: { - type: Boolean, - value: false, - }, /** 是否为禁用态 */ disabled: { - type: Boolean, + type: null, value: undefined, }, - /** 组件类名，分别用于设置 组件外层、单选图标、主文案、内容 等元素类名 */ - externalClasses: { - type: Array, - }, - /** 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。值为 circle 表示图标为填充型图标，值为 line 表示图标为描边型图标 */ + /** 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标，值为 slot 时使用插槽 */ icon: { type: null, value: 'circle', @@ -78,6 +64,16 @@ const props: TdRadioProps = { type: String, value: '', }, + /** 复选框和内容相对位置 */ + placement: { + type: String, + value: 'left', + }, + /** 只读状态 */ + readonly: { + type: Boolean, + value: false, + }, /** 单选按钮的值 */ value: { type: null, diff --git a/src/radio/type.ts b/src/radio/type.ts index 2ae247bb7..b91d4f86c 100644 --- a/src/radio/type.ts +++ b/src/radio/type.ts @@ -5,14 +5,6 @@ * */ export interface TdRadioProps { - /** - * 复选框和内容相对位置 - * @default left - */ - placement?: { - type: StringConstructor; - value?: 'left' | 'right'; - }; /** * 是否允许取消选中 * @default false @@ -60,22 +52,6 @@ export interface TdRadioProps { type: BooleanConstructor; value?: boolean; }; - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; - /** - * 只读状态 - * @default false - */ - readonly?: { - type: BooleanConstructor; - value?: boolean; - }; /** * 是否为禁用态 */ @@ -84,19 +60,12 @@ export interface TdRadioProps { value?: boolean; }; /** - * 组件类名，分别用于设置 组件外层、单选图标、主文案、内容 等元素类名 - */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']; - }; - /** - * 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。值为 circle 表示图标为填充型图标，值为 line 表示图标为描边型图标 + * 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标，值为 slot 时使用插槽 * @default 'circle' */ icon?: { type: null; - value?: 'circle' | 'line' | Array; + value?: 'circle' | 'line' | 'dot' | Array; }; /** * 主文案 @@ -129,6 +98,22 @@ export interface TdRadioProps { type: StringConstructor; value?: string; }; + /** + * 复选框和内容相对位置 + * @default left + */ + placement?: { + type: StringConstructor; + value?: 'left' | 'right'; + }; + /** + * 只读状态 + * @default false + */ + readonly?: { + type: BooleanConstructor; + value?: boolean; + }; /** * 单选按钮的值 * @default false diff --git a/src/rate/README.md b/src/rate/README.md index 20621ac7b..181f687df 100644 --- a/src/rate/README.md +++ b/src/rate/README.md @@ -84,7 +84,7 @@ disabled | Boolean | undefined | 是否禁用评分 | N gap | String / Number | 8 | 评分图标的间距 | N icon | String / Array | - | `0.30.0`。自定义评分图标，[选中图标，未选中图标]。TS 类型：`string \| string[]` | N icon-prefix | String | undefined | 定义图标前缀 | N -placement | String | top | 选择评分弹框的位置，值为空字符表示不显示评分弹窗。可选项：top / bottom / '' | N +placement | String | top | 选择评分弹框的位置，值为空字符表示不显示评分弹框。可选项：top / bottom / '' | N show-text | Boolean | false | 是否显示对应的辅助文字 | N size | String | 24px | 评分图标的大小 | N texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array` | N diff --git a/src/rate/props.ts b/src/rate/props.ts index e87858336..3e09e5633 100644 --- a/src/rate/props.ts +++ b/src/rate/props.ts @@ -40,7 +40,7 @@ const props: TdRateProps = { type: String, value: undefined, }, - /** 选择评分弹框的位置，值为空字符表示不显示评分弹窗 */ + /** 选择评分弹框的位置，值为空字符表示不显示评分弹框 */ placement: { type: String, value: 'top', diff --git a/src/rate/type.ts b/src/rate/type.ts index b2b258387..ec8692dea 100644 --- a/src/rate/type.ts +++ b/src/rate/type.ts @@ -59,7 +59,7 @@ export interface TdRateProps { value?: string; }; /** - * 选择评分弹框的位置，值为空字符表示不显示评分弹窗 + * 选择评分弹框的位置，值为空字符表示不显示评分弹框 * @default top */ placement?: { diff --git a/src/result/README.en-US.md b/src/result/README.en-US.md index 39810fb29..b5c763da3 100644 --- a/src/result/README.en-US.md +++ b/src/result/README.en-US.md @@ -22,7 +22,7 @@ t-class-description | \- t-class-image | \- t-class-title | \- -### CSS 变量 +### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description diff --git a/src/result/README.md b/src/result/README.md index a9702455f..76085fee4 100644 --- a/src/result/README.md +++ b/src/result/README.md @@ -80,7 +80,7 @@ t-class-description | 描述样式类 t-class-image | 图片样式类 t-class-title | 标题样式类 -### CSS 变量 +### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 diff --git a/src/search/README.md b/src/search/README.md index 47e715f15..13a8a12ae 100644 --- a/src/search/README.md +++ b/src/search/README.md @@ -92,7 +92,6 @@ change | `({ value: string })` | 值发生变化时触发 clear | `({ value: string })` | 点击清除时触发 focus | `({ value: string })` | 聚焦时触发 submit | `({ value: string })` | 提交时触发 - ### Search External Classes 类名 | 描述 @@ -120,4 +119,4 @@ t-class-left | 左侧图标样式类 --td-search-placeholder-color | @font-gray-3 | - --td-search-result-high-light-color | @brand-color | - --td-search-square-radius | @radius-default | - ---td-search-text-color | @font-gray-1 | - +--td-search-text-color | @font-gray-1 | - \ No newline at end of file diff --git a/src/search/props.ts b/src/search/props.ts index 31721df6c..a74326527 100644 --- a/src/search/props.ts +++ b/src/search/props.ts @@ -44,6 +44,7 @@ const props: TdSearchProps = { /** 指定 focus 时的光标位置 */ cursor: { type: Number, + required: true, }, /** 搜索框聚焦时底部与键盘的距离 */ cursorSpacing: { @@ -65,7 +66,7 @@ const props: TdSearchProps = { type: Boolean, value: false, }, - /** 左侧图标 */ + /** 左侧图标。如果需要使用 `Slot` 进行自定义，必须将该值设置为假值 */ leftIcon: { type: String, value: 'search', @@ -93,6 +94,7 @@ const props: TdSearchProps = { placeholderStyle: { type: String, value: '', + required: true, }, /** 预览结果列表 */ resultList: { diff --git a/src/search/type.ts b/src/search/type.ts index 574c24977..1238f4d05 100644 --- a/src/search/type.ts +++ b/src/search/type.ts @@ -67,6 +67,7 @@ export interface TdSearchProps { cursor: { type: NumberConstructor; value?: number; + required?: boolean; }; /** * 搜索框聚焦时底部与键盘的距离 @@ -101,7 +102,7 @@ export interface TdSearchProps { value?: boolean; }; /** - * 左侧图标 + * 左侧图标。如果需要使用 `Slot` 进行自定义，必须将该值设置为假值 * @default 'search' */ leftIcon?: { @@ -146,6 +147,7 @@ export interface TdSearchProps { placeholderStyle: { type: StringConstructor; value?: string; + required?: boolean; }; /** * 预览结果列表 diff --git a/src/side-bar-item/props.ts b/src/side-bar-item/props.ts index 27813e263..b9b15e92f 100644 --- a/src/side-bar-item/props.ts +++ b/src/side-bar-item/props.ts @@ -15,7 +15,7 @@ const props: TdSideBarItemProps = { type: Boolean, value: false, }, - /* 图标，传对象则透传至 Icon */ + /** 图标，传对象则透传至 Icon */ icon: { type: null, }, diff --git a/src/side-bar-item/type.ts b/src/side-bar-item/type.ts index 6ba81b7bf..6e684eddc 100644 --- a/src/side-bar-item/type.ts +++ b/src/side-bar-item/type.ts @@ -4,13 +4,15 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ +import { BadgeProps } from '../badge/index'; + export interface TdSideBarItemProps { /** * 透传至 Badge 组件 */ badgeProps?: { type: ObjectConstructor; - value?: object; + value?: BadgeProps; }; /** * 是否禁用 @@ -25,6 +27,7 @@ export interface TdSideBarItemProps { */ icon?: { type: null; + value?: string | object; }; /** * 展示的标签 diff --git a/src/side-bar/README.en-US.md b/src/side-bar/README.en-US.md index ac085f204..926da5515 100644 --- a/src/side-bar/README.en-US.md +++ b/src/side-bar/README.en-US.md @@ -1,10 +1,13 @@ :: BASE_DOC :: ## API + ### SideBar Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N value | String / Number | - | \- | N default-value | String / Number | undefined | uncontrolled property | N @@ -15,18 +18,21 @@ name | params | description change | `(value: number \| string, label: string)` | \- click | `(value: number \| string, label: string)` | \- + ### SideBarItem Props name | type | default | description | required -- | -- | -- | -- | -- -badge-props | Object | - | \- | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +badge-props | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/side-bar-item/type.ts) | N disabled | Boolean | false | \- | N -icon | String / Object | - | `1.0.0-rc.1` | N +icon | String / Object | - | \- | N label | String | - | \- | N value | String / Number | - | \- | N - ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -41,4 +47,4 @@ Name | Default Value | Description --td-side-bar-font-size | 32rpx | - --td-side-bar-icon-size | 40rpx | - --td-side-bar-item-height | 112rpx | - ---td-side-bar-item-line-height | 48rpx | - +--td-side-bar-item-line-height | 48rpx | - \ No newline at end of file diff --git a/src/side-bar/README.md b/src/side-bar/README.md index 74e5659a6..c82c353c8 100644 --- a/src/side-bar/README.md +++ b/src/side-bar/README.md @@ -50,10 +50,13 @@ isComponent: true {{ custom }} ## API + ### SideBar Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N value | String / Number | - | 选项值 | N default-value | String / Number | undefined | 选项值。非受控属性 | N @@ -64,18 +67,21 @@ default-value | String / Number | undefined | 选项值。非受控属性 | N change | `(value: number \| string, label: string)` | 选项值发生变化时触发 click | `(value: number \| string, label: string)` | 点击选项时触发 + ### SideBarItem Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -badge-props | Object | - | 透传至 Badge 组件 | N +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +badge-props | Object | - | 透传至 Badge 组件。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/side-bar-item/type.ts) | N disabled | Boolean | false | 是否禁用 | N -icon | String / Object | - | `1.0.0-rc.1`。图标，传对象则透传至 Icon | N +icon | String / Object | - | 图标，传对象则透传至 Icon | N label | String | - | 展示的标签 | N value | String / Number | - | 当前选项的值 | N +### CSS Variables -### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -90,4 +96,4 @@ value | String / Number | - | 当前选项的值 | N --td-side-bar-font-size | 32rpx | - --td-side-bar-icon-size | 40rpx | - --td-side-bar-item-height | 112rpx | - ---td-side-bar-item-line-height | 48rpx | - +--td-side-bar-item-line-height | 48rpx | - \ No newline at end of file diff --git a/src/skeleton/README.en-US.md b/src/skeleton/README.en-US.md index da97d6545..889a45472 100644 --- a/src/skeleton/README.en-US.md +++ b/src/skeleton/README.en-US.md @@ -11,7 +11,7 @@ custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on v animation | String | none | options: gradient/flashed/none | N delay | Number | 0 | \- | N loading | Boolean | true | \- | N -row-col | Array | - | Typescript：`SkeletonRowCol` `type SkeletonRowCol = Array>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; type?: 'rect' \| 'circle' \| 'text'; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/skeleton/type.ts) | N +row-col | Array | - | Typescript：`SkeletonRowCol` `type SkeletonRowCol = Array>` `interface SkeletonRowColObj { width?: string; size?: string;height?: string; marginRight?: string; marginLeft?: string; margin?: string; type?: 'rect' \| 'circle' \| 'text';}`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/skeleton/type.ts) | N theme | String | text | options: avatar/image/text/paragraph | N ### Skeleton External Classes @@ -21,7 +21,7 @@ t-class | \- t-class-col | \- t-class-row | \- -### CSS 变量 +### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description diff --git a/src/skeleton/README.md b/src/skeleton/README.md index 0521d4466..84798e665 100644 --- a/src/skeleton/README.md +++ b/src/skeleton/README.md @@ -59,7 +59,7 @@ custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场 animation | String | none | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画。可选项：gradient/flashed/none | N delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N loading | Boolean | true | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N -row-col | Array | - | 用于设置行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; type?: 'rect' \| 'circle' \| 'text'; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/skeleton/type.ts) | N +row-col | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array>` `interface SkeletonRowColObj { width?: string; size?: string;height?: string; marginRight?: string; marginLeft?: string; margin?: string; type?: 'rect' \| 'circle' \| 'text';}`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/skeleton/type.ts) | N theme | String | text | 骨架图风格，有基础、头像组合等两大类。可选项：avatar/image/text/paragraph | N ### Skeleton External Classes @@ -69,7 +69,7 @@ t-class | 根节点样式类 t-class-col | 行样式类 t-class-row | 列样式类 -### CSS 变量 +### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 diff --git a/src/skeleton/props.ts b/src/skeleton/props.ts index 1e9b8644f..0d2ddc83b 100644 --- a/src/skeleton/props.ts +++ b/src/skeleton/props.ts @@ -21,7 +21,7 @@ const props: TdSkeletonProps = { type: Boolean, value: true, }, - /** 用于设置行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距 */ + /** 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等 */ rowCol: { type: Array, }, diff --git a/src/skeleton/type.ts b/src/skeleton/type.ts index 00fbd6fa9..4d464a68d 100644 --- a/src/skeleton/type.ts +++ b/src/skeleton/type.ts @@ -30,7 +30,7 @@ export interface TdSkeletonProps { value?: boolean; }; /** - * 用于设置行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距 + * 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等 */ rowCol?: { type: ArrayConstructor; @@ -50,8 +50,8 @@ export type SkeletonRowCol = Array值为 true 显示默认文案；值为 false 不显示滑块当前值文本；
值为 `${value}%` 则表示组件会根据占位符渲染文案；
值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值 */ label: { type: null, diff --git a/src/slider/type.ts b/src/slider/type.ts index cfa4d360d..3b12a27be 100644 --- a/src/slider/type.ts +++ b/src/slider/type.ts @@ -7,19 +7,11 @@ export interface TdSliderProps { /** * 是否禁用组件 - * @default false */ disabled?: { type: BooleanConstructor; value?: boolean; }; - /** - * 组件类名，分别用于设置 组件外层元素、滑道底部、滑道激活态、滑道禁用态、游标 等元素类名 - */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-bar', 't-class-bar-active', 't-class-bar-disabled', 't-class-cursor']; - }; /** * 滑块当前值文本。
值为 true 显示默认文案；值为 false 不显示滑块当前值文本；
值为 `${value}%` 则表示组件会根据占位符渲染文案；
值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值 * @default false diff --git a/src/step-item/props.ts b/src/step-item/props.ts index 8b03c8bf5..6850a0b1f 100644 --- a/src/step-item/props.ts +++ b/src/step-item/props.ts @@ -11,10 +11,6 @@ const props: TdStepItemProps = { type: String, value: '', }, - /** 组件类名，用于设置组件外层元素元素类名 */ - externalClasses: { - type: Array, - }, /** 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标 */ icon: { type: String, @@ -24,11 +20,6 @@ const props: TdStepItemProps = { type: String, value: 'default', }, - /** 已废弃。子步骤条，仅支持 layout = 'vertical' 时 */ - subStepItems: { - type: Array, - value: [], - }, /** 标题 */ title: { type: String, diff --git a/src/step-item/type.ts b/src/step-item/type.ts index 17f32d3d3..1de063c98 100644 --- a/src/step-item/type.ts +++ b/src/step-item/type.ts @@ -13,13 +13,6 @@ export interface TdStepItemProps { type: StringConstructor; value?: string; }; - /** - * 组件类名，用于设置组件外层元素元素类名 - */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-content', 't-class-title', 't-class-description', 't-class-extra']; - }; /** * 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标 */ @@ -35,15 +28,6 @@ export interface TdStepItemProps { type: StringConstructor; value?: StepStatus; }; - /** - * 子步骤条，仅支持 layout = 'vertical' 时 - * @default [] - * @deprecated - */ - subStepItems?: { - type: ArrayConstructor; - value?: SubStepItem[]; - }; /** * 标题 * @default '' @@ -55,8 +39,3 @@ export interface TdStepItemProps { } export type StepStatus = 'default' | 'process' | 'finish' | 'error'; - -export interface SubStepItem { - status: StepStatus; - title: string; -} diff --git a/src/steps/README.en-US.md b/src/steps/README.en-US.md index ab3f840af..3e4127327 100644 --- a/src/steps/README.en-US.md +++ b/src/steps/README.en-US.md @@ -1,38 +1,56 @@ :: BASE_DOC :: ## API + ### Steps Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N current | String / Number | - | \- | N default-current | String / Number | undefined | uncontrolled property | N -current-status | String | process | options：default/process/finish/error | N -external-classes | Array | - | `['t-class']` | N -layout | String | horizontal | options：horizontal/vertical | N +current-status | String | process | options: default/process/finish/error | N +layout | String | horizontal | options: horizontal/vertical | N readonly | Boolean | false | \- | N -sequence | String | positive | options：positive/reverse | N -theme | String | default | options：default/dot | N +sequence | String | positive | options: positive/reverse | N +theme | String | default | options: default/dot | N ### Steps Events name | params | description -- | -- | -- change | `({current: string \| number, previous: string \| number})` | \- +### Steps External Classes + +className | Description +-- | -- +t-class | \- + ### StepItem Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N content | String / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N -external-classes | Array | - | `['t-class', 't-class-content', 't-class-title', 't-class-description', 't-class-extra']` | N icon | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/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-miniprogram/tree/develop/src/step-item/type.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-miniprogram/tree/develop/src/step-item/type.ts) | N sub-step-items | Array | [] | `deprecated`。Typescript：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N title | String / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +### StepItem External Classes +className | Description +-- | -- +t-class | class name of root node +t-class-content | \- +t-class-description | \- +t-class-extra | \- +t-class-title | \- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -61,4 +79,4 @@ Name | Default Value | Description --td-step-item-process-circle-color | @font-white-1 | - --td-step-item-process-dot-border-color | @brand-color | - --td-step-item-process-icon-color | @brand-color | - ---td-step-item-process-title-color | @brand-color | - +--td-step-item-process-title-color | @brand-color | - \ No newline at end of file diff --git a/src/steps/README.md b/src/steps/README.md index 8bb27db79..af1525fdb 100644 --- a/src/steps/README.md +++ b/src/steps/README.md @@ -61,10 +61,13 @@ isComponent: true {{ special }} ## API + ### Steps Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N current | String / Number | - | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成 | N default-current | String / Number | undefined | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。非受控属性 | N current-status | String | process | 用于控制 current 指向的步骤条的状态。可选项：default/process/finish/error | N @@ -78,32 +81,36 @@ theme | String | default | 步骤条风格。可选项：default/dot | N 名称 | 参数 | 描述 -- | -- | -- change | `({current: string \| number, previous: string \| number})` | 当前步骤发生变化时触发 +### Steps External Classes -### Steps 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 + ### StepItem Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N content | String / Slot | '' | 步骤描述。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N icon | String / Slot | - | 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N status | String | default | 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N sub-step-items | Array | [] | 已废弃。子步骤条，仅支持 layout = 'vertical' 时。TS 类型：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N title | String / Slot | '' | 标题。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +### StepItem External Classes -### StepItem 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 t-class-content | 内容样式类 -t-class-title | 标题样式类 t-class-description | 描述样式类 t-class-extra | 额外样式类 +t-class-title | 标题样式类 + +### CSS Variables -### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -132,4 +139,4 @@ t-class-extra | 额外样式类 --td-step-item-process-circle-color | @font-white-1 | - --td-step-item-process-dot-border-color | @brand-color | - --td-step-item-process-icon-color | @brand-color | - ---td-step-item-process-title-color | @brand-color | - +--td-step-item-process-title-color | @brand-color | - \ No newline at end of file diff --git a/src/steps/props.ts b/src/steps/props.ts index b24e39b48..f092105cf 100644 --- a/src/steps/props.ts +++ b/src/steps/props.ts @@ -20,10 +20,6 @@ const props: TdStepsProps = { type: String, value: 'process', }, - /** 组件类名，用于设置组件外层元素元素类名 */ - externalClasses: { - type: Array, - }, /** 步骤条方向，有两种：横向和纵向 */ layout: { type: String, @@ -34,11 +30,6 @@ const props: TdStepsProps = { type: Boolean, value: false, }, - /** 步骤条分割符 */ - separator: { - type: String, - value: 'line', - }, /** 步骤条顺序 */ sequence: { type: String, diff --git a/src/steps/type.ts b/src/steps/type.ts index 34ec9a175..5b787d923 100644 --- a/src/steps/type.ts +++ b/src/steps/type.ts @@ -27,13 +27,6 @@ export interface TdStepsProps { type: StringConstructor; value?: 'default' | 'process' | 'finish' | 'error'; }; - /** - * 组件类名，用于设置组件外层元素元素类名 - */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class']; - }; /** * 步骤条方向，有两种：横向和纵向 * @default horizontal @@ -50,14 +43,6 @@ export interface TdStepsProps { type: BooleanConstructor; value?: boolean; }; - /** - * 步骤条分割符 - * @default line - */ - separator?: { - type: StringConstructor; - value?: 'line' | 'dashed' | 'arrow'; - }; /** * 步骤条顺序 * @default positive diff --git a/src/sticky/README.en-US.md b/src/sticky/README.en-US.md index 4b36d156b..643e0e6a7 100644 --- a/src/sticky/README.en-US.md +++ b/src/sticky/README.en-US.md @@ -6,9 +6,10 @@ name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N container | Function | - | \- | N disabled | Boolean | false | \- | N -external-classes | Array | - | `['t-class']` | N offset-top | String / Number | 0 | \- | N z-index | Number | 99 | \- | N @@ -16,4 +17,10 @@ z-index | Number | 99 | \- | N name | params | description -- | -- | -- -scroll | `(detail: { scrollTop: number, isFixed: boolean })` | \- +scroll | `(detail: { scrollTop: number, isFixed: boolean })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) +### Sticky External Classes + +className | Description +-- | -- +t-class | \- +t-class-content | \- diff --git a/src/sticky/README.md b/src/sticky/README.md index 53dc10d58..d96f66550 100644 --- a/src/sticky/README.md +++ b/src/sticky/README.md @@ -45,10 +45,13 @@ isComponent: true ## API + ### Sticky Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N container | Function | - | 函数返回容器对应的 NodesRef 节点，将对应节点指定为组件的外部容器，滚动时组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。 | N disabled | Boolean | false | 是否禁用组件 | N offset-top | String / Number | 0 | 吸顶时与顶部的距离，单位`px` | N @@ -58,10 +61,10 @@ z-index | Number | 99 | 吸顶时的 z-index | N 名称 | 参数 | 描述 -- | -- | -- -scroll | `(detail: { scrollTop: number, isFixed: boolean })` | 滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶 +scroll | `(detail: { scrollTop: number, isFixed: boolean })` | 滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) +### Sticky External Classes -### Sticky 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 t-class-content | 内容样式类 diff --git a/src/sticky/props.ts b/src/sticky/props.ts index f463d463e..a00df5d22 100644 --- a/src/sticky/props.ts +++ b/src/sticky/props.ts @@ -15,13 +15,9 @@ const props: TdStickyProps = { type: Boolean, value: false, }, - /** 根结点外部样式 */ - externalClasses: { - type: Array, - }, /** 吸顶时与顶部的距离，单位`px` */ offsetTop: { - type: Number, + type: null, value: 0, }, /** 吸顶时的 z-index */ diff --git a/src/sticky/type.ts b/src/sticky/type.ts index e60c4b480..dabd4eb0e 100644 --- a/src/sticky/type.ts +++ b/src/sticky/type.ts @@ -12,14 +12,6 @@ export interface TdStickyProps { type: undefined; value?: null; }; - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; /** * 是否禁用组件 * @default false @@ -28,20 +20,13 @@ export interface TdStickyProps { type: BooleanConstructor; value?: boolean; }; - /** - * 根结点外部样式 - */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class']; - }; /** * 吸顶时与顶部的距离，单位`px` * @default 0 */ offsetTop?: { - type: NumberConstructor; - value?: number; + type: null; + value?: string | number; }; /** * 吸顶时的 z-index diff --git a/src/swiper/README.en-US.md b/src/swiper/README.en-US.md index f8bc339a2..684aa8fbb 100644 --- a/src/swiper/README.en-US.md +++ b/src/swiper/README.en-US.md @@ -1,16 +1,19 @@ :: BASE_DOC :: ## API + ### Swiper Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N autoplay | Boolean | true | \- | N current | Number | 0 | \- | N -direction | String | horizontal | options：horizontal/vertical | N +direction | String | horizontal | options: horizontal/vertical | N display-multiple-items | Number | 1 | `0.32.0` | N duration | Number | 300 | \- | N -easing-function | String | default | `0.32.0`。options：default/linear/easeInCubic/easeOutCubic/easeInOutCubic | N +easing-function | String | default | `0.32.0`。options: default/linear/easeInCubic/easeOutCubic/easeInOutCubic | N height | String / Number | 192 | \- | N image-props | Object | - | `0.34.0` | N interval | Number | 5000 | \- | N @@ -18,7 +21,7 @@ list | Array | - | `0.32.0`。Typescript：`string[] \| SwiperList[]` `interface loop | Boolean | true | \- | N navigation | Boolean / Object / Slot | true | Typescript：`SwiperNavProps \| boolean`，[SwiperNav API Documents](./swiper-nav?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N next-margin | String / Number | 0 | `0.32.0` | N -pagination-position | String | bottom | options：top-left/top/top-right/bottom-left/bottom/bottom-right | N +pagination-position | String | bottom | options: top-left/top/top-right/bottom-left/bottom/bottom-right | N previous-margin | String / Number | 0 | `0.32.0` | N snap-to-edge | Boolean | false | `0.32.0` | N @@ -28,21 +31,39 @@ name | params | description -- | -- | -- change | `(current: number, source: SwiperChangeSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts)。
`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`
click | `(index: number)` | `0.34.0` +image-load | `(index: number)` | `1.1.4` +### Swiper External Classes + +className | Description +-- | -- +t-class | \- +t-class-image | \- +t-class-nav | \- +t-class-next-image | \- +t-class-prev-image | \- + ### SwiperNav Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N current | Number | 0 | `0.34.0` | N -direction | String | horizontal | `0.34.0`。options：horizontal/vertical | N +direction | String | horizontal | `0.34.0`。options: horizontal/vertical | N min-show-num | Number | 2 | \- | N -pagination-position | String | bottom | `0.34.0`。options：top-left/top/top-right/bottom-left/bottom/bottom-right | N +pagination-position | String | bottom | `0.34.0`。options: top-left/top/top-right/bottom-left/bottom/bottom-right | N show-controls | Boolean | false | `0.32.0` | N total | Number | 0 | `0.34.0` | N type | String | dots | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper-nav/type.ts) | N +### SwiperNav External Classes +className | Description +-- | -- +t-class | \- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -58,4 +79,4 @@ Name | Default Value | Description --td-swiper-nav-fraction-bg-color | @font-gray-3 | - --td-swiper-nav-fraction-color | @font-white-1 | - --td-swiper-nav-fraction-font-size | 24rpx | - ---td-swiper-nav-fraction-height | 48rpx | - +--td-swiper-nav-fraction-height | 48rpx | - \ No newline at end of file diff --git a/src/swiper/README.md b/src/swiper/README.md index 2c4604d49..8ddfb4b15 100644 --- a/src/swiper/README.md +++ b/src/swiper/README.md @@ -63,10 +63,13 @@ isComponent: true {{ vertical }} ## API + ### Swiper Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N autoplay | Boolean | true | 是否自动播放 | N current | Number | 0 | 当前轮播在哪一项（下标） | N direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N @@ -91,21 +94,23 @@ snap-to-edge | Boolean | false | `0.32.0`。当 swiper-item 的个数大于等 change | `(current: number, source: SwiperChangeSource)` | 轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts)。
`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`
click | `(index: number)` | `0.34.0`。点击轮播项时触发 image-load | `(index: number)` | `1.1.4`。图片加载时触发 +### Swiper External Classes -### Swiper 外部样式类 - -类名 | 说明 +类名 | 描述 -- | -- t-class | 根节点样式类 -t-class-nav | 导航样式类 t-class-image | 当前图片样式类 -t-class-prev-image | 上一图片样式类 +t-class-nav | 导航样式类 t-class-next-image | 下一图片样式类 +t-class-prev-image | 上一图片样式类 + ### SwiperNav Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N current | Number | 0 | `0.34.0`。当前轮播在哪一项（下标） | N direction | String | horizontal | `0.34.0`。轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N min-show-num | Number | 2 | 小于这个数字不会显示导航器 | N @@ -113,14 +118,14 @@ pagination-position | String | bottom | `0.34.0`。页码信息展示位置。 show-controls | Boolean | false | `0.32.0`。是否显示两侧的控制按钮 | N total | Number | 0 | `0.34.0`。总共的项数 | N type | String | dots | 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper-nav/type.ts) | N +### SwiperNav External Classes -### SwiperNav 外部样式类 - -类名 | 说明 +类名 | 描述 -- | -- t-class | 根节点样式类 -### CSS 变量 +### CSS Variables + 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -136,4 +141,4 @@ t-class | 根节点样式类 --td-swiper-nav-fraction-bg-color | @font-gray-3 | - --td-swiper-nav-fraction-color | @font-white-1 | - --td-swiper-nav-fraction-font-size | 24rpx | - ---td-swiper-nav-fraction-height | 48rpx | - +--td-swiper-nav-fraction-height | 48rpx | - \ No newline at end of file diff --git a/src/switch/README.en-US.md b/src/switch/README.en-US.md index a1919436f..1271e390d 100644 --- a/src/switch/README.en-US.md +++ b/src/switch/README.en-US.md @@ -1,17 +1,19 @@ :: BASE_DOC :: ## API + ### Switch Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N custom-value | Array | [true, false] | Typescript：`Array` | N -disabled | Boolean | false | \- | N -icon | Array | [] | Typescript：`string[]` | N -label | Array | [] | Typescript：`string[]` | N -loading | Boolean | false | \- | N -size | String | medium | options：small/medium/large | N -style | String | - | \- | N +disabled | Boolean | undefined | \- | N +icon | Array | [] | `0.27.0`。Typescript：`string[]` | N +label | Array | [] | `0.27.0`。Typescript：`string[]` | N +loading | Boolean | false | `0.27.0` | N +size | String | medium | `0.27.0`。options: small/medium/large | N value | String / Number / Boolean | null | Typescript：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N default-value | String / Number / Boolean | undefined | uncontrolled property。Typescript：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N @@ -21,8 +23,8 @@ name | params | description -- | -- | -- change | `(value: SwitchValue)` | \- - ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -56,4 +58,4 @@ Name | Default Value | Description --td-switch-small-width | 78rpx | - --td-switch-unchecked-color | @font-gray-4 | - --td-switch-unchecked-disabled-color | @bg-color-component-disabled | - ---td-switch-width | 90rpx | - +--td-switch-width | 90rpx | - \ No newline at end of file diff --git a/src/switch/README.md b/src/switch/README.md index 754faf64e..5bbc9c3aa 100644 --- a/src/switch/README.md +++ b/src/switch/README.md @@ -45,16 +45,19 @@ isComponent: true {{ size }} ## API + ### Switch Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N custom-value | Array | [true, false] | 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close']。TS 类型：`Array` | N -disabled | Boolean | false | 是否禁用组件 | N -icon `v0.27.0` | Array | [] | 开关的图标；[打开时的图标，关闭时的图标]。TS 类型：`string[]` | N -label `v0.27.0` | Array | [] | 开关的标签；[打开时的标签，关闭时的标签]。TS 类型：`string[]` | N -loading `v0.27.0` | Boolean | false | 是否处于加载中状态 | N -size `v0.27.0` | String | medium | 开关尺寸。可选项：small/medium/large | N +disabled | Boolean | undefined | 是否禁用组件。优先级：Switch.disabled > Form.disabled | N +icon | Array | [] | `0.27.0`。开关的图标；[打开时的图标，关闭时的图标]。TS 类型：`string[]` | N +label | Array | [] | `0.27.0`。开关的标签；[打开时的标签，关闭时的标签]。TS 类型：`string[]` | N +loading | Boolean | false | `0.27.0`。是否处于加载中状态 | N +size | String | medium | `0.27.0`。开关尺寸。可选项：small/medium/large | N value | String / Number / Boolean | null | 开关值。TS 类型：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N default-value | String / Number / Boolean | undefined | 开关值。非受控属性。TS 类型：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/switch/type.ts) | N @@ -64,8 +67,8 @@ default-value | String / Number / Boolean | undefined | 开关值。非受控属 -- | -- | -- change | `(value: SwitchValue)` | 数据发生变化时触发 +### CSS Variables -### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -99,4 +102,4 @@ change | `(value: SwitchValue)` | 数据发生变化时触发 --td-switch-small-width | 78rpx | - --td-switch-unchecked-color | @font-gray-4 | - --td-switch-unchecked-disabled-color | @bg-color-component-disabled | - ---td-switch-width | 90rpx | - +--td-switch-width | 90rpx | - \ No newline at end of file diff --git a/src/switch/__test__/__snapshots__/index.test.js.snap b/src/switch/__test__/__snapshots__/index.test.js.snap index 4f9ce97ac..ed43e1597 100644 --- a/src/switch/__test__/__snapshots__/index.test.js.snap +++ b/src/switch/__test__/__snapshots__/index.test.js.snap @@ -5,7 +5,7 @@ exports[`switch Props :base 1`] = ` Form.disabled */ disabled: { - type: Boolean, - value: false, + type: null, + value: undefined, }, /** 开关的图标；[打开时的图标，关闭时的图标] */ icon: { diff --git a/src/switch/type.ts b/src/switch/type.ts index edea7d08d..009f7c5c9 100644 --- a/src/switch/type.ts +++ b/src/switch/type.ts @@ -4,7 +4,7 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -export interface TdSwitchProps { +export interface TdSwitchProps { /** * 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close'] * @default [true, false] @@ -14,8 +14,7 @@ export interface TdSwitchProps { value?: Array; }; /** - * 是否禁用组件 - * @default false + * 是否禁用组件。优先级：Switch.disabled > Form.disabled */ disabled?: { type: BooleanConstructor; @@ -53,14 +52,6 @@ export interface TdSwitchProps { type: StringConstructor; value?: 'small' | 'medium' | 'large'; }; - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; /** * 开关值 * @default null diff --git a/src/tab-bar-item/props.ts b/src/tab-bar-item/props.ts index 8b45a3d45..556220674 100644 --- a/src/tab-bar-item/props.ts +++ b/src/tab-bar-item/props.ts @@ -10,7 +10,7 @@ const props: TdTabBarItemProps = { badgeProps: { type: Object, }, - /** 图标名称 */ + /** 图标名称。传入对象时透传至 Icon 组件 */ icon: { type: null, }, diff --git a/src/tab-bar-item/type.ts b/src/tab-bar-item/type.ts index 1d7114225..c5ef64806 100644 --- a/src/tab-bar-item/type.ts +++ b/src/tab-bar-item/type.ts @@ -15,19 +15,11 @@ export interface TdTabBarItemProps { value?: BadgeProps; }; /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; - /** - * 图标名称 + * 图标名称。传入对象时透传至 Icon 组件 */ icon?: { - type: StringConstructor; - value?: string; + type: null; + value?: string | object; }; /** * 二级菜单 diff --git a/src/tab-bar/README.en-US.md b/src/tab-bar/README.en-US.md index 7e179c5e8..127e5e088 100644 --- a/src/tab-bar/README.en-US.md +++ b/src/tab-bar/README.en-US.md @@ -1,18 +1,20 @@ :: BASE_DOC :: ## API + ### TabBar Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N bordered | Boolean | true | \- | N -external-classes | Array | - | `['t-class']` | N fixed | Boolean | true | \- | N safe-area-inset-bottom | Boolean | true | \- | N -shape | String | normal | options：normal/round | N +shape | String | normal | options: normal/round | N split | Boolean | true | \- | N -theme | String | normal | options：normal/tag | N -value | String / Number / Array | null | Typescript：`string \| number \| Array` | N +theme | String | normal | options: normal/tag | N +value | String / Number / Array | - | Typescript：`string \| number \| Array` | N default-value | String / Number / Array | undefined | uncontrolled property。Typescript：`string \| number \| Array` | N ### TabBar Events @@ -20,18 +22,26 @@ default-value | String / Number / Array | undefined | uncontrolled property。Ty name | params | description -- | -- | -- change | `(value: string \| number)` | \- +### TabBar External Classes + +className | Description +-- | -- +t-class | \- + ### TabBarItem Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N badge-props | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar-item/type.ts) | N -icon | String / Slot | - | \- | N +icon | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N sub-tab-bar | Array | - | Typescript：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar-item/type.ts) | N value | String / Number | - | \- | N - ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -45,4 +55,4 @@ Name | Default Value | Description --td-tab-bar-spread-border-color | @border-color | - --td-tab-bar-spread-shadow | @shadow-3 | - --td-tab-bar-border-color | @border-color | - ---td-tab-bar-round-shadow | @shadow-3 | - +--td-tab-bar-round-shadow | @shadow-3 | - \ No newline at end of file diff --git a/src/tab-bar/README.md b/src/tab-bar/README.md index 8aa842990..be4f7e09d 100644 --- a/src/tab-bar/README.md +++ b/src/tab-bar/README.md @@ -58,17 +58,20 @@ isComponent: true {{ custom }} ## API + ### TabBar Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N bordered | Boolean | true | 是否显示外边框 | N fixed | Boolean | true | 是否固定在底部 | N safe-area-inset-bottom | Boolean | true | 是否为 iPhoneX 留出底部安全距离 | N shape | String | normal | 标签栏的形状。可选项：normal/round | N split | Boolean | true | 是否需要分割线 | N theme | String | normal | 选项风格。可选项：normal/tag | N -value | String / Number / Array | null | 当前选中标签的索引。TS 类型：`string \| number \| Array` | N +value | String / Number / Array | - | 当前选中标签的索引。TS 类型：`string \| number \| Array` | N default-value | String / Number / Array | undefined | 当前选中标签的索引。非受控属性。TS 类型：`string \| number \| Array` | N ### TabBar Events @@ -76,23 +79,26 @@ default-value | String / Number / Array | undefined | 当前选中标签的索 名称 | 参数 | 描述 -- | -- | -- change | `(value: string \| number)` | 选中标签切换时触发 +### TabBar External Classes -### TabBar 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 + ### TabBarItem Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N badge-props | Object | - | 图标右上角提示信息。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar-item/type.ts) | N -icon | String / Object / Slot | - | 图标名称。传入对象时透传至 Icon 组件 | N +icon | String / Object / Slot | - | 图标名称。传入对象时透传至 Icon 组件。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N sub-tab-bar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar-item/type.ts) | N value | String / Number | - | 标识符 | N +### CSS Variables -### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -106,4 +112,4 @@ value | String / Number | - | 标识符 | N --td-tab-bar-spread-border-color | @border-color | - --td-tab-bar-spread-shadow | @shadow-3 | - --td-tab-bar-border-color | @border-color | - ---td-tab-bar-round-shadow | @shadow-3 | - +--td-tab-bar-round-shadow | @shadow-3 | - \ No newline at end of file diff --git a/src/tab-bar/props.ts b/src/tab-bar/props.ts index a0ab2804e..637eee00f 100644 --- a/src/tab-bar/props.ts +++ b/src/tab-bar/props.ts @@ -48,7 +48,6 @@ const props: TdTabBarProps = { /** 当前选中标签的索引，非受控属性 */ defaultValue: { type: null, - value: null, }, }; diff --git a/src/tab-bar/type.ts b/src/tab-bar/type.ts index 53b85c59f..3565afd4a 100644 --- a/src/tab-bar/type.ts +++ b/src/tab-bar/type.ts @@ -13,14 +13,6 @@ export interface TdTabBarProps { type: BooleanConstructor; value?: boolean; }; - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; /** * 组件类名，用于设置外层元素类名 */ @@ -70,7 +62,6 @@ export interface TdTabBarProps { }; /** * 当前选中标签的索引 - * @default null */ value?: { type: null; @@ -78,7 +69,6 @@ export interface TdTabBarProps { }; /** * 当前选中标签的索引，非受控属性 - * @default null */ defaultValue?: { type: null; diff --git a/src/tab-panel/props.ts b/src/tab-panel/props.ts index bc991282a..612ad6f84 100644 --- a/src/tab-panel/props.ts +++ b/src/tab-panel/props.ts @@ -9,7 +9,6 @@ const props: TdTabPanelProps = { /** 透传至 Badge 组件 */ badgeProps: { type: Object, - value: null, }, /** 【实现有误，暂不支持】选项卡内容隐藏时是否销毁 */ destroyOnHide: { @@ -21,7 +20,7 @@ const props: TdTabPanelProps = { type: Boolean, value: false, }, - /** 图标，传对象则透传至 Icon */ + /** `1.0.0-rc.1`。图标，传对象则透传至 Icon */ icon: { type: null, }, diff --git a/src/tab-panel/type.ts b/src/tab-panel/type.ts index d35b546d1..dba3c1c5f 100644 --- a/src/tab-panel/type.ts +++ b/src/tab-panel/type.ts @@ -9,7 +9,6 @@ import { TabValue } from '../tabs/index'; export interface TdTabPanelProps { /** * 透传至 Badge 组件 - * @default null */ badgeProps?: { type: ObjectConstructor; @@ -32,7 +31,7 @@ export interface TdTabPanelProps { value?: boolean; }; /** - * 图标，传对象则透传至 Icon + * `1.0.0-rc.1`。图标，传对象则透传至 Icon */ icon?: { type: null; diff --git a/src/tabs/README.en-US.md b/src/tabs/README.en-US.md index 4251321fd..558b7e399 100644 --- a/src/tabs/README.en-US.md +++ b/src/tabs/README.en-US.md @@ -1,20 +1,22 @@ :: BASE_DOC :: ## API + ### Tabs Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N -external-classes | Array | - | `['t-class', 't-class-item', 't-class-active', 't-class-track']` | N middle | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N show-bottom-line | Boolean | true | \- | N space-evenly | Boolean | true | \- | N -split | Boolean | true | `1.1.10` | N +split | Boolean | true | \- | N sticky | Boolean | false | \- | N sticky-props | Object | - | Typescript：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N swipeable | Boolean | true | \- | N -theme | String | line | options：line/tag/card | N +theme | String | line | options: line/tag/card | N value | String / Number | - | Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N default-value | String / Number | undefined | uncontrolled property。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N @@ -25,22 +27,33 @@ name | params | description change | `(value: TabValue, label: string)` | \- click | `(value: TabValue, label: string)` | \- scroll | `(scrollTop: number, isFixed: boolean)` | \- +### Tabs External Classes + +className | Description +-- | -- +t-class | \- +t-class-active | \- +t-class-content | \- +t-class-item | \- +t-class-track | \- + ### TabPanel Props name | type | default | description | required -- | -- | -- | -- | -- -badge-props | Object | null | \- | N +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +badge-props | Object | - | \- | N destroy-on-hide | Boolean | true | \- | N disabled | Boolean | false | \- | N -icon | String / Object | - | `1.0.0-rc.1` | N +icon | String / Object | - | \- | N label | String | - | \- | N panel | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N value | String / Number | - | Typescript：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-panel/type.ts) | N - - ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -60,4 +73,4 @@ Name | Default Value | Description --td-tab-track-color | @brand-color | - --td-tab-track-radius | 8rpx | - --td-tab-track-thickness | 6rpx | - ---td-tab-track-width | 32rpx | - +--td-tab-track-width | 32rpx | - \ No newline at end of file diff --git a/src/tabs/README.md b/src/tabs/README.md index dcf2b380c..61de307e2 100644 --- a/src/tabs/README.md +++ b/src/tabs/README.md @@ -114,10 +114,13 @@ Page({ ``` ## API + ### Tabs Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N animation | Object | - | 动画效果设置。其中 duration 表示动画时长。（单位：秒）。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N middle | Slot | - | 中间内容，介于头部和内容之间。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N show-bottom-line | Boolean | true | 是否展示底部激活线条 | N @@ -137,21 +140,24 @@ default-value | String / Number | undefined | 激活的选项卡值。非受控 change | `(value: TabValue, label: string)` | 激活的选项卡发生变化时触发 click | `(value: TabValue, label: string)` | 点击选项卡时触发 scroll | `(scrollTop: number, isFixed: boolean)` | 页面滚动时触发 +### Tabs External Classes -### Tabs 外部样式类 -类名 | 说明 --- | -- +类名 | 描述 +-- | -- t-class | 根节点样式类 -t-class-item | 选项样式类 t-class-active | 激活态样式类 -t-class-track | 滚动条样式类 t-class-content | 内容样式类 +t-class-item | 选项样式类 +t-class-track | 滚动条样式类 + ### TabPanel Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -badge-props | Object | null | 透传至 Badge 组件 | N +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +badge-props | Object | - | 透传至 Badge 组件 | N destroy-on-hide | Boolean | true | 【实现有误，暂不支持】选项卡内容隐藏时是否销毁 | N disabled | Boolean | false | 是否禁用当前选项卡 | N icon | String / Object | - | `1.0.0-rc.1`。图标，传对象则透传至 Icon | N @@ -159,9 +165,8 @@ label | String | - | 选项卡名称 | N panel | String / Slot | - | 用于自定义选项卡面板内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-panel/type.ts) | N +### CSS Variables - -### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -181,4 +186,4 @@ value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabV --td-tab-track-color | @brand-color | - --td-tab-track-radius | 8rpx | - --td-tab-track-thickness | 6rpx | - ---td-tab-track-width | 32rpx | - +--td-tab-track-width | 32rpx | - \ No newline at end of file diff --git a/src/tabs/props.ts b/src/tabs/props.ts index 39832dd65..183032b1e 100644 --- a/src/tabs/props.ts +++ b/src/tabs/props.ts @@ -24,7 +24,7 @@ const props: TdTabsProps = { type: Boolean, value: true, }, - /** 是否展示分割线 */ + /** `1.1.10`。是否展示分割线 */ split: { type: Boolean, value: true, diff --git a/src/tabs/type.ts b/src/tabs/type.ts index ddcaada96..af17c0fb9 100644 --- a/src/tabs/type.ts +++ b/src/tabs/type.ts @@ -38,7 +38,7 @@ export interface TdTabsProps { value?: boolean; }; /** - * 是否展示分割线 + * `1.1.10`。是否展示分割线 * @default true */ split?: { diff --git a/src/tag/README.en-US.md b/src/tag/README.en-US.md index 20b130919..27af848b8 100644 --- a/src/tag/README.en-US.md +++ b/src/tag/README.en-US.md @@ -8,7 +8,7 @@ name | type | default | description | required -- | -- | -- | -- | -- style | Object | - | CSS(Cascading Style Sheets) | N custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N -closable | Boolean / Object | false | \- | N +closable | Boolean / Object / Slot | false | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N disabled | Boolean | false | \- | N icon | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N max-width | String / Number | - | \- | N @@ -39,7 +39,7 @@ custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on v checked | Boolean | undefined | \- | N default-checked | Boolean | undefined | uncontrolled property | N closable | Boolean | false | \- | N -content | String / Number / Array / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +content | String / Number / Array / Slot | - | Typescript：`string \| number \| string[]` | N disabled | Boolean | false | \- | N icon | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N shape | String | square | options: square/round/mark | N @@ -59,7 +59,7 @@ className | Description -- | -- t-class | \- -### CSS 变量 +### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description diff --git a/src/tag/README.md b/src/tag/README.md index baa561592..2f21c3de6 100644 --- a/src/tag/README.md +++ b/src/tag/README.md @@ -56,10 +56,10 @@ isComponent: true -- | -- | -- | -- | -- style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N -closable | Boolean / Object | false | 标签是否可关闭 | N +closable | Boolean / Object / Slot | false | 标签是否可关闭。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N icon | String / Object / Slot | - | 标签中的图标，可自定义图标呈现。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N -max-width | String / Number | - | 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80 (skyline暂不支持该属性) | N +max-width | String / Number | - | 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80 | N shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N size | String | medium | 标签尺寸。可选项：small/medium/large/extra-large | N theme | String | default | 组件风格，用于描述组件不同的应用场景。可选项：default/primary/warning/danger/success | N @@ -87,7 +87,7 @@ custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场 checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态 | N default-checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N closable | Boolean | false | 标签是否可关闭 | N -content | String / Number / Array / Slot | - | 组件子元素；传入数组时：[选中内容，非选中内容]。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +content | String / Number / Array / Slot | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[]` | N disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N icon | String / Object / Slot | - | 标签图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N @@ -107,7 +107,7 @@ close | \- | 如果关闭按钮存在，点击关闭按钮时触发 -- | -- t-class | 根节点样式类 -### CSS 变量 +### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 @@ -145,4 +145,4 @@ t-class | 根节点样式类 --td-tag-square-border-radius | 8rpx | - --td-tag-success-color | @success-color | - --td-tag-success-light-color | @success-color-1 | - ---td-tag-warning-color | @warning-color | - +--td-tag-warning-color | @warning-color | - \ No newline at end of file diff --git a/src/textarea/README.en-US.md b/src/textarea/README.en-US.md index 216e98db4..be6f40134 100644 --- a/src/textarea/README.en-US.md +++ b/src/textarea/README.en-US.md @@ -6,21 +6,32 @@ name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N adjust-position | Boolean | true | \- | N autofocus | Boolean | false | \- | N -autosize | Boolean | false | \- | N +autosize | Boolean / Object | false | Typescript：`boolean \| { maxHeight?: number, minHeight?: number }` | N +bordered | Boolean | false | \- | N confirm-hold | Boolean | false | \- | N -confirm-type | String | return | options：return/send/search/next/go/done。Typescript：`'return' \| 'send' \| 'search' \| 'next' \| 'go' \| 'done'` | N +confirm-type | String | return | options: return/send/search/next/go/done。Typescript：`'return' \| 'send' \| 'search' \| 'next' \| 'go' \| 'done'` | N +cursor | Number | -1 | \- | N cursor-spacing | Number | 0 | \- | N -disabled | Boolean | false | \- | N -external-classes | Array | - | `['t-class', 't-class-textarea', 't-class-label']` | N +disable-default-padding | Boolean | false | \- | N +disabled | Boolean | undefined | \- | N +fixed | Boolean | false | \- | N focus | Boolean | false | \- | N -label | String / Slot | - | \- | N +hold-keyboard | Boolean | false | \- | N +indicator | Boolean | false | \- | N +label | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N maxcharacter | Number | - | \- | N -maxlength | Number | - | \- | N +maxlength | Number | -1 | \- | N placeholder | String | undefined | \- | N -value | String | null | \- | N -default-value | String | '' | uncontrolled property | N +placeholder-style | String | - | \- | N +selection-end | Number | -1 | \- | N +selection-start | Number | -1 | \- | N +show-confirm-bar | Boolean | true | \- | N +value | String / Number | - | Typescript：`TextareaValue` `type TextareaValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/textarea/type.ts) | N +default-value | String / Number | undefined | uncontrolled property。Typescript：`TextareaValue` `type TextareaValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/textarea/type.ts) | N ### Textarea Events @@ -30,7 +41,16 @@ blur | `(value: TextareaValue, cursor: number)` | \- change | `(value: TextareaValue, cursor: number)` | \- enter | `(value: TextareaValue)` | \- focus | `(value: TextareaValue)` | \- +keyboardheightchange | `(height: number, duration: number)` | \- line-change | `(value: TextareaValue)` | \- +### Textarea External Classes + +className | Description +-- | -- +t-class | \- +t-class-indicator | \- +t-class-label | \- +t-class-textarea | \- ### CSS Variables @@ -44,4 +64,4 @@ Name | Default Value | Description --td-textarea-indicator-text-color | @font-gray-3 | - --td-textarea-label-color | @font-gray-1 | - --td-textarea-placeholder-color | @font-gray-3 | - ---td-textarea-text-color | @font-gray-1 | - +--td-textarea-text-color | @font-gray-1 | - \ No newline at end of file diff --git a/src/textarea/README.md b/src/textarea/README.md index 1073ba66a..3a2d9c932 100644 --- a/src/textarea/README.md +++ b/src/textarea/README.md @@ -67,32 +67,34 @@ isComponent: true ### Textarea Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N autofocus | Boolean | false | 自动聚焦，拉起键盘 | N -autosize | Boolean / Object | false | 是否自动增高，值为 true 时，style.height 不生效。支持传入对象，如 { maxHeight: 120, minHeight: 20 } | N +autosize | Boolean / Object | false | 是否自动增高，值为 true 时，style.height 不生效。支持传入对象，如 { maxHeight: 120, minHeight: 20 }。TS 类型：`boolean \| { maxHeight?: number, minHeight?: number }` | N +bordered | Boolean | false | 是否显示外边框 | N confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起点 | N confirm-type | String | return | 设置键盘右下角按钮的文字，仅在 type='text'时生效。可选项：return/send/search/next/go/done。TS 类型：`'return' \| 'send' \| 'search' \| 'next' \| 'go' \| 'done'` | N +cursor | Number | -1 | 指定 focus 时的光标位置 | N cursor-spacing | Number | 0 | 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 | N -disabled | Boolean | false | 是否禁用文本框 | N +disable-default-padding | Boolean | false | 是否去掉 iOS 下的默认内边距 | N +disabled | Boolean | undefined | 是否禁用文本框 | N +fixed | Boolean | false | 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true | N focus | Boolean | false | 自动聚焦 | N -label | String / Slot | - | 左侧文本 | N -maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N -maxlength | Number | -1 | 用户最多可以输入的字符个数。默认为 -1，不限制输入长度 | N +hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N indicator | Boolean | false | 显示文本计数器，如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时， indicator无效 | N +label | String / Slot | - | 左侧文本。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N +maxlength | Number | -1 | 用户最多可以输入的字符个数，值为 -1 的时候不限制最大长度 | N placeholder | String | undefined | 占位符 | N -placeholderStyle | String | '' | 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight | N -value | String | null | 文本框值 | N -default-value | String | '' | 文本框值。非受控属性 | N -fixed | Boolean | false | 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true | N -bordered | Boolean | false | 是否显示外边框 | N -cursor | Number | -1 | 指定 focus 时的光标位置 | N -disable-default-padding | Boolean | false | 是否去掉 iOS 下的默认内边距 | N -show-confirm-bar | Boolean | true | 是否显示键盘上方带有”完成“按钮那一栏 | N -selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N +placeholder-style | String | - | 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight | N selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N -hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N +selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N +show-confirm-bar | Boolean | true | 是否显示键盘上方带有”完成“按钮那一栏 | N +value | String / Number | - | 文本框值。TS 类型：`TextareaValue` `type TextareaValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/textarea/type.ts) | N +default-value | String / Number | undefined | 文本框值。非受控属性。TS 类型：`TextareaValue` `type TextareaValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/textarea/type.ts) | N ### Textarea Events @@ -102,19 +104,18 @@ blur | `(value: TextareaValue, cursor: number)` | 失去焦点时触发 change | `(value: TextareaValue, cursor: number)` | 输入内容变化时触发 enter | `(value: TextareaValue)` | 点击完成时触发 focus | `(value: TextareaValue)` | 获得焦点时触发 -line-change | `(value: TextareaValue)` | 行高发生变化时触发 keyboardheightchange | `(height: number, duration: number)` | 键盘高度发生变化的时候触发此事件 +line-change | `(value: TextareaValue)` | 行高发生变化时触发 +### Textarea External Classes -### Textarea 外部样式类 - -类名 | 说明 +类名 | 描述 -- | -- t-class | 根节点样式类 -t-class-textarea | 占位符样式类 -t-class-label | 左侧文本样式类 t-class-indicator | 计数器样式类 +t-class-label | 左侧文本样式类 +t-class-textarea | 占位符样式类 -### CSS 变量 +### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 @@ -126,4 +127,4 @@ t-class-indicator | 计数器样式类 --td-textarea-indicator-text-color | @font-gray-3 | - --td-textarea-label-color | @font-gray-1 | - --td-textarea-placeholder-color | @font-gray-3 | - ---td-textarea-text-color | @font-gray-1 | - +--td-textarea-text-color | @font-gray-1 | - \ No newline at end of file diff --git a/src/textarea/__test__/__snapshots__/index.test.js.snap b/src/textarea/__test__/__snapshots__/index.test.js.snap index 10f0d2a08..09650f8f8 100644 --- a/src/textarea/__test__/__snapshots__/index.test.js.snap +++ b/src/textarea/__test__/__snapshots__/index.test.js.snap @@ -29,9 +29,9 @@ exports[`textarea slots : label 1`] = ` confirmType="return" cursor="{{-1}}" cursorSpacing="{{0}}" - disabled="{{false}}" + disabled="{{null}}" disableDefaultPadding="{{false}}" - fixed="{{false}}" + fixed="{{null}}" focus="{{false}}" holdKeyboard="{{false}}" maxlength="{{-1}}" diff --git a/src/textarea/props.ts b/src/textarea/props.ts index 6cbb499b2..ac3f2b8e2 100644 --- a/src/textarea/props.ts +++ b/src/textarea/props.ts @@ -16,11 +16,16 @@ const props: TdTextareaProps = { type: Boolean, value: false, }, - /** 是否自动增高，值为 autosize 时，style.height 不生效 */ + /** 是否自动增高，值为 true 时，style.height 不生效。支持传入对象，如 { maxHeight: 120, minHeight: 20 } */ autosize: { type: null, value: false, }, + /** 是否显示外边框 */ + bordered: { + type: Boolean, + value: false, + }, /** 点击键盘右下角按钮时是否保持键盘不收起点 */ confirmHold: { type: Boolean, @@ -31,77 +36,81 @@ const props: TdTextareaProps = { type: String, value: 'return', }, + /** 指定 focus 时的光标位置 */ + cursor: { + type: Number, + value: -1, + }, /** 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 */ cursorSpacing: { type: Number, value: 0, }, + /** 是否去掉 iOS 下的默认内边距 */ + disableDefaultPadding: { + type: Boolean, + value: false, + }, /** 是否禁用文本框 */ disabled: { + type: null, + value: undefined, + }, + /** 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true */ + fixed: { type: Boolean, - value: false, + value: null, }, - /** 组件类名，分别用于表示组件外层元素、输入框、占位符、标签名等元素类名 */ - externalClasses: { - type: Array, + /** 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true，非受控属性 */ + defaultFixed: { + type: Boolean, + value: false, }, /** 自动聚焦 */ focus: { type: Boolean, value: false, }, - /** 左侧文本 */ - label: { - type: String, + /** focus时，点击页面的时候不收起键盘 */ + holdKeyboard: { + type: Boolean, + value: false, }, - /** 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true */ - fixed: { + /** 显示文本计数器，如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时， indicator无效 */ + indicator: { type: Boolean, value: false, }, + /** 左侧文本 */ + label: { + type: String, + }, /** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 */ maxcharacter: { type: Number, }, - /** 用户最多可以输入的字符个数。默认为 -1，不限制输入长度 */ + /** 用户最多可以输入的字符个数，值为 -1 的时候不限制最大长度 */ maxlength: { type: Number, value: -1, }, - /** 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight */ + /** 占位符 */ placeholder: { type: String, value: undefined, }, - /** 占位符样式 */ + /** 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight */ placeholderStyle: { type: String, value: '', }, - /** 文本框值 */ - value: { - type: String, - value: null, - }, - /** 文本框值，非受控属性 */ - defaultValue: { - type: String, - value: '', - }, - /** 是否显示外边框 */ - bordered: { - type: Boolean, - value: false, - }, - /** - * 显示文本计数器，如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时， indicator无效 - */ - indicator: { - type: Boolean, - value: false, + /** 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 */ + selectionEnd: { + type: Number, + value: -1, }, - /** 指定focus时的光标位置 */ - cursor: { + /** 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 */ + selectionStart: { type: Number, value: -1, }, @@ -110,25 +119,14 @@ const props: TdTextareaProps = { type: Boolean, value: true, }, - /** 光标起始位置，自动聚集时有效，需与selection-end搭配使用 */ - selectionStart: { - type: Number, - value: -1, - }, - /** 光标结束位置，自动聚集时有效，需与selection-start搭配使用 */ - selectionEnd: { - type: Number, - value: -1, - }, - /** 是否去掉 iOS 下的默认内边距 */ - disableDefaultPadding: { - type: Boolean, - value: false, + /** 文本框值 */ + value: { + type: null, + value: null, }, - /** focus时，点击页面的时候不收起键盘 */ - holdKeyboard: { - type: Boolean, - value: false, + /** 文本框值，非受控属性 */ + defaultValue: { + type: null, }, }; diff --git a/src/textarea/type.ts b/src/textarea/type.ts index 4489359d0..59da49435 100644 --- a/src/textarea/type.ts +++ b/src/textarea/type.ts @@ -22,12 +22,20 @@ export interface TdTextareaProps { value?: boolean; }; /** - * 是否自动增高，值为 autosize 时，style.height 不生效 + * 是否自动增高，值为 true 时，style.height 不生效。支持传入对象，如 { maxHeight: 120, minHeight: 20 } * @default false */ autosize?: { type: null; - value?: boolean | object; + value?: boolean | { maxHeight?: number; minHeight?: number }; + }; + /** + * 是否显示外边框 + * @default false + */ + bordered?: { + type: BooleanConstructor; + value?: boolean; }; /** * 点击键盘右下角按钮时是否保持键盘不收起点 @@ -45,6 +53,14 @@ export interface TdTextareaProps { type: StringConstructor; value?: 'return' | 'send' | 'search' | 'next' | 'go' | 'done'; }; + /** + * 指定 focus 时的光标位置 + * @default -1 + */ + cursor?: { + type: NumberConstructor; + value?: number; + }; /** * 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 * @default 0 @@ -54,33 +70,33 @@ export interface TdTextareaProps { value?: number; }; /** - * 自定义组件样式 - * @default '' + * 是否去掉 iOS 下的默认内边距 + * @default false */ - style?: { - type: StringConstructor; - value?: string; + disableDefaultPadding?: { + type: BooleanConstructor; + value?: boolean; }; /** * 是否禁用文本框 - * @default false */ disabled?: { type: BooleanConstructor; value?: boolean; }; /** - * 组件类名，分别用于表示组件外层元素、输入框、占位符、标签名等元素类名 + * 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true + * @default false */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-textarea', 't-class-label']; + fixed?: { + type: BooleanConstructor; + value?: boolean; }; /** - * 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true + * 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true，非受控属性 * @default false */ - fixed?: { + defaultFixed?: { type: BooleanConstructor; value?: boolean; }; @@ -92,6 +108,22 @@ export interface TdTextareaProps { type: BooleanConstructor; value?: boolean; }; + /** + * focus时，点击页面的时候不收起键盘 + * @default false + */ + holdKeyboard?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 显示文本计数器，如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时， indicator无效 + * @default false + */ + indicator?: { + type: BooleanConstructor; + value?: boolean; + }; /** * 左侧文本 */ @@ -107,7 +139,7 @@ export interface TdTextareaProps { value?: number; }; /** - * 用户最多可以输入的字符个数。默认为 -1，不限制输入长度 + * 用户最多可以输入的字符个数，值为 -1 的时候不限制最大长度 * @default -1 */ maxlength?: { @@ -123,59 +155,22 @@ export interface TdTextareaProps { }; /** * 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight - */ - placeholderStyle: { - type: StringConstructor; - value: string; - }; - /** - * 文本框值 - * @default null - */ - value?: { - type: StringConstructor; - value?: string; - }; - /** - * 文本框值，非受控属性 * @default '' */ - defaultValue?: { + placeholderStyle?: { type: StringConstructor; value?: string; }; /** - * 是否显示外边框 - * @default true - */ - bordered?: { - type: BooleanConstructor; - value?: boolean; - }; - /** - * 显示文本计数器，如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时， indicator无效 - */ - indicator?: { - type: BooleanConstructor; - value?: boolean; - }; - /** - * 指定focus时的光标位置 + * 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 * @default -1 */ - cursor: { + selectionEnd?: { type: NumberConstructor; value?: number; }; - /** 是否显示键盘上方带有”完成“按钮那一栏 - * @default true - */ - showConfirmBar: { - type: BooleanConstructor; - value?: boolean; - }; /** - * 光标起始位置，自动聚集时有效，需与selection-end搭配使用 + * 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 * @default -1 */ selectionStart?: { @@ -183,27 +178,27 @@ export interface TdTextareaProps { value?: number; }; /** - * 光标结束位置，自动聚集时有效，需与selection-start搭配使用 - * @default -1 + * 是否显示键盘上方带有”完成“按钮那一栏 + * @default true */ - selectionEnd?: { - type: NumberConstructor; - value?: number; + showConfirmBar?: { + type: BooleanConstructor; + value?: boolean; }; /** - * 是否去掉 iOS 下的默认内边距 - * @default false + * 文本框值 */ - disableDefaultPadding?: { - type: BooleanConstructor; - value?: boolean; + value?: { + type: null; + value?: TextareaValue; }; /** - * focus时，点击页面的时候不收起键盘 - * @default false + * 文本框值，非受控属性 */ - holdKeyboard?: { - type: BooleanConstructor; - value?: boolean; + defaultValue?: { + type: null; + value?: TextareaValue; }; } + +export type TextareaValue = string | number; diff --git a/src/toast/README.en-US.md b/src/toast/README.en-US.md index 0c80f67f0..579747c8f 100644 --- a/src/toast/README.en-US.md +++ b/src/toast/README.en-US.md @@ -12,7 +12,7 @@ direction | String | row | options: row/column | N duration | Number | 2000 | \- | N icon | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N message | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N -overlay-props | Object | {} | Typescript：`OverlayProps `，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/toast/type.ts) | N +overlay-props | Object | - | Typescript：`OverlayProps `，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/toast/type.ts) | N placement | String | middle | options: top/middle/bottom | N prevent-scroll-through | Boolean | false | \- | N show-overlay | Boolean | false | \- | N @@ -24,7 +24,7 @@ using-custom-navbar | Boolean | false | \- | N name | params | description -- | -- | -- close | \- | \- -destory | \- | \- +destroy | \- | \- ### Toast External Classes className | Description diff --git a/src/toast/README.md b/src/toast/README.md index cb83447aa..bc6e1ee9f 100644 --- a/src/toast/README.md +++ b/src/toast/README.md @@ -49,11 +49,11 @@ direction | String | row | 图标排列方式。可选项：row/column | N duration | Number | 2000 | 弹窗显示毫秒数 | N icon | String / Object / Slot | - | 自定义图标。传入对象则透传至 Icon 组件。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N message | String / Slot | - | 弹窗显示文字。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N -overlay-props | Object | {} | 遮罩层属性，透传至 Overlay。TS 类型：`OverlayProps `，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/toast/type.ts) | N +overlay-props | Object | - | 遮罩层属性，透传至 Overlay。TS 类型：`OverlayProps `，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/toast/type.ts) | N placement | String | middle | 弹窗展示位置。可选项： top/middle/bottom | N prevent-scroll-through | Boolean | false | 防止滚动穿透，即不允许点击和滚动 | N show-overlay | Boolean | false | 是否显示遮罩层 | N -theme | String | - | 提示类型。可选项：loading/success/error，skyline模式下暂不支持枚举值loading | N +theme | String | - | 提示类型。可选项：loading/success/error | N using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N ### Toast Events @@ -61,7 +61,7 @@ using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N 名称 | 参数 | 描述 -- | -- | -- close | \- | 轻提示隐藏的时候触发 -destory | \- | 轻提示销毁的时候触发 +destroy | \- | 轻提示销毁的时候触发 ### Toast External Classes 类名 | 描述 diff --git a/src/toast/props.ts b/src/toast/props.ts index 3d82f64bf..783713979 100644 --- a/src/toast/props.ts +++ b/src/toast/props.ts @@ -27,7 +27,6 @@ const props: TdToastProps = { /** 遮罩层属性，透传至 Overlay */ overlayProps: { type: Object, - value: {}, }, /** 弹窗展示位置 */ placement: { @@ -48,6 +47,11 @@ const props: TdToastProps = { theme: { type: String, }, + /** 是否使用了自定义导航栏 */ + usingCustomNavbar: { + type: Boolean, + value: false, + }, }; export default props; diff --git a/src/toast/type.ts b/src/toast/type.ts index aedec78e1..6bace569d 100644 --- a/src/toast/type.ts +++ b/src/toast/type.ts @@ -4,7 +4,7 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { TdOverlayProps as OverlayProps } from '../overlay/index'; +import { OverlayProps } from '../overlay/index'; export interface TdToastProps { /** @@ -39,7 +39,6 @@ export interface TdToastProps { }; /** * 遮罩层属性，透传至 Overlay - * @default {} */ overlayProps?: { type: ObjectConstructor; diff --git a/src/transition/README.en-US.md b/src/transition/README.en-US.md new file mode 100644 index 000000000..4bb6d139b --- /dev/null +++ b/src/transition/README.en-US.md @@ -0,0 +1,15 @@ +:: BASE_DOC :: + +## API + +### Transition Props + +name | type | default | description | required +-- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +appear | Boolean | false | \- | N +destory-on-hide | Boolean | false | \- | N +durations | Number / Array | - | Typescript：`number \| number[]` | N +name | String | t-transition | \- | N +visible | Boolean | false | \- | N diff --git a/src/transition/README.md b/src/transition/README.md index c262753c0..27e1b4135 100644 --- a/src/transition/README.md +++ b/src/transition/README.md @@ -33,21 +33,14 @@ isComponent: true ## API -### `` 组件 - -组件路径：`tdesign-miniprogram/transition/transition` - -### 过渡类名 - -过渡类名指定格式同 vue，enter/enter-to leave/leave-to - -#### Props - -| 属性 | 值类型 | 默认值 | 说明 | -| ------------- | ---------------- | -------------- | --------------------------- | -| name | String | 't-transition' | 过渡类名，类似 vue 过渡类名 | -| visible | Boolean | false | 是否显示 | -| customClass | String | false | 自定义容器类名 | -| destoryOnHide | Boolean | false | 隐藏之后是否渲染 slot 内容 | -| appear | Boolean | false | 首次出现是否展示动画 | -| durations | Number / Boolean | | 手动指定过渡时间 | +### Transition Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +appear | Boolean | false | 首次出现是否展示动画 | N +destory-on-hide | Boolean | false | 隐藏时是否销毁内容 | N +durations | Number / Array | - | 指定过渡时间。TS 类型：`number \| number[]` | N +name | String | t-transition | 过渡类名 | N +visible | Boolean | false | 是否显示 | N diff --git a/src/transition/props.ts b/src/transition/props.ts index 2f9b94e7c..6f6697f38 100644 --- a/src/transition/props.ts +++ b/src/transition/props.ts @@ -1,29 +1,24 @@ +/* eslint-disable */ + /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-08-03 16:17:22 * */ import { TdTransitionProps } from './type'; - const props: TdTransitionProps = { /** 首次出现是否展示动画 */ appear: { type: Boolean, value: false, }, - /** 自定义容器类名 */ - customClass: { - type: String, - value: '', - }, /** 隐藏时是否销毁内容 */ - destoryOnClose: { + destoryOnHide: { type: Boolean, value: false, }, /** 指定过渡时间 */ - duration: { - type: Number, + durations: { + type: null, }, /** 过渡类名 */ name: { diff --git a/src/transition/type.ts b/src/transition/type.ts index fa3a21635..5b2931866 100644 --- a/src/transition/type.ts +++ b/src/transition/type.ts @@ -1,6 +1,7 @@ +/* eslint-disable */ + /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-08-03 16:17:22 * */ export interface TdTransitionProps { @@ -9,46 +10,38 @@ export interface TdTransitionProps { * @default false */ appear?: { - type: BooleanConstructor, - value?: boolean, - }; - /** - * 自定义容器类名 - * @default '' - */ - customClass?: { - type: StringConstructor, - value?: string, + type: BooleanConstructor; + value?: boolean; }; /** * 隐藏时是否销毁内容 * @default false */ - destoryOnClose?: { - type: BooleanConstructor, - value?: boolean, + destoryOnHide?: { + type: BooleanConstructor; + value?: boolean; }; /** * 指定过渡时间 */ - duration?: { - type: NumberConstructor, - value?: number, + durations?: { + type: null; + value?: number | number[]; }; /** * 过渡类名 - * @default 't-transition' + * @default t-transition */ name?: { - type: StringConstructor, - value?: string, + type: StringConstructor; + value?: string; }; /** * 是否显示 * @default false */ visible?: { - type: BooleanConstructor, - value?: boolean, + type: BooleanConstructor; + value?: boolean; }; -}; +} diff --git a/src/tree-select/README.en-US.md b/src/tree-select/README.en-US.md index c9d6982c1..209d797fc 100644 --- a/src/tree-select/README.en-US.md +++ b/src/tree-select/README.en-US.md @@ -1,12 +1,15 @@ :: BASE_DOC :: ## API + ### TreeSelect Props name | type | default | description | required -- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N height | String / Number | 336 | \- | N -keys | Object | - | Typescript：`KeysType` | N +keys | Object | - | alias filed name in data。Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N multiple | Boolean | false | \- | N options | Array | [] | Typescript：`Array` | N value | String / Number / Array | - | Typescript：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts) | N @@ -16,10 +19,10 @@ default-value | String / Number / Array | undefined | uncontrolled property。Ty name | params | description -- | -- | -- -change | `(value: TreeSelectValue, level: TreeLevel) ` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts)。
`type TreeLevel: 0 \| 1 \| 2`
- +change | `(value: TreeSelectValue, level: TreeLevel) ` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts)。
`type TreeLevel = 0 \| 1 \| 2`
### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -28,4 +31,4 @@ Name | Default Value | Description --td-tree-item-active-color | @brand-color | - --td-tree-item-font-size | 32rpx | - --td-tree-item-height | 112rpx | - ---td-tree-root-bg-color | @bg-color-secondarycontainer | - +--td-tree-root-bg-color | @bg-color-secondarycontainer | - \ No newline at end of file diff --git a/src/tree-select/README.md b/src/tree-select/README.md index 64ebca9f3..3564fbfc4 100644 --- a/src/tree-select/README.md +++ b/src/tree-select/README.md @@ -47,13 +47,16 @@ isComponent: true {{ normal }} ## API + ### TreeSelect Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N height | String / Number | 336 | 高度，默认单位为 px | N -keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType` | N -multiple | Boolean | false | 是否多选 | N +keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +multiple | Boolean | false | 是否允许多选 | N options | Array | [] | 选项。TS 类型：`Array` | N value | String / Number / Array | - | 选中值。TS 类型：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts) | N default-value | String / Number / Array | undefined | 选中值。非受控属性。TS 类型：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts) | N @@ -62,10 +65,10 @@ default-value | String / Number / Array | undefined | 选中值。非受控属 名称 | 参数 | 描述 -- | -- | -- -change | `(value: TreeSelectValue, level: TreeLevel) ` | 点击任何节点均会触发；level 代表当前点击的层级，0 代表最左侧，依次递进。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts)。
`type TreeLevel: 0 \| 1 \| 2`
+change | `(value: TreeSelectValue, level: TreeLevel) ` | 点击任何节点均会触发；level 代表当前点击的层级，0 代表最左侧，依次递进。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts)。
`type TreeLevel = 0 \| 1 \| 2`
+### CSS Variables -### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -74,4 +77,4 @@ change | `(value: TreeSelectValue, level: TreeLevel) ` | 点击任何节点均 --td-tree-item-active-color | @brand-color | - --td-tree-item-font-size | 32rpx | - --td-tree-item-height | 112rpx | - ---td-tree-root-bg-color | @bg-color-secondarycontainer | - +--td-tree-root-bg-color | @bg-color-secondarycontainer | - \ No newline at end of file diff --git a/src/tree-select/props.ts b/src/tree-select/props.ts index d40bdc4e0..c60489a19 100644 --- a/src/tree-select/props.ts +++ b/src/tree-select/props.ts @@ -15,7 +15,7 @@ const props: TdTreeSelectProps = { keys: { type: Object, }, - /** 是否多选 */ + /** 是否允许多选 */ multiple: { type: Boolean, value: false, diff --git a/src/tree-select/type.ts b/src/tree-select/type.ts index 02d77642c..10a272dc3 100644 --- a/src/tree-select/type.ts +++ b/src/tree-select/type.ts @@ -7,14 +7,6 @@ import { TreeOptionData, KeysType } from '../common/common'; export interface TdTreeSelectProps { - /** - * 自定义组件样式 - * @default '' - */ - style?: { - type: StringConstructor; - value?: string; - }; /** * 高度，默认单位为 px * @default 336 @@ -31,7 +23,7 @@ export interface TdTreeSelectProps; sourceType?: Array }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N -disabled | Boolean | false | \- | N -file-list-display | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N -files | Array | - | Typescript：`Array` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done'; thumb?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N -default-files | Array | undefined | uncontrolled property。Typescript：`Array` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done'; thumb?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N +disabled | Boolean | undefined | make upload to be disabled | N +draggable | Boolean / Object | - | Typescript：`boolean \| {vibrate?: boolean; collisionVibrate?: boolean}` | N +files | Array | - | Typescript：`Array` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N +default-files | Array | undefined | uncontrolled property。Typescript：`Array` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N grid-config | Object | - | Typescript：`{column?: number; width?: number; height?: number;}` | N gutter | Number | 16 | \- | N image-props | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N -max | Number | 0 | \- | N +max | Number | 0 | max count of files limit | N media-type | Array | ['image', 'video'] | Typescript：`Array` `type MediaType = 'image' \| 'video'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N request-method | Function | - | \- | N -size-limit | Number / Object | - | 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-miniprogram/tree/develop/src/upload/type.ts) | N -source | String | media | options：media/messageFile | N -draggable | Boolean / Object | - | Does it support drag and drop sorting. Whether it vibrates during long periods of time and whether it vibrates during collisions。。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N -transition | Object | `{ backTransition: true, duration: 300, timingFunction: 'ease' }` | Transition parameters when dragging and moving positions。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N +size-limit | 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-miniprogram/tree/develop/src/upload/type.ts) | N +source | String | media | options: media/messageFile | N +transition | Object | { backTransition: true, duration: 300, timingFunction: 'ease' } | Typescript：`Transition` `interface Transition { backTransition?: boolean, duration?: number, timingFunction?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N ### Upload Events name | params | description -- | -- | -- add | `(files: MediaContext)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]`

`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`

`interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }`
+click | `(file: VideoContext \| ImageContext)` | \- complete | \- | \- +drop | `(files: MediaContext) ` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]; interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }; interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number}`
fail | \- | \- remove | `(index: number; file: UploadFile)` | \- -select-change | `(currentSelectedFiles: MediaContext[])` | \- +select-change | `(files: MediaContext[]; currentSelectedFiles: MediaContext[])` | \- success | `(files: MediaContext)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]`

`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`

`interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }`
-click | `(file: VideoContext \| ImageContext)` | - -drop | `(files: MediaContext)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]`

`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`

`interface -ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }`
- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -49,4 +50,4 @@ Name | Default Value | Description --td-upload-add-icon-font-size | 56rpx | - --td-upload-disabled-mask | rgba(255, 255, 255, 0.55) | - --td-upload-radius | @radius-default | - ---td-upload-drag-z-index | 999 | - +--td-upload-drag-z-index | 999 | - \ No newline at end of file diff --git a/src/upload/README.md b/src/upload/README.md index 6588eff65..bcb4deb18 100644 --- a/src/upload/README.md +++ b/src/upload/README.md @@ -57,44 +57,45 @@ isComponent: true {{ messageFile }} ## API + ### Upload Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -add-content | String / Slot | - | 添加按钮内容 | N -allow-upload-duplicate-file | Boolean | false | 【开发中】是否允许重复上传相同文件名的文件 | N +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +add-content | String / Slot | - | 添加按钮内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N +allow-upload-duplicate-file | Boolean | false | `暂不支持`。是否允许重复上传相同文件名的文件 | N config | Object | - | 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html)。TS 类型：`UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array; sourceType?: Array }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N -disabled | Boolean | false | 是否禁用组件| N -file-list-display | Slot | - | 【开发中】用于完全自定义文件列表内容。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N -files | Array | - | 已上传文件列表。TS 类型：`Array` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done'; thumb?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N -default-files | Array | undefined | 已上传文件列表。非受控属性。TS 类型：`Array` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done'; thumb?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N +disabled | Boolean | undefined | 是否禁用组件 | N +draggable | Boolean / Object | - | 是否支持拖拽排序。长按时是否振动，碰撞时是否振动。示例一：`true`。示例二：`{ vibrate: true, collisionVibrate: true }`。TS 类型：`boolean \| {vibrate?: boolean; collisionVibrate?: boolean}` | N +files | Array | - | 已上传文件列表。TS 类型：`Array` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N +default-files | Array | undefined | 已上传文件列表。非受控属性。TS 类型：`Array` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N grid-config | Object | - | upload组件每行上传图片列数以及图片的宽度和高度。TS 类型：`{column?: number; width?: number; height?: number;}` | N gutter | Number | 16 | 预览窗格的 `gutter` 大小，单位 rpx | N image-props | Object | - | 透传 Image 组件全部属性。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制 | N media-type | Array | ['image', 'video'] | 支持上传的文件类型，图片或视频。TS 类型：`Array` `type MediaType = 'image' \| 'video'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N request-method | Function | - | 自定义上传方法 | N -size-limit | 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-miniprogram/tree/develop/src/upload/type.ts) | N +size-limit | 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-miniprogram/tree/develop/src/upload/type.ts) | N source | String | media | 来源。可选项：media/messageFile | N -draggable | Boolean / Object | - | 是否支持拖拽排序。长按时是否振动，碰撞时是否振动。示例一：`true`。示例二：`{ vibrate: true, collisionVibrate: true }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N -transition | Object | `{ backTransition: true, duration: 300, timingFunction: 'ease' }` | 拖拽位置移动时的过渡参数。TS 类型：`{ backTransition: boolean, duration: number, timingFunction: string }`，`duration`单位为ms。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N - +transition | Object | { backTransition: true, duration: 300, timingFunction: 'ease' } | 拖拽位置移动时的过渡参数,`duration`单位为ms。TS 类型：`Transition` `interface Transition { backTransition?: boolean, duration?: number, timingFunction?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N ### Upload Events 名称 | 参数 | 描述 -- | -- | -- add | `(files: MediaContext)` | 选择后触发，仅包含本次选择的照片；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]`

`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`

`interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }`
+click | `(file: VideoContext \| ImageContext)` | 点击已选文件时触发；常用于重新上传 complete | \- | 上传成功或失败后触发 +drop | `(files: MediaContext) ` | 拖拽结束后触发，包含所有上传的文件（拖拽后的文件顺序）；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size` 选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]; interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }; interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number}`
fail | \- | 上传失败后触发 remove | `(index: number; file: UploadFile)` | 移除文件时触发 select-change | `(files: MediaContext[]; currentSelectedFiles: MediaContext[])` | 选择文件或图片之后，上传之前，触发该事件。
`files` 表示之前已经上传完成的文件列表。
`currentSelectedFiles` 表示本次上传选中的文件列表 success | `(files: MediaContext)` | 上传成功后触发，包含所有上传的文件；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]`

`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`

`interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }`
-click | `(file: VideoContext \| ImageContext)` | 点击已选文件时触发；常用于重新上传 -drop | `(files: MediaContext)` | 拖拽结束后触发，包含所有上传的文件（拖拽后的文件顺序）；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]`

`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`

`interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }`
+### CSS Variables -### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -105,4 +106,4 @@ drop | `(files: MediaContext)` | 拖拽结束后触发，包含所有上传的 --td-upload-add-icon-font-size | 56rpx | - --td-upload-disabled-mask | rgba(255, 255, 255, 0.55) | - --td-upload-radius | @radius-default | - ---td-upload-drag-z-index | 999 | - +--td-upload-drag-z-index | 999 | - \ No newline at end of file diff --git a/src/upload/props.ts b/src/upload/props.ts index 82aeba03f..f75cf6c42 100644 --- a/src/upload/props.ts +++ b/src/upload/props.ts @@ -6,7 +6,7 @@ import { TdUploadProps } from './type'; const props: TdUploadProps = { - /** 添加按钮内容。值为空，使用默认图标渲染；值为 slot 则表示使用插槽渲染；其他值无效。 */ + /** 添加按钮内容 */ addContent: { type: String, }, @@ -21,8 +21,12 @@ const props: TdUploadProps = { }, /** 是否禁用组件 */ disabled: { - type: Boolean, - value: false, + type: null, + value: undefined, + }, + /** 是否支持拖拽排序。长按时是否振动，碰撞时是否振动。示例一：`true`。示例二：`{ vibrate: true, collisionVibrate: true }` */ + draggable: { + type: null, }, /** 已上传文件列表 */ files: { @@ -60,7 +64,7 @@ const props: TdUploadProps = { requestMethod: { type: null, }, - /** 图片文件大小限制，单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }` */ + /** 图片文件大小限制，默认单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }` */ sizeLimit: { type: null, }, @@ -69,11 +73,7 @@ const props: TdUploadProps = { type: String, value: 'media', }, - /** 是否支持拖拽排序 */ - draggable: { - type: null, - }, - /** 是否使用动画过渡 */ + /** 拖拽位置移动时的过渡参数,`duration`单位为ms */ transition: { type: Object, value: { backTransition: true, duration: 300, timingFunction: 'ease' }, diff --git a/src/upload/type.ts b/src/upload/type.ts index f9f25cf64..c0812d37e 100644 --- a/src/upload/type.ts +++ b/src/upload/type.ts @@ -8,7 +8,7 @@ import { ImageProps } from '../image/index'; export interface TdUploadProps { /** - * 添加按钮内容。值为空，使用默认图标渲染；值为 slot 则表示使用插槽渲染；其他值无效。 + * 添加按钮内容 */ addContent?: { type: StringConstructor; @@ -31,19 +31,17 @@ export interface TdUploadProps { }; /** * 是否禁用组件 - * @default false */ disabled?: { type: BooleanConstructor; value?: boolean; }; /** - * 自定义组件样式 - * @default '' + * 是否支持拖拽排序。长按时是否振动，碰撞时是否振动。示例一：`true`。示例二：`{ vibrate: true, collisionVibrate: true }` */ - style?: { - type: StringConstructor; - value?: string; + draggable?: { + type: null; + value?: boolean | { vibrate?: boolean; collisionVibrate?: boolean }; }; /** * 已上传文件列表 @@ -101,11 +99,11 @@ export interface TdUploadProps { * 自定义上传方法 */ requestMethod?: { - type: null; + type: undefined; value?: null; }; /** - * 图片文件大小限制，单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }` + * 图片文件大小限制，默认单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }` */ sizeLimit?: { type: null; @@ -120,19 +118,12 @@ export interface TdUploadProps { value?: 'media' | 'messageFile'; }; /** - * 是否支持拖拽排序 - */ - draggable?: { - type: null; - value?: boolean | Draggable; - }; - - /** - * 过渡参数 + * 拖拽位置移动时的过渡参数,`duration`单位为ms + * @default { backTransition: true, duration: 300, timingFunction: 'ease' } */ transition?: { type: ObjectConstructor; - value: Transition; + value?: Transition; }; } @@ -155,13 +146,6 @@ export interface VideoConfig { camera?: 'back' | 'front'; } -export interface UploadDisplayDragEvents { - onDrop?: (event: DragEvent) => void; - onDragenter?: (event: DragEvent) => void; - onDragover?: (event: DragEvent) => void; - onDragleave?: (event: DragEvent) => void; -} - export interface UploadFile { url: string; name?: string; @@ -169,7 +153,6 @@ export interface UploadFile { type?: 'image' | 'video'; percent?: number; status: 'loading' | 'reload' | 'failed' | 'done'; - thumb?: string; } export type MediaType = 'image' | 'video'; @@ -184,11 +167,6 @@ export type SizeUnitArray = ['B', 'KB', 'MB', 'GB']; export type SizeUnit = SizeUnitArray[number]; -export interface Draggable { - vibrate?: boolean; - collisionVibrate?: boolean; -} - export interface Transition { backTransition?: boolean; duration?: number;