• Tabs 标签页
    • 何时使用
    • 代码演示
      • 基本用法
      • 禁用
      • 图标
      • 滑动
      • 附加内容
      • 大小
      • 位置
      • 卡片式页签
      • 新增和关闭页签
      • 卡片式页签容器
      • 自定义新增页签触发器
      • 自定义页签头
  • API
    • Tabs
    • 事件
    • Tabs.TabPane

    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无