Skip to content

Commit 0c0a76f

Browse files
anlyyaoanlyyao
authored
docs(TabPanel): add icon prop for mobile-react (#816)
1 parent 5b6ec2d commit 0c0a76f

File tree

9 files changed

+245
-59
lines changed

9 files changed

+245
-59
lines changed

‎db/TDesign.db‎

0 Bytes
Binary file not shown.

‎packages/products/tdesign-miniprogram/packages/components/tabs/README.en-US.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@ name | type | default | description | required
88
-- | -- | -- | -- | --
99
style | Object | - | CSS(Cascading Style Sheets) | N
1010
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
11-
animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/tabs/type.ts) | N
11+
animation | Object | - | Typescript: `TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/tabs/type.ts) | N
1212
bottom-line-mode | String | fixed | options: fixed/auto/full | N
1313
show-bottom-line | Boolean | true | \- | N
1414
space-evenly | Boolean | true | \- | N
1515
split | Boolean | true | \- | N
1616
sticky | Boolean | false | \- | N
17-
sticky-props | Object | - | Typescript：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/tabs/type.ts) | N
17+
sticky-props | Object | - | Typescript: `StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/tabs/type.ts) | N
1818
swipeable | Boolean | true | \- | N
1919
theme | String | line | options: line/tag/card | N
20-
value | String / Number | - | Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/tabs/type.ts) | N
21-
default-value | String / Number | undefined | uncontrolled property。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/tabs/type.ts) | N
20+
value | String / Number | - | Typescript: `TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/tabs/type.ts) | N
21+
default-value | String / Number | undefined | uncontrolled property。Typescript: `TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/tabs/type.ts) | N
2222

2323
### Tabs Events
2424

@@ -58,7 +58,7 @@ icon | String / Object | - | \- | N
5858
label | String | - | \- | N
5959
lazy | Boolean | false | Enable tab lazy loading | N
6060
panel | String | - | \- | N
61-
value | String / Number | - | Typescript：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/tab-panel/type.ts) | N
61+
value | String / Number | - | Typescript: `TabValue`，[Tabs API Documents](./tabs?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/tab-panel/type.ts) | N
6262

6363
### TabPanel Slots
6464

‎packages/products/tdesign-mobile-react/src/tabs/defaultProps.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3+
* */
4+
5+
import { TdTabsProps, TdTabPanelProps } from './type';
6+
7+
export const tabsDefaultProps: TdTabsProps = {
8+
bottomLineMode: 'fixed',
9+
showBottomLine: true,
10+
size: 'medium',
11+
spaceEvenly: true,
12+
sticky: false,
13+
swipeable: true,
14+
theme: 'line',
15+
};
16+
17+
export const tabPanelDefaultProps: TdTabPanelProps = { destroyOnHide: true, disabled: false, lazy: false };

‎packages/products/tdesign-mobile-react/src/tabs/tabs.en-US.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
:: BASE_DOC ::
2+
3+
## API
4+
5+
6+
### Tabs Props
7+
8+
name | type | default | description | required
9+
-- | -- | -- | -- | --
10+
className | String | - | className of component | N
11+
style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
12+
animation | Object | - | Typescript: `TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N
13+
bottomLineMode | String | fixed | options: fixed/auto/full | N
14+
list | Array | - | Typescript: `Array<TdTabPanelProps>` | N
15+
showBottomLine | Boolean | true | \- | N
16+
size | String | medium | options: medium/large | N
17+
spaceEvenly | Boolean | true | \- | N
18+
sticky | Boolean | false | \- | N
19+
stickyProps | Object | - | Typescript: `StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N
20+
swipeable | Boolean | true | \- | N
21+
theme | String | line | options: line/tag/card | N
22+
value | String / Number | - | Typescript: `TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N
23+
defaultValue | String / Number | - | uncontrolled property。Typescript: `TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N
24+
onChange | Function | | Typescript: `(value: TabValue, label: string) => void`<br/> | N
25+
onClick | Function | | Typescript: `(value: TabValue, label: string) => void`<br/> | N
26+
onScroll | Function | | Typescript: `(scrollTop: number, isFixed: boolean) => void`<br/> | N
27+
28+
29+
### TabPanel Props
30+
31+
name | type | default | description | required
32+
-- | -- | -- | -- | --
33+
className | String | - | className of component | N
34+
style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
35+
badgeProps | Object | - | \- | N
36+
destroyOnHide | Boolean | true | \- | N
37+
disabled | Boolean | false | \- | N
38+
icon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
39+
label | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
40+
lazy | Boolean | false | Enable tab lazy loading | N
41+
panel | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
42+
value | String / Number | - | Typescript: `TabValue` | N

