Tabs 标签页

定义

可以为平级的大块信息内容进行分类收纳和展现，保持界面整洁，用户不需跳转页面即可比较和浏览信息。

等分布局

<template>
  <se-tabs :activeName="activeName" layout="equal">
    <se-tab-pane name="tab_1" label="tab_1">
      <template v-slot:label="{ active }">
        <span>
          <i :class="['se-tab-icon', active ? 'se-tab-icon--active' : null]"></i>
          导航1
        </span>
      </template>
      导航1的内容
    </se-tab-pane>
    <se-tab-pane label="导航2" name="tab_2">导航2的内容</se-tab-pane>
    <se-tab-pane label="导航3" name="tab_3">导航3的内容</se-tab-pane>
  </se-tabs>
</template>
<style>
  .se-tab-pane {
    padding: 20px;
  }
  .se-tab-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
    background-color: currentColor;
  }
  .se-tab-icon--active {
    background-color: #01d567;
  }
</style>
<script>
  export default {
    data() {
      return {
        activeName: 'tab_1'
      }
    }
  }
</script>

居中布局

<se-tabs :activeName="activeName" layout="center">
  <se-tab-pane label="导航1" name="tab_1">导航1的内容</se-tab-pane>
  <se-tab-pane label="导航2" name="tab_2">导航2的内容</se-tab-pane>
  <se-tab-pane label="导航3" name="tab_3">导航3的内容</se-tab-pane>
  <se-tab-pane label="导航4" name="tab_4">导航4的内容</se-tab-pane>
  <se-tab-pane label="导航5" name="tab_5">导航5的内容</se-tab-pane>
  <se-tab-pane label="导航6" name="tab_6">导航6的内容</se-tab-pane>
</se-tabs>
<script>
  export default {
    data() {
      return {
        activeName: 'tab_1'
      }
    }
  }
</script>

居左布局

<se-tabs :activeName="activeName" layout="left">
  <se-tab-pane label="导航1" name="tab_1">导航1的内容</se-tab-pane>
  <se-tab-pane label="导航2" name="tab_2">导航2的内容</se-tab-pane>
  <se-tab-pane label="导航3" name="tab_3">导航3的内容</se-tab-pane>
  <se-tab-pane label="导航4" name="tab_4">导航4的内容</se-tab-pane>
  <se-tab-pane label="导航5" name="tab_5">导航5的内容</se-tab-pane>
</se-tabs>
<style>
  .se-tab-pane {
    padding: 20px;
  }
</style>
<script>
  export default {
    data() {
      return {
        activeName: 'tab_1'
      }
    }
  }
</script>

侧边栏布局

<div class="demo-container">
  <se-tabs :activeName="activeName" sidebar style="height: 480px">
    <se-tab-pane v-for="item in list" :key="item.name" :label="item.label" :name="item.name">
      {{ item.content }}
    </se-tab-pane>
  </se-tabs>
</div>
<style>
  .se-tab-pane {
    padding: 20px;
  }
  .demo-container {
    height: 480px;
    background-color: #fff;
    border: 1px solid #d0d0d0;
  }
</style>
<script>
  export default {
    data() {
      return {
        activeName: 'tab_1',
        list: Array.from({ length: 8 }, (_, i) => {
          i = i + 1
          return {
            name: `tab_${i}`,
            label: `导航 ${i}`,
            content: `导航 ${i} 的内容`
          }
        })
      }
    }
  }
</script>

外部修改选中值

只需再增加 v-model 绑定和 activeName 相同的值即可

<template>
  <se-button @click="handler">change</se-button>
  <se-tabs :activeName="activeName" layout="equal" v-model="activeName">
    <se-tab-pane name="tab_1" label="tab_1">
      <template v-slot:label="{ active }">
        <span>
          <i :class="['se-tab-icon', active ? 'se-tab-icon--active' : null]"></i>
          导航1
        </span>
      </template>
      导航1的内容
    </se-tab-pane>
    <se-tab-pane label="导航2" name="tab_2">导航2的内容</se-tab-pane>
    <se-tab-pane label="导航3" name="tab_3">导航3的内容</se-tab-pane>
  </se-tabs>
</template>

<style>
  .se-tab-pane {
    padding: 20px;
  }

  .se-tab-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
    background-color: currentColor;
  }

  .se-tab-icon--active {
    background-color: #01d567;
  }
</style>

<script>
  export default {
    data() {
      return {
        activeName: 'tab_1'
      }
    },
    methods: {
      handler() {
        this.activeName = 'tab_2'
      }
    }
  }
</script>

SeTabs Props

Tabs Events

SeTabPane Props

SeTabPane Slots