Tabs标签页 - 图1

Tabs 标签页

选项卡切换组件。

何时使用

提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

Ant Design 依次提供了三级选项卡，分别用于不同的场景。

  • 卡片式的页签，提供可关闭的样式，常用于容器顶部。
  • 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。
  • RadioButton 可作为更次级的页签来使用。

代码演示

Tabs标签页 - 图2

基本用法

默认选中第一项。

  1. <template>
  2.   <div>
  3.     <a-tabs default-active-key="1" @change="callback">
  4.       <a-tab-pane key="1" tab="Tab 1">
  5.         Content of Tab Pane 1
  6.       </a-tab-pane>
  7.       <a-tab-pane key="2" tab="Tab 2" force-render>
  8.         Content of Tab Pane 2
  9.       </a-tab-pane>
  10.       <a-tab-pane key="3" tab="Tab 3">
  11.         Content of Tab Pane 3
  12.       </a-tab-pane>
  13.     </a-tabs>
  14.   </div>
  15. </template>
  16. <script>
  17. export default {
  18.   data() {
  19.     return {};
  20.   },
  21.   methods: {
  22.     callback(key) {
  23.       console.log(key);
  24.     },
  25.   },
  26. };
  27. </script>

Tabs标签页 - 图3

禁用

禁用某一项。

  1. <template>
  2.   <a-tabs default-active-key="1">
  3.     <a-tab-pane key="1" tab="Tab 1">
  4.       Tab 1
  5.     </a-tab-pane>
  6.     <a-tab-pane key="2" tab="Tab 2" disabled>
  7.       Tab 2
  8.     </a-tab-pane>
  9.     <a-tab-pane key="3" tab="Tab 3">
  10.       Tab 3
  11.     </a-tab-pane>
  12.   </a-tabs>
  13. </template>

Tabs标签页 - 图4

图标

有图标的标签。

  1. <template>
  2.   <a-tabs default-active-key="2">
  3.     <a-tab-pane key="1">
  4.       <span slot="tab">
  5.         <a-icon type="apple" />
  6.         Tab 1
  7.       </span>
  8.       Tab 1
  9.     </a-tab-pane>
  10.     <a-tab-pane key="2">
  11.       <span slot="tab">
  12.         <a-icon type="android" />
  13.         Tab 2
  14.       </span>
  15.       Tab 2
  16.     </a-tab-pane>
  17.   </a-tabs>
  18. </template>

Tabs标签页 - 图5

滑动

可以左右、上下滑动，容纳更多标签。

  1. <template>
  2.   <div style="width: 500px">
  3.     <a-radio-group v-model="mode" :style="{ marginBottom: '8px' }">
  4.       <a-radio-button value="top">
  5.         Horizontal
  6.       </a-radio-button>
  7.       <a-radio-button value="left">
  8.         Vertical
  9.       </a-radio-button>
  10.     </a-radio-group>
  11.     <a-tabs
  12.       default-active-key="1"
  13.       :tab-position="mode"
  14.       :style="{ height: '200px' }"
  15.       @prevClick="callback"
  16.       @nextClick="callback"
  17.     >
  18.       <a-tab-pane v-for="i in 30" :key="i" :tab="`Tab-${i}`"> Content of tab {{ i }} </a-tab-pane>
  19.     </a-tabs>
  20.   </div>
  21. </template>
  22. <script>
  23. export default {
  24.   data() {
  25.     return {
  26.       mode: 'top',
  27.     };
  28.   },
  29.   methods: {
  30.     callback(val) {
  31.       console.log(val);
  32.     },
  33.   },
  34. };
  35. </script>

Tabs标签页 - 图6

附加内容

可以在页签右边添加附加操作。

  1. <template>
  2.   <a-tabs>
  3.     <a-tab-pane key="1" tab="Tab 1">
  4.       Content of tab 1
  5.     </a-tab-pane>
  6.     <a-tab-pane key="2" tab="Tab 2">
  7.       Content of tab 2
  8.     </a-tab-pane>
  9.     <a-tab-pane key="3" tab="Tab 3">
  10.       Content of tab 3
  11.     </a-tab-pane>
  12.     <a-button slot="tabBarExtraContent">
  13.       Extra Action
  14.     </a-button>
  15.   </a-tabs>
  16. </template>

Tabs标签页 - 图7

大小

大号页签用在页头区域，小号用在弹出框等较狭窄的容器内。

  1. <template>
  2.   <div>
  3.     <a-radio-group v-model="size" style="margin-bottom: 16px">
  4.       <a-radio-button value="small">
  5.         Small
  6.       </a-radio-button>
  7.       <a-radio-button value="default">
  8.         Default
  9.       </a-radio-button>
  10.       <a-radio-button value="large">
  11.         Large
  12.       </a-radio-button>
  13.     </a-radio-group>
  14.     <a-tabs default-active-key="2" :size="size">
  15.       <a-tab-pane key="1" tab="Tab 1">
  16.         Content of tab 1
  17.       </a-tab-pane>
  18.       <a-tab-pane key="2" tab="Tab 2">
  19.         Content of tab 2
  20.       </a-tab-pane>
  21.       <a-tab-pane key="3" tab="Tab 3">
  22.         Content of tab 3
  23.       </a-tab-pane>
  24.     </a-tabs>
  25.   </div>
  26. </template>
  27. <script>
  28. export default {
  29.   data() {
  30.     return {
  31.       size: 'small',
  32.     };
  33.   },
  34. };
  35. </script>

