代码演示

如何引入

import { Tabs, TabPane } from '@kousum/semi-ui-vue';

基本用法

标签栏支持三种样式的显示：线条式，按钮式，卡片式。默认选中第一项。
标签页支持两种传入方式，两者渲染流程上有所区别：

• 通过 tabList 传入标签页对象的数组，当使用 tabList 时每次只渲染当前传入的节点
• 或使用 <TabPane> 逐项显式传入，使用 <TabPane> 时默认会渲染所有面板，可以通过设置 keepDOM={false} 只渲染当前面板，此时不会有动画效果。

注意事项

1. tabList 与 TabPane Children 同时使用时，会优先渲染通过 tabList 传入的数据。不建议同时配置
2. 使用 TabPane Children 时， TabPane 必须为 Tabs 的直接子元素，否则 Tabs 将无法正确收集子组件如 itemKey 等相关属性

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

64

 

1

import { Tabs, TabPane } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <div>

5

        <Tabs type="line">

6

            <TabPane tab="文档" itemKey="1">

7

                <h3>文档</h3>

8

                <p style={{ lineHeight: 1.8 }}>

9

                    Semi Design 是由抖音前端团队与 UED

10

                    团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的

11

                    Web 应用。

12

                </p>

13

                <p style={{ lineHeight: 1.8 }}>

14

                    区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有以下优势：

15

                </p>

16

                <ul>

17

                    <li>

18

                        <p>Semi Design 以内容优先进行设计。</p>

19

                    </li>

20

                    <li>

21

                        <p>更容易地自定义主题。</p>

22

                    </li>

23

                    <li>

24

                        <p>适用国际化场景。</p>

25

                    </li>

26

                    <li>

27

                        <p>效率场景加入人性化关怀。</p>

28

                    </li>

29

                </ul>

30

            </TabPane>

31

            <TabPane tab="快速起步" itemKey="2">

32

                <h3>快速起步</h3>

33

                <pre

34

                    style={{

35

                        margin: '24px 0',

36

                        padding: '20px',

37

                        border: 'none',

Show Error

Auto Save

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

15

 

1

import { Tabs, TabPane } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <Tabs type="button">

5

        <TabPane tab="文档" itemKey="1">

6

            文档

7

        </TabPane>

8

        <TabPane tab="快速起步" itemKey="2">

9

            快速起步

10

        </TabPane>

11

        <TabPane tab="帮助" itemKey="3">

12

            帮助

13

        </TabPane>

14

    </Tabs>

15

);

Show Error

Auto Save

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

35

 

1

import { Tabs } from '@kousum/semi-ui-vue';

2

import { defineComponent, reactive } from 'vue';

3

​

4

​

5

const Demo = defineComponent(() => {

6

  const state = reactive({ key: '1' });

7

​

8

  function onTabClick(key, type) {

9

    state.key = key

10

    // this.setState({ [type]: key });

11

  }

12

​

13

  return () => {

14

​

15

    // eslint-disable-next-line react/jsx-key

16

    const contentList = [<div>文档</div>, <div>快速起步</div>, <div>帮助</div>];

17

    const tabList = [

18

      { tab: '文档', itemKey: '1' },

19

      { tab: '快速起步', itemKey: '2' },

20

      { tab: '帮助', itemKey: '3' },

21

    ];

22

    return (

23

      <Tabs

24

        type="card"

25

        tabList={tabList}

26

        onChange={key => {

27

          onTabClick(key, 'key');

28

        }}

29

      >

30

        {contentList[state.key - 1]}

31

      </Tabs>

32

    );

33

  }

34

})

35

export default Demo

Show Error

Auto Save

带图标的

有图标的标签栏。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

40

 

1

import { Tabs, TabPane } from '@kousum/semi-ui-vue';

2

import { IconFile, IconGlobe, IconHelpCircle } from '@kousum/semi-icons-vue';

3

​

4

export default () => (

5

    <Tabs>

6

        <TabPane

7

            tab={

8

                <span>

9

                    <IconFile />

10

                    文档

11

                </span>

12

            }

13

            itemKey="1"

14

        >

15

            文档

16

        </TabPane>

17

        <TabPane

18

            tab={

19

                <span>

20

                    <IconGlobe />

21

                    快速起步

22

                </span>

23

            }

24

            itemKey="2"

25

        >

26

            快速起步

27

        </TabPane>

28

        <TabPane

29

            tab={

30

                <span>

31

                    <IconHelpCircle />

32

                    帮助

33

                </span>

34

            }

35

            itemKey="3"

36

        >

37

            帮助

38

        </TabPane>

39

    </Tabs>

40

);

Show Error

Auto Save

更多选项收入 More 展示

支持将多余 Tab 合并为 ”更多“ 下拉菜单，more 传入数字即可，数字表示收入下拉菜单的 Tab 数量。（>=v2.59.0）

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

14

 

1

import { Tabs, TabPane } from '@kousum/semi-ui-vue';

2

​

3

function Demo() {

4

    return (

5

        <Tabs more={4} style={{ width: '60%', margin: '20px' }} type="card">

6

            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (

7

                <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>

8

                    Content of card tab {i}

9

                </TabPane>

10

            ))}

11

        </Tabs>

12

    );

