Tabs 标签页

概述

选项卡切换组件,常用于平级区域大块内容的的收纳和展现。

代码示例

Tabs 标签页 - 图1

基础用法

valueTabPanename 对应,用于标识当前激活的是哪一项,name 值默认从 0 开始,默认激活第一项。可以使用 v-model 双向绑定数据。

  1. <template>
  2. <Tabs value="name1">
  3. <TabPane label="标签一" name="name1">标签一的内容</TabPane>
  4. <TabPane label="标签二" name="name2">标签二的内容</TabPane>
  5. <TabPane label="标签三" name="name3">标签三的内容</TabPane>
  6. </Tabs>
  7. </template>
  8. <script>
  9. export default {
  10. }
  11. </script>

Tabs 标签页 - 图2

禁用

禁用某一项。

  1. <template>
  2. <Tabs>
  3. <TabPane label="标签一">标签一的内容</TabPane>
  4. <TabPane label="标签二" disabled>标签二的内容</TabPane>
  5. <TabPane label="标签三">标签三的内容</TabPane>
  6. </Tabs>
  7. </template>
  8. <script>
  9. export default {
  10. }
  11. </script>

Tabs 标签页 - 图3

图标

通过设置属性 icon,可以显示一个图标。

  1. <template>
  2. <Tabs>
  3. <TabPane label="macOS" icon="logo-apple">标签一的内容</TabPane>
  4. <TabPane label="Windows" icon="logo-windows">标签二的内容</TabPane>
  5. <TabPane label="Linux" icon="logo-tux">标签三的内容</TabPane>
  6. </Tabs>
  7. </template>
  8. <script>
  9. export default {
  10. }
  11. </script>

Tabs 标签页 - 图4

迷你型

设置属性 sizesmall 可以显示为迷你型,只在 typeline 时有效。

  1. <template>
  2. <Tabs size="small">
  3. <TabPane label="标签一">标签一的内容</TabPane>
  4. <TabPane label="标签二">标签二的内容</TabPane>
  5. <TabPane label="标签三">标签三的内容</TabPane>
  6. </Tabs>
  7. </template>
  8. <script>
  9. export default {
  10. }
  11. </script>

Tabs 标签页 - 图5

卡片样式

设置属性 typecard 可以显示卡片样式,常用于容器顶部。

  1. <template>
  2. <Tabs type="card">
  3. <TabPane label="标签一">标签一的内容</TabPane>
  4. <TabPane label="标签二">标签二的内容</TabPane>
  5. <TabPane label="标签三">标签三的内容</TabPane>
  6. </Tabs>
  7. </template>
  8. <script>
  9. export default {
  10. }
  11. </script>

Tabs 标签页 - 图6

可关闭

通过设置属性 closable 可以关闭某一项,仅在 typecard 时有效。

需结合 @on-tab-remove 事件手动关闭标签页。

  1. <template>
  2. <Tabs type="card" closable @on-tab-remove="handleTabRemove">
  3. <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
  4. <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
  5. <TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
  6. </Tabs>
  7. </template>
  8. <script>
  9. export default {
  10. data () {
  11. return {
  12. tab0: true,
  13. tab1: true,
  14. tab2: true
  15. }
  16. },
  17. methods: {
  18. handleTabRemove (name) {
  19. this['tab' + name] = false;
  20. }
  21. }
  22. }
  23. </script>

Tabs 标签页 - 图7

自定义标签页

设置 label 为 Render 函数后,可以自定义标签页的内容。

学习 Render 函数的内容

  1. <template>
  2. <Tabs value="name1">
  3. <TabPane :label="label" name="name1">标签一的内容</TabPane>
  4. <TabPane label="标签二" name="name2">标签二的内容</TabPane>
  5. <TabPane label="标签三" name="name3">标签三的内容</TabPane>
  6. </Tabs>
  7. </template>
  8. <script>
  9. export default {
  10. data () {
  11. return {
  12. label: (h) => {
  13. return h('div', [
  14. h('span', '标签一'),
  15. h('Badge', {
  16. props: {
  17. count: 3
  18. }
  19. })
  20. ])
  21. }
  22. }
  23. }
  24. }
  25. </script>

Tabs 标签页 - 图8

