Skip to content

Commit fbb3d12

Browse files
anlyyaoanlyyao
authored
feat(TabPanel): support icon prop (#885)
* feat(TabPanel): support icon prop * feat(Tabs): update demo * chore: update _common * docs: update css vars
1 parent 3f1c896 commit fbb3d12

File tree

8 files changed

+525
-416
lines changed

8 files changed

+525
-416
lines changed

‎src/_common‎

‎src/tabs/Tabs.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect, useMemo, useRef, useState } from 'react';
22
import classnames from 'classnames';
3-
import type { FC, HTMLAttributes } from 'react';
3+
import type { FC } from 'react';
44
import Sticky from '../sticky';
55
import Badge from '../badge';
66
import { TdTabPanelProps, TdTabsProps, TabValue } from './type';
@@ -13,10 +13,11 @@ import { tabsDefaultProps } from './defaultProps';
1313
import parseTNode from '../_util/parseTNode';
1414
import useDefault from '../_util/useDefault';
1515
import TabContext from './context';
16-
import { Styles } from '../common';
16+
import { Styles, StyledProps } from '../common';
1717

18-
type TabsHTMLAttrs = Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
19-
export interface TabsProps extends TdTabsProps, TabsHTMLAttrs {}
18+
export interface TabsProps extends TdTabsProps, StyledProps {
19+
children?: React.ReactNode;
20+
}
2021

