iDesign

Tabs 选项卡

用于在同个页面下进行快速切换的选项卡。

基本用法

使用 i-tabs 包裹菜单的每一项 i-tabs-item：

无默认值

选项卡1
选项卡22
选项卡333

有默认值（非受控）

选项卡1
选项卡22
选项卡333

有固定值（受控）

选项卡1
选项卡22
选项卡333

一般用法

选项卡1
选项卡22
选项卡333

v-model 用法

选项卡1
选项卡22
选项卡333
<template>
  <h4>无默认值</h4>
  <i-tabs>
    <i-tabs-item>选项卡1</i-tabs-item>
    <i-tabs-item>选项卡22</i-tabs-item>
    <i-tabs-item>选项卡333</i-tabs-item>
  </i-tabs>

  <h4>有默认值（非受控）</h4>
  <i-tabs :defaultActive="active">
    <i-tabs-item>选项卡1</i-tabs-item>
    <i-tabs-item>选项卡22</i-tabs-item>
    <i-tabs-item>选项卡333</i-tabs-item>
  </i-tabs>

  <h4>有固定值（受控）</h4>
  <i-tabs :modelValue="active">
    <i-tabs-item>选项卡1</i-tabs-item>
    <i-tabs-item>选项卡22</i-tabs-item>
    <i-tabs-item>选项卡333</i-tabs-item>
  </i-tabs>

  <h4>一般用法</h4>
  <i-tabs :modelValue="active" @change="handleChange">
    <i-tabs-item>选项卡1</i-tabs-item>
    <i-tabs-item>选项卡22</i-tabs-item>
    <i-tabs-item>选项卡333</i-tabs-item>
  </i-tabs>

  <h4>v-model 用法</h4>
  <i-tabs v-model="active">
    <i-tabs-item>选项卡1</i-tabs-item>
    <i-tabs-item>选项卡22</i-tabs-item>
    <i-tabs-item>选项卡333</i-tabs-item>
  </i-tabs>
</template>

<script setup>
import { ref } from 'vue'

const active = ref(1)

const handleChange = (val) => {
  console.log(val)
  active.value = val
}
</script>
显示代码

卡片风格

通过 theme 属性指定卡片风格：

选项卡1
选项卡22
选项卡333
<template>
  <i-tabs defaultActive="2" theme="card">
    <i-tabs-item value="1">选项卡1</i-tabs-item>
    <i-tabs-item value="2">选项卡22</i-tabs-item>
    <i-tabs-item value="3">选项卡333</i-tabs-item>
  </i-tabs>
</template>
显示代码

禁用状态

通过 disabled 属性指定选项卡禁用：

全局禁用

选项卡1
选项卡22
选项卡333

单项禁用

选项卡1
选项卡22
选项卡333

卡片风格全局禁用

选项卡1
选项卡22
选项卡333

卡片风格单项禁用

选项卡1
选项卡22
选项卡333
<template>
  <h4>全局禁用</h4>
  <i-tabs disabled>
    <i-tabs-item>选项卡1</i-tabs-item>
    <i-tabs-item>选项卡22</i-tabs-item>
    <i-tabs-item>选项卡333</i-tabs-item>
  </i-tabs>
  <h4>单项禁用</h4>
  <i-tabs>
    <i-tabs-item>选项卡1</i-tabs-item>
    <i-tabs-item disabled>选项卡22</i-tabs-item>
    <i-tabs-item>选项卡333</i-tabs-item>
  </i-tabs>
  <h4>卡片风格全局禁用</h4>
  <i-tabs theme="card" disabled>
    <i-tabs-item>选项卡1</i-tabs-item>
    <i-tabs-item>选项卡22</i-tabs-item>
    <i-tabs-item>选项卡333</i-tabs-item>
  </i-tabs>
  <h4>卡片风格单项禁用</h4>
  <i-tabs theme="card">
    <i-tabs-item>选项卡1</i-tabs-item>
    <i-tabs-item disabled>选项卡22</i-tabs-item>
    <i-tabs-item>选项卡333</i-tabs-item>
  </i-tabs>
</template>
显示代码

Tabs Attributes

属性说明类型默认值
theme选项卡风格类型"normal"〡"card"normal
modelValue / v-model固定选中值（受控）string〡number--
defaultActive默认选中值（非受控）string〡number--
disabled全局禁用booleanfalse

Tabs Events

属性说明类型默认值
change点击选项卡时触发(value: string〡number) => void--

TabsItem Attributes

属性说明类型默认值
value单项值string〡number--
disabled单项禁用booleanfalse

TabsItem Events

属性说明类型默认值
click点击单项卡时触发(value?: string〡number) => void--
Last Updated:
Contributors: Leophen