附加内容

设置 slot extra 可以在页签右边添加附加操作。

  1. <template>
  2. <Tabs type="card">
  3. <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
  4. <Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>
  5. </Tabs>
  6. </template>
  7. <script>
  8. export default {
  9. data () {
  10. return {
  11. tabs: 2
  12. }
  13. },
  14. methods: {
  15. handleTabsAdd () {
  16. this.tabs ++;
  17. }
  18. }
  19. }
  20. </script>

Tabs 标签页 - 图9

不使用动画

通过设置属性 animatedfalse 可以禁用动画。

  1. <template>
  2. <Tabs :animated="false">
  3. <TabPane label="标签一">标签一的内容</TabPane>
  4. <TabPane label="标签二">标签二的内容</TabPane>
  5. <TabPane label="标签三">标签三的内容</TabPane>
  6. </Tabs>
  7. </template>
  8. <script>
  9. export default {
  10. }
  11. </script>

Tabs 标签页 - 图10

其它样式

可以根据业务自定义 UI,需要一点额外的样式覆盖。

  1. <style>
  2. .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
  3. height: 120px;
  4. margin-top: -16px;
  5. }
  6. .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
  7. background: #fff;
  8. padding: 16px;
  9. }
  10. .demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
  11. border-color: transparent;
  12. }
  13. .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
  14. border-color: #fff;
  15. }
  16. .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
  17. border-radius: 0;
  18. background: #fff;
  19. }
  20. .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
  21. border-top: 1px solid #3399ff;
  22. }
  23. .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
  24. content: '';
  25. display: block;
  26. width: 100%;
  27. height: 1px;
  28. background: #3399ff;
  29. position: absolute;
  30. top: 0;
  31. left: 0;
  32. }
  33. </style>
  34. <template>
  35. <Row :gutter="32">
  36. <Col span="12" class="demo-tabs-style1" style="background: #e3e8ee;padding:16px;">
  37. <Tabs type="card">
  38. <TabPane label="标签一">标签一的内容</TabPane>
  39. <TabPane label="标签二">标签二的内容</TabPane>
  40. <TabPane label="标签三">标签三的内容</TabPane>
  41. </Tabs>
  42. </Col>
  43. <Col span="12" class="demo-tabs-style2">
  44. <Tabs type="card">
  45. <TabPane label="标签一">标签一的内容</TabPane>
  46. <TabPane label="标签二">标签二的内容</TabPane>
  47. <TabPane label="标签三">标签三的内容</TabPane>
  48. </Tabs>
  49. </Col>
  50. </Row>
  51. </template>
  52. <script>
  53. export default {
  54. }
  55. </script>

API

Tabs props

属性 说明 类型 默认值
value 当前激活 tab 面板的 name,可以使用 v-model 双向绑定数据 String 默认为第一项的 name
type 页签的基本样式,可选值为 linecard String line
size 尺寸,可选值为 defaultsmall,仅在 type="line" 时有效 String default
closable 是否可以关闭页签,仅在 type="card" 时有效 Boolean false
animated 是否使用 CSS3 动画 Boolean true
capture-focus Tabs 内的表单类组件是否自动获得焦点 Boolean false
before-remove 关闭前的函数,返回 Promise 可阻止标签关闭 Function -
name 3.3.1 当嵌套使用 Tabs,指定 name 区分层级 String -

Tabs events

事件名 说明 返回值
on-click tab 被点击时触发 name
on-tab-remove tab 被关闭时触发 name

Tabs slot

名称 说明
extra 附加内容

TabPane props

属性 说明 类型 默认值
name 用于标识当前面板,对应 value,默认为其索引值 String -
label 选项卡头显示文字,支持 Render 函数。 学习 Render 函数的内容 String | Function
icon 选项卡图标 String -
disabled 是否禁用该选项卡 Boolean false
closable 是否可以关闭页签,仅在 type="card" 时有效 Boolean null
tab 3.3.1 当嵌套使用 Tabs,设置该属性指向对应 Tabs 的 name 字段 String -
index 3.3.1 在 TabPane 使用 v-if 时,并不会按照预先的顺序渲染,这时可设置 index,并从小到大排序(需大于 0) Number -