‎packages/products/tdesign-mobile-react/src/tabs/tabs.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
:: BASE_DOC ::
2+
3+
## API
4+
5+
6+
### Tabs Props
7+
8+
名称 | 类型 | 默认值 | 描述 | 必传
9+
-- | -- | -- | -- | --
10+
className | String | - | 类名 | N
11+
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
12+
animation | Object | - | 动画效果设置。其中 duration 表示动画时长。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N
13+
bottomLineMode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full | N
14+
list | Array | - | 选项卡列表。TS 类型：`Array<TdTabPanelProps>` | N
15+
showBottomLine | Boolean | true | 是否展示底部激活线条 | N
16+
size | String | medium | 组件尺寸。可选项：medium/large | N
17+
spaceEvenly | Boolean | true | 选项卡头部空间是否均分 | N
18+
sticky | Boolean | false | 是否开启粘性布局 | N
19+
stickyProps | Object | - | 透传至 Sticky 组件。TS 类型：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N
20+
swipeable | Boolean | true | 是否可以滑动切换 | N
21+
theme | String | line | 标签的样式。可选项：line/tag/card | N
22+
value | String / Number | - | 激活的选项卡值。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N
23+
defaultValue | String / Number | - | 激活的选项卡值。非受控属性。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N
24+
onChange | Function | | TS 类型：`(value: TabValue, label: string) => void`<br/>激活的选项卡发生变化时触发 | N
25+
onClick | Function | | TS 类型：`(value: TabValue, label: string) => void`<br/>点击选项卡时触发 | N
26+
onScroll | Function | | TS 类型：`(scrollTop: number, isFixed: boolean) => void`<br/>页面滚动时触发 | N
27+
28+
29+
### TabPanel Props
30+
31+
名称 | 类型 | 默认值 | 描述 | 必传
32+
-- | -- | -- | -- | --
33+
className | String | - | 类名 | N
34+
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
35+
badgeProps | Object | - | 透传至 Badge 组件 | N
36+
destroyOnHide | Boolean | true | 选项卡内容隐藏时是否销毁 | N
37+
disabled | Boolean | false | 是否禁用当前选项卡 | N
38+
icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
39+
label | TNode | - | 选项卡名称，可自定义选项卡导航内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
40+
lazy | Boolean | false | 是否启用选项卡懒加载 | N
41+
panel | TNode | - | 用于自定义选项卡面板内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
42+
value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue` | N

‎packages/products/tdesign-mobile-react/src/tabs/type.ts‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
/* eslint-disable */
2+
3+
/**
4+
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
5+
* */
6+
7+
import { StickyProps } from '../sticky';
8+
import { TNode, TElement } from '../common';
9+
10+
export interface TdTabsProps {
11+
/**
12+
* 动画效果设置。其中 duration 表示动画时长
13+
*/
14+
animation?: TabAnimation;
15+
/**
16+
* 激活下划线的模式
17+
* @default fixed
18+
*/
19+
bottomLineMode?: 'fixed' | 'auto' | 'full';
20+
/**
21+
* 选项卡列表
22+
*/
23+
list?: Array<TdTabPanelProps>;
24+
/**
25+
* 是否展示底部激活线条
26+
* @default true
27+
*/
28+
showBottomLine?: boolean;
29+
/**
30+
* 组件尺寸
31+
* @default medium
32+
*/
33+
size?: 'medium' | 'large';
34+
/**
35+
* 选项卡头部空间是否均分
36+
* @default true
37+
*/
38+
spaceEvenly?: boolean;
39+
/**
40+
* 是否开启粘性布局
41+
* @default false
42+
*/
43+
sticky?: boolean;
44+
/**
45+
* 透传至 Sticky 组件
46+
*/
47+
stickyProps?: StickyProps;
48+
/**
49+
* 是否可以滑动切换
50+
* @default true
51+
*/
52+
swipeable?: boolean;
53+
/**
54+
* 标签的样式
55+
* @default line
56+
*/
57+
theme?: 'line' | 'tag' | 'card';
58+
/**
59+
* 激活的选项卡值
60+
*/
61+
value?: TabValue;
62+
/**
63+
* 激活的选项卡值，非受控属性
64+
*/
65+
defaultValue?: TabValue;
66+
/**
67+
* 激活的选项卡发生变化时触发
68+
*/
69+
onChange?: (value: TabValue, label: string) => void;
70+
/**
71+
* 点击选项卡时触发
72+
*/
73+
onClick?: (value: TabValue, label: string) => void;
74+
/**
75+
* 页面滚动时触发
76+
*/
77+
onScroll?: (scrollTop: number, isFixed: boolean) => void;
78+
}
79+
80+
export interface TdTabPanelProps {
81+
/**
82+
* 透传至 Badge 组件
83+
*/
84+
badgeProps?: object;
85+
/**
86+
* 选项卡内容隐藏时是否销毁
87+
* @default true
88+
*/
89+
destroyOnHide?: boolean;
90+
/**
91+
* 是否禁用当前选项卡
92+
* @default false
93+
*/
94+
disabled?: boolean;
95+
/**
96+
* 图标
97+
*/
98+
icon?: TElement;
99+
/**
100+
* 选项卡名称，可自定义选项卡导航内容
101+
*/
102+
label?: TNode;
103+
/**
104+
* 是否启用选项卡懒加载
105+
* @default false
106+
*/
107+
lazy?: boolean;
108+
/**
109+
* 用于自定义选项卡面板内容
110+
*/
111+
panel?: TNode;
112+
/**
113+
* 选项卡的值，唯一标识
114+
*/
115+
value?: TabValue;
116+
}
117+
118+
export type TabAnimation = { duration: number } & Record<string, any>;
119+
120+
export type TabValue = string | number;

‎packages/products/tdesign-mobile-vue/src/tabs/props.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,11 +76,11 @@ export default {
7676
/** 激活的选项卡值 */
7777
value: {
7878
type: [String, Number] as PropType<TdTabsProps['value']>,
79-
default: undefined,
79+
default: undefined as TdTabsProps['value'],
8080
},
8181
modelValue: {
8282
type: [String, Number] as PropType<TdTabsProps['value']>,
83-
default: undefined,
83+
default: undefined as TdTabsProps['value'],
8484
},
8585
/** 激活的选项卡值，非受控属性 */
8686
defaultValue: {

‎packages/products/tdesign-mobile-vue/src/tabs/tabs.en-US.md‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,23 @@
66

77
name | type | default | description | required
88
-- | -- | -- | -- | --
9-
animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
9+
animation | Object | - | Typescript: `TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
1010
bottomLineMode | String | fixed | options: fixed/auto/full | N
11-
list | Array | - | Typescript：`Array<TdTabPanelProps>` | N
12-
middle | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
11+
list | Array | - | Typescript: `Array<TdTabPanelProps>` | N
12+
middle | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
1313
showBottomLine | Boolean | true | \- | N
1414
size | String | medium | options: medium/large | N
1515
spaceEvenly | Boolean | true | \- | N
1616
split | Boolean | true | \- | N
1717
sticky | Boolean | false | \- | N
18-
stickyProps | Object | - | Typescript：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
18+
stickyProps | Object | - | Typescript: `StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
1919
swipeable | Boolean | true | \- | N
2020
theme | String | line | options: line/tag/card | N
21-
value | String / Number | - | `v-model` and `v-model:value` is supported。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
22-
defaultValue | String / Number | - | uncontrolled property。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
23-
onChange | Function | | Typescript：`(value: TabValue, label: string) => void`<br/> | N
24-
onClick | Function | | Typescript：`(value: TabValue, label: string) => void`<br/> | N
25-
onScroll | Function | | Typescript：`(scrollTop: number, isFixed: boolean) => void`<br/> | N
21+
value | String / Number | - | `v-model` and `v-model:value` is supported。Typescript: `TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
22+
defaultValue | String / Number | - | uncontrolled property。Typescript: `TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
23+
onChange | Function | | Typescript: `(value: TabValue, label: string) => void`<br/> | N
24+
onClick | Function | | Typescript: `(value: TabValue, label: string) => void`<br/> | N
25+
onScroll | Function | | Typescript: `(scrollTop: number, isFixed: boolean) => void`<br/> | N
2626

2727
### Tabs Events
2828

@@ -40,8 +40,8 @@ name | type | default | description | required
4040
badgeProps | Object | - | \- | N
4141
destroyOnHide | Boolean | true | \- | N
4242
disabled | Boolean | false | \- | N
43-
icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
44-
label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
43+
icon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
44+
label | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
4545
lazy | Boolean | false | Enable tab lazy loading | N
46-
panel | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
47-
value | String / Number | - | Typescript：`TabValue` | N
46+
panel | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
47+
value | String / Number | - | Typescript: `TabValue` | N

‎packages/scripts/api.json‎

Lines changed: 4 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -122101,7 +122101,8 @@
122101122101
{
122102122102
"id": 1736961692,
122103122103
"platform_framework": [
122104-
"8"
122104+
"8",
122105+
"16"
122105122106
],
122106122107
"component": "TabPanel",
122107122108
"field_category": 1,
@@ -122129,7 +122130,8 @@
122129122130
"support_default_value": 0,
122130122131
"field_category_text": "Props",
122131122132
"platform_framework_text": [
122132-
"Vue(Mobile)"
122133+
"Vue(Mobile)",
122134+
"React(Mobile)"
122133122135
],
122134122136
"field_type_text": [
122135122137
"TNode"
@@ -125454,43 +125456,6 @@
125454125456
"String"
125455125457
]
125456125458
},
125457-
{
125458-
"id": 1726036563,
125459-
"platform_framework": [
125460-
"16"
125461-
],
125462-
"component": "Tabs",
125463-
"field_category": 1,
125464-
"field_name": "children",
125465-
"field_type": [
125466-
"64"
125467-
],
125468-
"field_default_value": "",
125469-
"field_enum": "",
125470-
"field_desc_zh": "组件子元素",
125471-
"field_desc_en": null,
125472-
"field_required": 0,
125473-
"event_input": "",
125474-
"create_time": "2024-09-11 06:36:03",
125475-
"update_time": "2024-09-11 06:36:03",
125476-
"event_output": null,
125477-
"custom_field_type": null,
125478-
"syntactic_sugar": null,
125479-
"readonly": 1,
125480-
"html_attribute": 0,
125481-
"trigger_elements": "",
125482-
"deprecated": 0,
125483-
"version": "",
125484-
"test_description": null,
125485-
"support_default_value": 0,
125486-
"field_category_text": "Props",
125487-
"platform_framework_text": [
125488-
"React(Mobile)"
125489-
],
125490-
"field_type_text": [
125491-
"TNode"
125492-
]
125493-
},
125494125459
{
125495125460
"id": 156,
125496125461
"platform_framework": [

0 commit comments

Comments
 (0)