Tab 标签页

使用指南

组件介绍

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

引入方式

import { Tab, TabItem } from 'feart';

components: {
  'fe-tab': Tab,
  'fe-tab-item': TabItem
}

代码演示

基础用法

<fe-tab v-model="active">
  <fe-tab-item label="选项一">选项一内容</fe-tab-item>
  <fe-tab-item label="选项二">选项二内容</fe-tab-item>
</fe-tab>

禁用标签

<fe-tab>
  <fe-tab-item label="选项一">选项一内容</fe-tab-item>
  <fe-tab-item label="选项二" disabled>
    选项二内容
  </fe-tab-item>
  <fe-tab-item label="选项三">选项三内容</fe-tab-item>
</fe-tab>

动画

<fe-tab :animated="true">
  <fe-tab-item label="选项一">选项一内容</fe-tab-item>
  <fe-tab-item label="选项二">选项二内容</fe-tab-item>
  <fe-tab-item label="选项三">选项三内容</fe-tab-item>
</fe-tab>

气泡提示

<fe-tab>
  <fe-tab-item label="选项一" badgeValue="0">选项一内容</fe-tab-item>
  <fe-tab-item label="选项二" :badgeDot="true">选项二内容</fe-tab-item>
  <fe-tab-item label="选项三" badgeValue="999">选项三内容</fe-tab-item>
</fe-tab>

横向滚动

<fe-tab>
  <fe-tab-item label="选项一">选项一内容</fe-tab-item>
  <fe-tab-item label="选项二">选项二内容</fe-tab-item>
  <fe-tab-item label="选项三">选项三内容</fe-tab-item>
  <fe-tab-item label="选项四">选项四内容</fe-tab-item>
  <fe-tab-item label="选项五">选项五内容</fe-tab-item>
</fe-tab>

禁用动画

<fe-tab :scrollable="false">
  <fe-tab-item label="选项一">选项一内容</fe-tab-item>
  <fe-tab-item label="选项二">选项二内容</fe-tab-item>
  <fe-tab-item label="选项三">选项三内容</fe-tab-item>
</fe-tab>

样式风格

<fe-tab type="card">
  <fe-tab-item label="选项一">选项一内容</fe-tab-item>
  <fe-tab-item label="选项二">选项二内容</fe-tab-item>
  <fe-tab-item label="选项三">选项三内容</fe-tab-item>
</fe-tab>

API

fe-tab

fe-tab-item

Events