2122
const Tabs: FC<TabsProps> = (props) => {
2223
const {
@@ -224,7 +225,7 @@ const Tabs: FC<TabsProps> = (props) => {
224225

225226
const renderNav = () =>
226227
itemProps.map((item, index) => {
227-
const { badgeProps } = item;
228+
const { badgeProps, icon } = item;
228229
return (
229230
<div
230231
key={item.value}
@@ -244,7 +245,8 @@ const Tabs: FC<TabsProps> = (props) => {
244245
[`${tabsClass}__item-inner--active`]: theme === 'tag' && item.value === currentValue,
245246
})}
246247
>
247-
<div>{parseTNode(item.label)}</div>
248+
{icon && <div className={`${tabsClass}__icon`}>{parseTNode(icon)}</div>}
249+
{parseTNode(item.label)}
248250
</div>
249251
</Badge>
250252
{theme === 'card' && index === currentIndex - 1 && <div className={`${tabsClass}__item-prefix`}></div>}

‎src/tabs/_example/icon.tsx‎

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,17 @@
11
import React from 'react';
22
import { Tabs, TabPanel } from 'tdesign-mobile-react';
3-
import { IconFont } from 'tdesign-icons-react';
3+
import { AppIcon } from 'tdesign-icons-react';
44

55
export default () => (
66
<div>
77
<Tabs defaultValue={'first'}>
8-
<TabPanel
9-
value={'first'}
10-
label={
11-
<div className="label-content">
12-
<IconFont name="app" size="large"></IconFont>
13-
<span>选项</span>
14-
</div>
15-
}
16-
></TabPanel>
17-
<TabPanel
18-
value={'second'}
19-
label={
20-
<div className="label-content">
21-
<IconFont name="app" size="large"></IconFont>
22-
<span>选项</span>
23-
</div>
24-
}
25-
></TabPanel>
8+
<TabPanel value={'first'} label={'选项'} icon={<AppIcon />}></TabPanel>
9+
<TabPanel value={'second'} label={'选项'} icon={<AppIcon />}></TabPanel>
2610
<TabPanel
2711
value={'third'}
2812
label={
2913
<div className="label-content">
30-
<IconFont name="app" size="large"></IconFont>
14+
<AppIcon size="large" />
3115
<span>选项</span>
3216
</div>
3317
}

‎src/tabs/tabs.en-US.md‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,38 +7,38 @@
77
name | type | default | description | required
88
-- | -- | -- | -- | --
99
className | String | - | className of component | N
10-
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
11-
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
10+
style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
11+
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
1212
bottomLineMode | String | fixed | options: fixed/auto/full | N
13-
children | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
14-
list | Array | - | Typescript：`Array<TdTabPanelProps>` | N
13+
list | Array | - | Typescript: `Array<TdTabPanelProps>` | N
1514
showBottomLine | Boolean | true | \- | N
1615
size | String | medium | options: medium/large | N
1716
spaceEvenly | Boolean | true | \- | N
1817
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
18+
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
2019
swipeable | Boolean | true | \- | N
2120
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
21+
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
22+
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
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
2726

2827

2928
### TabPanel Props
3029

3130
name | type | default | description | required
3231
-- | -- | -- | -- | --
3332
className | String | - | className of component | N
34-
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
33+
style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
3534
badgeProps | Object | - | \- | N
3635
destroyOnHide | Boolean | true | \- | N
3736
disabled | Boolean | false | \- | N
38-
label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
37+
icon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
38+
label | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
3939
lazy | Boolean | false | Enable tab lazy loading | N
40-
panel | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
41-
value | String / Number | - | Typescript：`TabValue` | N
40+
panel | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
41+
value | String / Number | - | Typescript: `TabValue` | N
4242

4343
### CSS Variables
4444

@@ -47,7 +47,7 @@ Name | Default Value | Description
4747
-- | -- | --
4848
--td-tab-border-color | @component-stroke | -
4949
--td-tab-font | @font-body-medium | -
50-
--td-tab-icon-size | 16px | -
50+
--td-tab-icon-size | 18px | -
5151
--td-tab-item-active-color | @brand-color | -
5252
--td-tab-item-color | @text-color-primary | -
5353
--td-tab-item-disabled-color | @text-color-disabled | -

‎src/tabs/tabs.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ className | String | - | 类名 | N
1010
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
1111
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
1212
bottomLineMode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full | N
13-
children | TElement | - | 组件子元素。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
1413
list | Array | - | 选项卡列表。TS 类型：`Array<TdTabPanelProps>` | N
1514
showBottomLine | Boolean | true | 是否展示底部激活线条 | N
1615
size | String | medium | 组件尺寸。可选项：medium/large | N
@@ -35,6 +34,7 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
3534
badgeProps | Object | - | 透传至 Badge 组件 | N
3635
destroyOnHide | Boolean | true | 选项卡内容隐藏时是否销毁 | N
3736
disabled | Boolean | false | 是否禁用当前选项卡 | N
37+
icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
3838
label | TNode | - | 选项卡名称，可自定义选项卡导航内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
3939
lazy | Boolean | false | 是否启用选项卡懒加载 | N
4040
panel | TNode | - | 用于自定义选项卡面板内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
@@ -47,7 +47,7 @@ value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabV
4747
-- | -- | --
4848
--td-tab-border-color | @component-stroke | -
4949
--td-tab-font | @font-body-medium | -
50-
--td-tab-icon-size | 16px | -
50+
--td-tab-icon-size | 18px | -
5151
--td-tab-item-active-color | @brand-color | -
5252
--td-tab-item-color | @text-color-primary | -
5353
--td-tab-item-disabled-color | @text-color-disabled | -

‎src/tabs/type.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
* */
66

77
import { StickyProps } from '../sticky';
8-
import { TNode } from '../common';
9-
import { ReactNode } from 'react';
8+
import { TNode, TElement } from '../common';
109

1110
export interface TdTabsProps {
1211
/**
@@ -18,10 +17,6 @@ export interface TdTabsProps {
1817
* @default fixed
1918
*/
2019
bottomLineMode?: 'fixed' | 'auto' | 'full';
21-
/**
22-
* 组件子元素
23-
*/
24-
children?: ReactNode;
2520
/**
2621
* 选项卡列表
2722
*/
@@ -97,6 +92,10 @@ export interface TdTabPanelProps {
9792
* @default false
9893
*/
9994
disabled?: boolean;
95+
/**
96+
* 图标
97+
*/
98+
icon?: TElement;
10099
/**
101100
* 选项卡名称，可自定义选项卡导航内容
102101
*/

0 commit comments

Comments
 (0)