Tabs标签页 - 图8

位置

有四个位置，tabPosition="left|right|top|bottom"。

  1. <template>
  2.   <div style="width: 500px">
  3.     <a-radio-group v-model="tabPosition" style="margin:8px">
  4.       <a-radio-button value="top">
  5.         top
  6.       </a-radio-button>
  7.       <a-radio-button value="bottom">
  8.         bottom
  9.       </a-radio-button>
  10.       <a-radio-button value="left">
  11.         left
  12.       </a-radio-button>
  13.       <a-radio-button value="right">
  14.         right
  15.       </a-radio-button>
  16.     </a-radio-group>
  17.     <a-tabs default-active-key="1" :tab-position="tabPosition">
  18.       <a-tab-pane key="1" tab="Tab 1">
  19.         Content of Tab 1
  20.       </a-tab-pane>
  21.       <a-tab-pane key="2" tab="Tab 2">
  22.         Content of Tab 2
  23.       </a-tab-pane>
  24.       <a-tab-pane key="3" tab="Tab 3">
  25.         Content of Tab 3
  26.       </a-tab-pane>
  27.     </a-tabs>
  28.   </div>
  29. </template>
  30. <script>
  31. export default {
  32.   data() {
  33.     return {
  34.       tabPosition: 'top',
  35.     };
  36.   },
  37.   methods: {
  38.     callback(val) {
  39.       console.log(val);
  40.     },
  41.   },
  42. };
  43. </script>

Tabs标签页 - 图9

卡片式页签

另一种样式的页签，不提供对应的垂直样式。

  1. <template>
  2.   <a-tabs type="card" @change="callback">
  3.     <a-tab-pane key="1" tab="Tab 1">
  4.       Content of Tab Pane 1
  5.     </a-tab-pane>
  6.     <a-tab-pane key="2" tab="Tab 2">
  7.       Content of Tab Pane 2
  8.     </a-tab-pane>
  9.     <a-tab-pane key="3" tab="Tab 3">
  10.       Content of Tab Pane 3
  11.     </a-tab-pane>
  12.   </a-tabs>
  13. </template>
  14. <script>
  15. export default {
  16.   data() {
  17.     return {};
  18.   },
  19.   methods: {
  20.     callback(key) {
  21.       console.log(key);
  22.     },
  23.   },
  24. };
  25. </script>

Tabs标签页 - 图10

新增和关闭页签

只有卡片样式的页签支持新增和关闭选项。
使用 closable={false} 禁止关闭。 

  1. <template>
  2.   <a-tabs v-model="activeKey" type="editable-card" @edit="onEdit">
  3.     <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
  4.       {{ pane.content }}
  5.     </a-tab-pane>
  6.   </a-tabs>
  7. </template>
  8. <script>
  9. export default {
  10.   data() {
  11.     const panes = [
  12.       { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
  13.       { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
  14.       { title: 'Tab 3', content: 'Content of Tab 3', key: '3', closable: false },
  15.     ];
  16.     return {
  17.       activeKey: panes[0].key,
  18.       panes,
  19.       newTabIndex: 0,
  20.     };
  21.   },
  22.   methods: {
  23.     callback(key) {
  24.       console.log(key);
  25.     },
  26.     onEdit(targetKey, action) {
  27.       this[action](targetKey);
  28.     },
  29.     add() {
  30.       const panes = this.panes;
  31.       const activeKey = `newTab${this.newTabIndex++}`;
  32.       panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });
  33.       this.panes = panes;
  34.       this.activeKey = activeKey;
  35.     },
  36.     remove(targetKey) {
  37.       let activeKey = this.activeKey;
  38.       let lastIndex;
  39.       this.panes.forEach((pane, i) => {
  40.         if (pane.key === targetKey) {
  41.           lastIndex = i - 1;
  42.         }
  43.       });
  44.       const panes = this.panes.filter(pane => pane.key !== targetKey);
  45.       if (panes.length && activeKey === targetKey) {
  46.         if (lastIndex >= 0) {
  47.           activeKey = panes[lastIndex].key;
  48.         } else {
  49.           activeKey = panes[0].key;
  50.         }
  51.       }
  52.       this.panes = panes;
  53.       this.activeKey = activeKey;
  54.     },
  55.   },
  56. };
  57. </script>

Tabs标签页 - 图11

卡片式页签容器

