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

    Tabs 标签页

    选项卡切换组件。

    何时使用

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

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

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

    代码演示

    Tabs 标签页 - 图1

    基本用法

    默认选中第一项。

    1. <template>
    2.   <div>
    3.     <a-tabs defaultActiveKey="1" @change="callback">
    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" forceRender>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.   </div>
    9. </template>
    10. <script>
    11.   export default {
    12.     data() {
    13.       return {};
    14.     },
    15.     methods: {
    16.       callback(key) {
    17.         console.log(key);
    18.       },
    19.     },
    20.   };
    21. </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
    8.       defaultActiveKey="1"
    9.       :tabPosition="mode"
    10.       :style="{ height: '200px'}"
    11.       @prevClick="callback"
    12.       @nextClick="callback"
    13.     >
    14.       <a-tab-pane tab="Tab 1" key="1">Content of tab 1</a-tab-pane>
    15.       <a-tab-pane tab="Tab 2" key="2">Content of tab 2</a-tab-pane>
    16.       <a-tab-pane tab="Tab 3" key="3">Content of tab 3</a-tab-pane>
    17.       <a-tab-pane tab="Tab 4" key="4">Content of tab 4</a-tab-pane>
    18.       <a-tab-pane tab="Tab 5" key="5">Content of tab 5</a-tab-pane>
    19.       <a-tab-pane tab="Tab 6" key="6">Content of tab 6</a-tab-pane>
    20.       <a-tab-pane tab="Tab 7" key="7">Content of tab 7</a-tab-pane>
    21.       <a-tab-pane tab="Tab 8" key="8">Content of tab 8</a-tab-pane>
    22.       <a-tab-pane tab="Tab 9" key="9">Content of tab 9</a-tab-pane>
    23.       <a-tab-pane tab="Tab 10" key="10">Content of tab 10</a-tab-pane>
    24.       <a-tab-pane tab="Tab 11" key="11">Content of tab 11</a-tab-pane>
    25.     </a-tabs>
    26.   </div>
    27. </template>
    28. <script>
    29.   export default {
    30.     data() {
    31.       return {
    32.         mode: 'top',
    33.       };
    34.     },
    35.     methods: {
    36.       callback(val) {
    37.         console.log(val);
    38.       },
    39.     },
    40.   };
    41. </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>
    15. </template>
    16. <script>
    17.   export default {
    18.     data() {
    19.       return {
    20.         tabPosition: 'top',
    21.       };
    22.     },
    23.     methods: {
    24.       callback(val) {
    25.         console.log(val);
    26.       },
    27.     },
    28.   };
    29. </script>

    Tabs 标签页 - 图8

    卡片式页签

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

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

    Tabs 标签页 - 图9

    新增和关闭页签

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

    1. <template>
    2.   <a-tabs v-model="activeKey" type="editable-card" @edit="onEdit">
    3.     <a-tab-pane v-for="pane in panes" :tab="pane.title" :key="pane.key" :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 标签页 - 图10

    卡片式页签容器

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

    1. <template>
    2.   <div class="card-container">
    3.     <a-tabs type="card">
    4.       <a-tab-pane tab="Tab Title 1" key="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 tab="Tab Title 2" key="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 tab="Tab Title 3" key="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 标签页 - 图11

    自定义新增页签触发器

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

    1. <template>
    2.   <div>
    3.     <div :style="{ marginBottom: '16px' }">
    4.       <a-button @click="add">ADD</a-button>
    5.     </div>
    6.     <a-tabs hideAdd v-model="activeKey" type="editable-card" @edit="onEdit">
    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.   </div>
    12. </template>
    13. <script>
    14.   export default {
    15.     data() {
    16.       const panes = [
    17.         { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
    18.         { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
    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({
    37.           title: `New Tab ${activeKey}`,
    38.           content: `Content of new Tab ${activeKey}`,
    39.           key: activeKey,
    40.         });
    41.         this.panes = panes;
    42.         this.activeKey = activeKey;
    43.       },
    44.       remove(targetKey) {
    45.         let activeKey = this.activeKey;
    46.         let lastIndex;
    47.         this.panes.forEach((pane, i) => {
    48.           if (pane.key === targetKey) {
    49.             lastIndex = i - 1;
    50.           }
    51.         });
    52.         const panes = this.panes.filter(pane => pane.key !== targetKey);
    53.         if (panes.length && activeKey === targetKey) {
    54.           if (lastIndex >= 0) {
    55.             activeKey = panes[lastIndex].key;
    56.           } else {
    57.             activeKey = panes[0].key;
    58.           }
    59.         }
    60.         this.panes = panes;
    61.         this.activeKey = activeKey;
    62.       },
    63.     },
    64.   };
    65. </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无