TabBar 底部导航

移动端底部 TabBar，支持图标与 badge。

基础用法

TabBar

示例即将加载...

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('home')

const items = [
  { value: 'home', label: 'Home', iconClass: 'i-carbon-home' },
  { value: 'search', label: 'Search', iconClass: 'i-carbon-search', badge: 3 },
  { value: 'profile', label: 'Me', iconClass: 'i-carbon-user' },
]
</script>

<template>
  <div style="width: 360px; height: 220px; border: 1px solid var(--tx-border-color); border-radius: 12px; overflow: hidden; position: relative;">
    <div style="padding: 16px; color: var(--tx-text-color-secondary);">
      Active: {{ value }}
    </div>

    <TxTabBar v-model="value" :items="items" />
  </div>
</template>

API

Props

属性名	类型	默认值	说明
`modelValue`	`string \| number`	`''`	当前值（v-model）
`items`	`TabBarItem[]`	`[]`	数据源
`fixed`	`boolean`	`true`	是否 fixed 底部
`safeAreaBottom`	`boolean`	`true`	是否预留底部安全区
`disabled`	`boolean`	`false`	禁用
`zIndex`	`number`	`2000`	z-index

TabBarItem

字段	类型	说明
`value`	`string \| number`	唯一值
`label`	`string`	文案
`iconClass`	`string`	图标 class
`badge`	`string \| number`	badge
`disabled`	`boolean`	禁用

Events

事件名	参数	说明
`update:modelValue`	`(value)`	v-model 更新
`change`	`(value)`	值变化