用于容器顶部，需要一点额外的样式覆盖。

  1. <template>
  2.   <div class="card-container">
  3.     <a-tabs type="card">
  4.       <a-tab-pane key="1" tab="Tab Title 1">
  5.         <p>Content of Tab Pane 1</p>
  6.         <p>Content of Tab Pane 1</p>
  7.         <p>Content of Tab Pane 1</p>
  8.       </a-tab-pane>
  9.       <a-tab-pane key="2" tab="Tab Title 2">
  10.         <p>Content of Tab Pane 2</p>
  11.         <p>Content of Tab Pane 2</p>
  12.         <p>Content of Tab Pane 2</p>
  13.       </a-tab-pane>
  14.       <a-tab-pane key="3" tab="Tab Title 3">
  15.         <p>Content of Tab Pane 3</p>
  16.         <p>Content of Tab Pane 3</p>
  17.         <p>Content of Tab Pane 3</p>
  18.       </a-tab-pane>
  19.     </a-tabs>
  20.   </div>
  21. </template>
  22. <script>
  23. export default {
  24.   data() {
  25.     return {};
  26.   },
  27.   methods: {
  28.     callback(key) {
  29.       console.log(key);
  30.     },
  31.   },
  32. };
  33. </script>
  34. <style>
  35. .card-container {
  36.   background: #f5f5f5;
  37.   overflow: hidden;
  38.   padding: 24px;
  39. }
  40. .card-container > .ant-tabs-card > .ant-tabs-content {
  41.   height: 120px;
  42.   margin-top: -16px;
  43. }
  45. .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  46.   background: #fff;
  47.   padding: 16px;
  48. }
  50. .card-container > .ant-tabs-card > .ant-tabs-bar {
  51.   border-color: #fff;
  52. }
  54. .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  55.   border-color: transparent;
  56.   background: transparent;
  57. }
  59. .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  60.   border-color: #fff;
  61.   background: #fff;
  62. }
  63. </style>

Tabs标签页 - 图12

自定义新增页签触发器

隐藏默认的页签增加图标，给自定义触发器绑定事件。

  1. <template>
  2.   <div>
  3.     <div :style="{ marginBottom: '16px' }">
  4.       <a-button @click="add">
  5.         ADD
  6.       </a-button>
  7.     </div>
  8.     <a-tabs v-model="activeKey" hide-add type="editable-card" @edit="onEdit">
  9.       <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
  10.         {{ pane.content }}
  11.       </a-tab-pane>
  12.     </a-tabs>
  13.   </div>
  14. </template>
  15. <script>
  16. export default {
  17.   data() {
  18.     const panes = [
  19.       { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
  20.       { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
  21.     ];
  22.     return {
  23.       activeKey: panes[0].key,
  24.       panes,
  25.       newTabIndex: 0,
  26.     };
  27.   },
  28.   methods: {
  29.     callback(key) {
  30.       console.log(key);
  31.     },
  32.     onEdit(targetKey, action) {
  33.       this[action](targetKey);
  34.     },
  35.     add() {
  36.       const panes = this.panes;
  37.       const activeKey = `newTab${this.newTabIndex++}`;
  38.       panes.push({
  39.         title: `New Tab ${activeKey}`,
  40.         content: `Content of new Tab ${activeKey}`,
  41.         key: activeKey,
  42.       });
  43.       this.panes = panes;
  44.       this.activeKey = activeKey;
  45.     },
  46.     remove(targetKey) {
  47.       let activeKey = this.activeKey;
  48.       let lastIndex;
  49.       this.panes.forEach((pane, i) => {
  50.         if (pane.key === targetKey) {
  51.           lastIndex = i - 1;
  52.         }
  53.       });
  54.       const panes = this.panes.filter(pane => pane.key !== targetKey);
  55.       if (panes.length && activeKey === targetKey) {
  56.         if (lastIndex >= 0) {
  57.           activeKey = panes[lastIndex].key;
  58.         } else {
  59.           activeKey = panes[0].key;
  60.         }
  61.       }
  62.       this.panes = panes;
  63.       this.activeKey = activeKey;
  64.     },
  65.   },
  66. };
  67. </script>

API

Tabs

参数说明类型默认值
activeKey(v-model)当前激活 tab 面板的 keystring无
animated是否使用动画切换 Tabs，在 tabPosition=top|bottom 时有效boolean | {inkBar:boolean, tabPane:boolean}true, 当 type=”card” 时为 false
defaultActiveKey初始化选中面板的 key，如果没有设置 activeKeystring第一个面板
hideAdd是否隐藏加号图标，在 type=”editable-card” 时有效booleanfalse
size大小，提供 large default 和 small 三种大小string‘default’
tabBarExtraContenttab bar 上额外的元素slot无
tabBarStyletab bar 的样式对象object-
tabPosition页签位置，可选值有 top right bottom leftstring‘top’
type页签的基本样式，可选 line、card editable-card 类型string‘line’
tabBarGuttertabs 之间的间隙number无

事件

事件名称说明回调参数
change切换面板的回调Function(activeKey) {}
edit新增和删除页签的回调，在 type=”editable-card” 时有效(targetKey, action): void
nextClicknext 按钮被点击的回调Function
prevClickprev 按钮被点击的回调Function
tabClicktab 被点击的回调Function

Tabs.TabPane

参数说明类型默认值
forceRender被隐藏时是否渲染 DOM 结构booleanfalse
key对应 activeKeystring无
tab选项卡头显示文字string|slot无