13

}

14

export default Demo

Show Error

Auto Save

也支持高级配置，向 more 传入对象，内可传入

• count: 表示收入下拉菜单的 Tab 数量
• render: 自定义 Trigger 的渲染函数，返回的 ReactNode 会被渲染为下拉菜单的 Trigger
• dropdownProps: 传入 DropDown Props，会被透传到下拉菜单，如果需要自定义下拉菜单，使用 dropdownProps 中的 render 方法

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

24

 

1

import { Tabs, TabPane, Button } from '@kousum/semi-ui-vue';

2

​

3

function Demo() {

4

    return (

5

        <Tabs

6

            more={{

7

                count: 4,

8

                render: () => {

9

                    return <Button type='tertiary'>Click to show More</Button>;

10

                },

11

                dropdownProps: { trigger: 'click', position: 'bottomRight' },

12

            }}

13

            style={{ width: '60%', margin: '20px' }}

14

            type="card"

15

        >

16

            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (

17

                <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>

18

                    Content of card tab {i}

19

                </TabPane>

20

            ))}

21

        </Tabs>

22

    );

23

}

24

export default Demo

Show Error

Auto Save

垂直的标签栏

支持水平和垂直两种模式， tabPosition='left|top'

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

112

 

1

import { Tabs, TabPane, RadioGroup, Radio } from '@kousum/semi-ui-vue';

2

import { IconFile, IconGlobe, IconHelpCircle } from '@kousum/semi-icons-vue';

3

import { defineComponent, reactive } from 'vue';

4

​

5

​

6

