ui-tabs 标签页组

版本：v2.3.11

标签页组件用于切换不同的内容面板，支持自定义样式、动画效果等

基本使用

<template>
  <div class="tabs-demo">
    <ui-tabs v-model:active="activeTab">
      <ui-tab-item label="标签1" name="1">
        <div style="padding: 20px;">
          这是标签1的内
        </div>
      </ui-tab-item>
      <ui-tab-item label="标签2" name="2">
        <div style="padding: 20px;">
          这是标签2的内
        </div>
      </ui-tab-item>
      <ui-tab-item label="标签3" name="3">
        <div style="padding: 20px;">
          这是标签3的内
        </div>
      </ui-tab-item>
    </ui-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const activeTab = ref('1');
</script>

<style scoped>
.tabs-demo {
  padding: 20px;
}
</style>

Props

Tabs

参数	类型	默认值	说明
active	String/Number	0	当前激活的标签
type	String	'line'	标签类型，可选值：line、card
direction	String	'horizontal'	标签方向，可选值：horizontal、vertical
color	String	'#1989fa'	标签激活颜
disabled	Boolean	false	是否禁用所有标
animated	Boolean	true	是否启用切换动画
swipeable	Boolean	false	是否支持滑动切换

TabItem

参数	类型	默认值	说明
name	String/Number	-	标签名，唯一标识
label	String	-	标签文本
disabled	Boolean	false	是否禁用该标
icon	String	-	标签图标

Events

事件	说明	回调参数
change	标签切换时触	(name: String/Number) 当前激活的标签
click	点击标签时触	(name: String/Number) 当前点击的标签名

Slots

TabItem

名称	说明
default	标签内容
label	自定义标签文

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/functional/tabs/tabs