Tabs 标签页

选项卡切换组件。

何时使用

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

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

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

代码演示

Tabs标签页 - 图1

基本用法

默认选中第一项。

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

Tabs标签页 - 图2

禁用

禁用某一项。

  1. <template>
  2.   <a-tabs defaultActiveKey="1">
  3.     <a-tab-pane tab="Tab 1" key="1">Tab 1</a-tab-pane>
  4.     <a-tab-pane tab="Tab 2" disabled key="2">Tab 2</a-tab-pane>
  5.     <a-tab-pane tab="Tab 3" key="3">Tab 3</a-tab-pane>
  6.   </a-tabs>
  7. </template>

Tabs标签页 - 图3

图标

有图标的标签。

  1. <template>
  2.   <a-tabs defaultActiveKey="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标签页 - 图4

滑动

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

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

Tabs标签页 - 图5

附加内容

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

  1. <template>
  2.   <a-tabs>
  3.     <a-tab-pane tab="Tab 1" key="1">Content of tab 1</a-tab-pane>
  4.     <a-tab-pane tab="Tab 2" key="2">Content of tab 2</a-tab-pane>
  5.     <a-tab-pane tab="Tab 3" key="3">Content of tab 3</a-tab-pane>
  6.     <a-button slot="tabBarExtraContent">Extra Action</a-button>
  7.   </a-tabs>
  8. </template>

Tabs标签页 - 图6

大小

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

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

Tabs标签页 - 图7

位置

有四个位置，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">top</a-radio-button>
  5.       <a-radio-button value="bottom">bottom</a-radio-button>
  6.       <a-radio-button value="left">left</a-radio-button>
  7.       <a-radio-button value="right">right</a-radio-button>
  8.     </a-radio-group>
  9.     <a-tabs defaultActiveKey="1" :tabPosition="tabPosition">
  10.       <a-tab-pane tab="Tab 1" key="1">Content of Tab 1</a-tab-pane>
  11.       <a-tab-pane tab="Tab 2" key="2">Content of Tab 2</a-tab-pane>
  12.       <a-tab-pane tab="Tab 3" key="3">Content of Tab 3</a-tab-pane>
  13.     </a-tabs>
  14.   </div>
  16. </template>
  17. <script>
  18. export default {
  19.   data () {
  20.     return {
  21.       tabPosition: 'top',
  22.     }
  23.   },
  24.   methods: {
  25.     callback (val) {
  26.       console.log(val)
  27.     },
  28.   },
  29. }
  30. </script>

Tabs标签页 - 图8

卡片式页签

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

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

Tabs标签页 - 图9

新增和关闭页签

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

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

Tabs标签页 - 图10

卡片式页签容器

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

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

Tabs标签页 - 图11

自定义新增页签触发器

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

  1. <template>
  2. <div>
  3.     <div :style="{ marginBottom: '16px' }">
  4.       <a-button @click="add">ADD</a-button>
  5.     </div>
  6.     <a-tabs
  7.       hideAdd
  8.       v-model="activeKey"
  9.       type="editable-card"
  10.       @edit="onEdit"
  11.     >
  12.     <a-tab-pane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">
  13.       {{pane.content}}
  14.     </a-tab-pane>
  15.   </a-tabs>
  16. </div>
  18. </template>
  19. <script>
  20. export default {
  21.   data () {
  22.     const panes = [
  23.       { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
  24.       { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
  25.     ]
  26.     return {
  27.       activeKey: panes[0].key,
  28.       panes,
  29.       newTabIndex: 0,
  30.     }
  31.   },
  32.   methods: {
  33.     callback (key) {
  34.       console.log(key)
  35.     },
  36.     onEdit (targetKey, action) {
  37.       this[action](targetKey)
  38.     },
  39.     add () {
  40.       const panes = this.panes
  41.       const activeKey = `newTab${this.newTabIndex++}`
  42.       panes.push({ title: `New Tab ${activeKey}`, content: `Content of new Tab ${activeKey}`, key: activeKey })
  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 (lastIndex >= 0 && activeKey === targetKey) {
  56.         activeKey = panes[lastIndex].key
  57.       }
  58.       this.panes = panes
  59.       this.activeKey = activeKey
  60.     },
  61.   },
  62. }
  63. </script>

Tabs标签页 - 图12

自定义页签头

自定义页签头

  2. <template>
  3. <div>
  4.   <a-tabs defaultActiveKey="1">
  5.     <a-tab-pane tab="Tab 1" key="1" style="height: 200px">Content of Tab Pane 1</a-tab-pane>
  6.     <a-tab-pane tab="Tab 2" key="2" forceRender>Content of Tab Pane 2</a-tab-pane>
  7.     <a-tab-pane tab="Tab 3" key="3">Content of Tab Pane 3</a-tab-pane>
  8.     <template slot="renderTabBar" slot-scope="props, DefaultTabBar">
  9.       <component :is="DefaultTabBar" {...props} />
  10.     </template>
  11.   </a-tabs>
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16.   data () {
  17.     return {
  18.     }
  19.   },
  20.   methods: {
  21.     callback (key) {
  22.       console.log(key)
  23.     },
  24.   },
  25. }
  26. </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无