const Demo = defineComponent(() => {

7

​

8

  const state = reactive({

9

    type: 'line',

10

  });

11

  function onSelect(e){

12

    state.type = e.target.value

13

  }

14

  return () => {

15

​

16

    return (

17

      <>

18

        <RadioGroup

19

          onChange={e => onSelect(e)}

20

          value={state.type}

21

          type="button"

22

          style={{

23

            display: 'flex',

24

            width: 200,

25

            justifyContent: 'center',

26

          }}

27

        >

28

          <Radio value={'line'}>Line</Radio>

29

          <Radio value={'card'}>Card</Radio>

30

          <Radio value={'button'}>Button</Radio>

31

        </RadioGroup>

32

        <br />

33

        <br />

34

        <Tabs tabPosition="left" type={state.type}>

35

          <TabPane

36

            tab={

37

              <span>

38

                <IconFile />文档</span>

39

            }

40

            itemKey="1"

41

          >

Show Error

Auto Save

滚动折叠

通过设置 collapsible 可以支持滚动折叠，目前只支持 horizontal 模式。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

12

 

1

import { Tabs, TabPane } from '@kousum/semi-ui-vue';

2

​

3

const Demo = ()=>(

4

  <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible>

5

    {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (

6

      <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>

7

        Content of card tab {i}

8

      </TabPane>

9

    ))}

10

  </Tabs>

11

)

12

export default Demo

Show Error

Auto Save

自定义滚动箭头渲染

通过 renderArrow 修改滚动折叠模式下，左右切换箭头的渲染，入参为溢出的 items 和 位置

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

63

 

1

import { Tabs, TabPane, Dropdown } from '@kousum/semi-ui-vue';

2

import { defineComponent, ref } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

​

6

  const activeKey = ref('Tab-0');

7

  const renderArrow = (items, pos, handleArrowClick) => {

8

    const style = {

9

      width: '32px',

10

      height: '32px',

11

      margin: '0 12px',

12

      display: 'flex',

13

      justifyContent: 'center',

14

      alignItems: 'center',

15

      borderRadius: '100%',

16

      background: 'rgba(var(--semi-grey-1), 1)',

17

      color: 'var(--semi-color-text)',

18

      cursor: 'pointer',

19

    };

20

    console.log(items)

21

    return (

22

      <Dropdown

23

        render={

24

          <Dropdown.Menu>

25

            {items.map(item => {

26

              return (

27

                <Dropdown.Item onClick={() => activeKey.value = item.itemKey}>{item.itemKey}</Dropdown.Item>

28

              );

Show Error

Auto Save

修改切换箭头的渲染位置

通过 arrowPosition 来修改溢出指示器的位置，可选 start both end

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

31

 

1

import { Tabs, TabPane } from '@kousum/semi-ui-vue';

2

​

3

​

4

​

5

export default ()=>{

6

  return (

7

    <>

8

      <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowPosition={'start'}>

9

        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (

10

          <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>

11

            Content of card tab {i}

12

          </TabPane>

13

        ))}

14

      </Tabs>

15

      <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowPosition={'both'}>

16

        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (

17

          <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>

18

            Content of card tab {i}

19

          </TabPane>

20

        ))}

21

      </Tabs>

22

      <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowPosition={'end'}>

23

        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (

24

          <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>

25

            Content of card tab {i}

26

          </TabPane>

Show Error

Auto Save

禁用

禁用标签栏中的某一个标签页。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

18

 

1

import { Tabs, TabPane } from '@kousum/semi-ui-vue';

2

​

3

export default ()=>{

4

​

5

  return (

6

    <Tabs defaultActiveKey="1">

7

      <TabPane tab="文档" itemKey="1">

8

        文档

9

      </TabPane>

10

      <TabPane tab="快速起步" itemKey="2" disabled>

11

        快速起步

12

      </TabPane>

13

      <TabPane tab="帮助" itemKey="3">

14

        帮助

15

      </TabPane>

16

    </Tabs>

17

  );

18

}

Show Error

Auto Save

标签栏内容扩展

传入 tabBarExtraContent 属性可以在标签栏右侧添加附加操作。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

26

 

1

import { Tabs, TabPane, Button } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <Tabs

5

        defaultActiveKey="1"

6

        tabBarExtraContent={

7

            <Button

8

                onClick={() => {

9

                    alert('you have clicked me!');

10

                }}

11

            >

12

                Extra Action

13

            </Button>

14

        }

15

    >

16

        <TabPane tab="文档" itemKey="1">

17

            文档

18

        </TabPane>

19

        <TabPane tab="快速起步" itemKey="2">

20

            快速起步

21

        </TabPane>

22

        <TabPane tab="帮助" itemKey="3">

23

            帮助

24

        </TabPane>

25

    </Tabs>

26

);

Show Error

Auto Save

标签栏二次封装

传入 renderTabBar 函数可对标签栏进行二次封装。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

25

 

1

import { Tabs, TabPane } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <Tabs

5

        defaultActiveKey="1"

6

        renderTabBar={(tabBarProps, DefaultTabBar) => {

7

            return (

8

                <div className="tab-bar-box">

9

                    这是二次封装的Tab Bar，当前ActiveKey：{tabBarProps.activeKey}

10

                    <DefaultTabBar {...tabBarProps} />

11

                </div>

12

            );

13

        }}

14

    >

15

        <TabPane tab="文档" itemKey="1">

16

            文档

17

        </TabPane>

18

        <TabPane tab="快速起步" itemKey="2">

19

            快速起步

20

        </TabPane>

21

        <TabPane tab="帮助" itemKey="3">

22

            帮助

23

        </TabPane>

24

    </Tabs>

25

);

Show Error

Auto Save

动态更新

通过绑定事件，可以使标签栏动态更新。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

62

 

1

import { Tabs, TabPane, ButtonGroup, Button } from '@kousum/semi-ui-vue';

2

import { defineComponent, reactive } from 'vue';

3

​

4

​

5

const Demo = defineComponent(() => {

6

​

7

  let newTabIndex = 0;

8

  const panes = [

9

    { title: 'Tab 1', content: 'Content of Tab Pane 1', itemKey: '1' },

10

    { title: 'Tab 2', content: 'Content of Tab Pane 2', itemKey: '2' },

11

  ];

12

  const state = reactive({

13

    panes,

14

    activeKey: panes[0].itemKey,

15

  });

16

​

17

  function add() {

18

    const { panes } = state;

19

    const index = newTabIndex++;

20

    panes.push({ title: `New Tab ${index}`, content: 'New Tab Pane', itemKey: `newTab${index}` });

21

    state.panes = panes

22

    state.activeKey = `newTab${index}`

23

  }

24

​

25

  function remove() {

26

    const { panes } = state;

27

    if (panes.length > 1) {

28

      panes.pop();

29

      state.panes = panes

30

      state.activeKey = panes[panes.length - 1].itemKey

31

    }

32

  }

33

​

34

  function handleChange(activeKey) {

35

    state.activeKey = activeKey

36

  }

37

​

38

  return () => {

39

​

40

    const { panes, activeKey } = state;

41

    return (

Show Error

Auto Save

关闭

关闭标签栏中的某一个标签页。
只有卡片样式的页签支持关闭选项。使用 closable={true} 来开启。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

33

 

1

import { Tabs, TabPane } from '@kousum/semi-ui-vue';

2

import { defineComponent, reactive } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

​

6

  const state = reactive({

7

    tabList: [

8

      { tab: '文档', itemKey: '1', text: '文档', closable: true },

9

      { tab: '快速起步', itemKey: '2', text: '快速起步', closable: true },

10

      { tab: '帮助', itemKey: '3', text: '帮助' },

11

    ],

12

  });

13

​

14

  function close(key) {

15

    const newTabList = [...state.tabList];

16

    const closeIndex = newTabList.findIndex(t => t.itemKey === key);

17

    newTabList.splice(closeIndex, 1);

18

    state.tabList = newTabList;

19

  }

20

​

21

  return () => {

22

    return (

23

      <Tabs type="card" defaultActiveKey="1" onTabClose={close}>

24

        {state.tabList.map(t => (

25

          <TabPane closable={t.closable} tab={t.tab} itemKey={t.itemKey} key={t.itemKey}>

26

            {t.text}

27

          </TabPane>

28

        ))}

29

      </Tabs>

30

    );

31

  }

32

})

33

export default Demo

Show Error

Auto Save

API 参考

Tab

属性	说明	类型	默认值
activeKey	当前激活的 tab 页的 itemKey 值	string	无
arrowPosition	折叠模式下，左右切换箭头渲染位置 >=2.61.0	"start" "end" "both"	无
className	类名	string	无
collapsible	折叠的 Tabs，>=1.1.0	boolean	false
visibleTabsStyle	整体滚动区域 Style >=2.61.0	style: CSSProperties	无
contentStyle	内容区域外层样式对象	CSSProperties	无
defaultActiveKey	初始化选中的 tab 页的 key 值	string	'1'
keepDOM	使用 TabPane 写法时是否渲染隐藏面板的 DOM 结构	boolean	true
lazyRender	懒渲染，仅当面板激活过才被渲染在 DOM 树中	boolean	false
more	将一部分 Tab 渲染到下拉菜单中 ** >= 2.59.0**	number | {count:number,render:()=>ReactNode,dropdownProps:DropDownProps}	-
renderTabBar	用于二次封装标签栏	(tabBarProps: object, defaultTabBar: React.ComponentType) => ReactNode	无
renderArrow	折叠滚动模式下，自定义左右切换箭头如何渲染，默认为箭头按钮 hover 时展开溢出项 >=2.61.0	(items: OverflowItem[],pos:"start"|"end", handleArrowClick:()=>void)=> ReactNode	无
preventScroll	指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法	boolean
showRestInDropdown	是否将收起的 Tab 展示在下拉菜单中（仅当 collapsible 为 true 时生效） >= 2.61.0	boolean	true
size	大小，提供 large、medium、small 三种类型，>=1.11.0，目前仅支持线性 Tabs	string	large
style	样式对象	CSSProperties	无
tabBarExtraContent	用于扩展标签栏的内容	ReactNode	无
tabList	标签页对象组成的数组，该对象支持 itemKey（对应 activeKey，tab（标签页文字）及 icon（标签页图标）	TabPane[]	无
tabPaneMotion	是否使用动画切换 tabs	boolean	true
tabPosition	tab 的位置，支持top(水平), left(垂直)	string	top
type	标签栏的样式，可选line、 card、 button	string	line
onChange	切换 tab 页时的回调函数	function(activeKey: string)	无
onTabClick	单击事件	function(key: string, e: Event)	无
onTabClose	关闭 tab 页时的回调函数 >=2.1.0	function(tabKey: string)	无
onVisibleTabsChange	折叠滚动模式下，溢出项切换变化回调 >= 2.61.0	(visibleState:Record<string,bool>)=>void	无

TabPane

属性	说明	类型	默认值
className	类名	string	无
disabled	标签页栏是否禁用	boolean	无
icon	标签页栏 icon	ReactNode	无
itemKey	对应 activeKey	string	无
style	样式对象	CSSProperties	无
tab	标签页栏显示文字	ReactNode	无
closable	允许关闭 tab >=2.1.0	boolean	false

Accessibility

ARIA

• 关于 role
  • TabBar 对应的 role 为 tablist
  • TabBar 中的 Tab 对应的 role 为 tab
  • TabPane 对应的 role 为 tabpanel
• aria-orientation: 表明 TabBar 的方向，有 vertical 和 horizontal 两种。当传入 tabPosition 为 left 时, aria-orientation 会被设置为 vertical，tabPosition 为 top 时，设置为 horizontal
• aria-disabled: 当 TabPane 设置为 disabled 时，对应 Tab 的 aria-disabled 会被设置为 true
• aria-selected: 表明 Tab 是否被选中
• aria-controls: 指向 Tab 标签所控制的 TabPane
• aria-labelledby: 指向设置 TabPane 标签的元素

键盘和焦点

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/

• 选项卡可以被获取到焦点，但禁用的选项卡除外
• 键盘用户可以使用 Tab 键，将焦点移动到已被选择的选项卡元素的选项卡面板上
• 当焦点位于水平选项卡列表中的选项卡元素上时，使用 左右箭头 来切换选项
• 当焦点位于垂直选项卡列表中的选项卡元素上时，使用 上下箭头 来切换选项
• 当焦点位于选项卡列表中的未被激活的选项卡元素上时，可以使用 Space 或 Enter 键来激活该选项卡
• 当键盘用户想要直接将焦点聚焦到选项卡列表中的最后一个选项卡元素时：
  • Mac 用户：fn + 右箭头
  • Windows 用户：End
• 当键盘用户想要直接将焦点聚焦到选项卡列表中的第一个选项卡元素时：
  • Mac 用户：fn + 左箭头
  • Windows 用户：Home
• 当选项卡允许被删除时：
  • 用户可以使用 Delete 键删除选项卡
  • 删除后，焦点转移到被删除选项卡元素的后一个元素上；若被删除元素无后一个元素则转移到前一个元素上

设计变量

color

font

height

width

spacing

radius

animation

other

变量	默认值	用法
$color-tabs_tab_line_default-border-default	var(--semi-color-border)	线条式页签描边颜色默认
$color-tabs_tab_line_default-bg-default	transparent	线条式页签背景颜色 - 默认
$color-tabs_tab_line_default-text-default	var(--semi-color-text-2)	线条式页签文本颜色 - 默认
$color-tabs_tab_line_default-icon-default	var(--semi-color-text-2)	线条式页签标示线颜色 - 默认
$color-tabs_tab_line_default-bg-hover	transparent	线条式页签背景颜色 - 悬浮
$color-tabs_tab_line_default-text-hover	var(--semi-color-text-0)	线条式页签文本颜色 - 悬浮
$color-tabs_tab_line_default-border-hover	var(--semi-color-fill-0)	线条式页签标示线颜色 - 悬浮
$color-tabs_tab_line_default-bg-active	transparent	线条式页签背景颜色 - 按下
$color-tabs_tab_line_default-text-active	var(--semi-color-text-0)	线条式页签文本颜色 - 按下
$color-tabs_tab_line_default-border-active	var(--semi-color-fill-1)	线条式页签标示线颜色 - 按下

显示第 1 条-第 10 条，共 49 条

• 1
• 2
• 3
• 4
• 5

变量	默认值	用法
$font-tabs_tab-fontWeight	$font-weight-regular	页签文本字重 - 默认
$font-tabs_tab_active-fontWeight	$font-weight-bold	页签文本字重 - 选中
$font-tabs_bar_extra_large-lineHeight	$height-tabs_bar_extra_large	大尺寸页签文字行高
$font-tabs_bar_extra_small-lineHeight	$height-tabs_bar_extra_small	小尺寸页签文字行高
$font-tabs_bar_large-fontSize	$font-size-regular	大号模式 字体大小
$font-tabs_bar_small-fontSize	$font-size-regular	小号模式 字体大小
$font-tabs_bar_medium-fontSize	$font-size-regular	中等模式 字体大小

显示第 1 条-第 7 条，共 7 条

• 1

变量	默认值	用法
$height-tabs_overflow_list	300px	页签折叠收起菜单高度
$height-tabs_tab_slash_line	14px	斜线式页签分割线高度
$height-tabs_bar_extra_large	50px	大尺寸页签高度
$height-tabs_bar_extra_small	36px	小尺寸页签高度

显示第 1 条-第 4 条，共 4 条

• 1

变量	默认值	用法
$width-tabs_bar_line-border	$border-thickness-control	线条式页签底部分割线宽度
$width-tabs_bar_line_tab-border	2px	页签标示线宽度
$width-tabs_bar_card-border	$border-thickness-control	卡片式页签底部分割线宽度
$width-tabs-outline	2px	聚焦轮廓宽度
$width-tabs-outline-offset	-2px	聚焦轮廓偏移宽度
$width-tabs_bar_line-outline-offset	-1px	线条式页签聚焦轮廓偏移宽度
$width-tabs_tab-pane_arrow-border	0px	滚动折叠箭头边框宽度
$width-tabs_tab_slash_line	8px	斜线式页签分割线宽度

显示第 1 条-第 8 条，共 8 条

• 1

变量	默认值	用法
$spacing-tabs_tab-more_trigger_icon-marginLeft	8px
$spacing-tabs_tab-more_trigger_icon-marginRight	8px
$spacing-tabs_tab-more_trigger_icon-marginTop	0px
$spacing-tabs_tab-more_trigger_icon-marginBottom	0px
$spacing-tabs_tab-pane_arrow	8px	滚动折叠箭头内边距
$spacing-tabs_bar_extra-paddingY	0px	附加操作垂直内边距
$spacing-tabs_bar_extra-paddingX	5px	附加操作水平内边距
$spacing-tabs_tab_icon-marginRight	$spacing-tight	附加操作垂直内边距
$spacing-tabs_tab_icon-top	3px	页签图标顶部位置
$spacing-tabs_overflow_icon-marginRight	4px	页签折叠切换按钮右侧外边距

显示第 1 条-第 10 条，共 51 条

• 1
• 2
• 3
• 4
• 5
• 6

变量	默认值	用法
$radius-tabs_tab_card	var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0	卡片式页签四向圆角
$radius-tabs_tab_card_left	var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small)	垂直卡片式页签四向圆角
$radius-tabs_tab_button	var(--semi-border-radius-small)	按钮式页签圆角

显示第 1 条-第 3 条，共 3 条

• 1

变量	默认值	用法
$transition_duration-tabs_tab_line-border	var(--semi-transition_duration-none)	线条式标签页标示线-边框-动画持续时间
$transition_function-tabs_tab_line-border	var(--semi-transition_function-easeIn)	线条式标签页标示线-边框-过渡曲线
$transition_delay-tabs_tab_line-border	var(--semi-transition_delay-none)	线条式标签页标示线-边框-延迟时间
$transition_duration-tabs_tab_line-text	var(--semi-transition_duration-none)	线条式标签页-文字-动画持续时间
$transition_function-tabs_tab_line-text	var(--semi-transition_function-easeIn)	线条式标签页-文字-过渡曲线
$transition_delay-tabs_tab_line-text	var(--semi-transition_delay-none)	线条式标签页-文字-延迟时间
$transition_duration-tabs_tab_button-bg	var(--semi-transition_duration-none)	按钮式标签页-背景色-动画持续时间
$transition_function-tabs_tab_button-bg	var(--semi-transition_function-easeIn)	按钮式标签页-背景色-过渡曲线
$transition_delay-tabs_tab_button-bg	var(--semi-transition_delay-none)	按钮式标签页-背景色-延迟时间
$transition_duration-tabs_tab_card-bg	var(--semi-transition_duration-none)	卡片式标签页文字-背景色-动画持续时间

显示第 1 条-第 10 条，共 20 条

• 1
• 2

变量	默认值	用法
$transform_scale-tabs_tab_line-item	var(--semi-transform_scale-none)	线条式标签页item 放大
$transform_scale-tabs_tab_button-item	var(--semi-transform_scale-none)	按钮式标签页item 放大
$transform_scale-tabs_tab_card-item	var(--semi-transform_scale-none)	线条式标签页item 放大

显示第 1 条-第 3 条，共 3 条

• 1

文案规范

• 标签文案需要准确清晰地解释标签内容
• 用简短的，易区分的标签
• 尽量保持在一个词以内

FAQ

• 为什么在 Tabs 中使用 Typography 的省略 ellipsis 失效？

  因为 Tabs 渲染 TabPane 时，默认是全部渲染 display: none。此时这些组件无法获取到正确的宽度或高度值。建议 1.x 的版本开启 lazyRender，或者关闭 keepDOM。0.x 的版本需要使用 tabList 的写法。

• 为什么在 Tabs 中使用 Collapse/Collapsible/Resizable Table 等组件的高度或宽度值不对？

  原因同上，另外如果 collapse 不需要动画，也可以通过设置 motion={false} 来关闭动画效果。此时无需获取组件的高度。