Tui Plus Vapor

Appearance

t-tabbar-item ​

TabbarItem 标签栏项

组件介绍 ​

t-tabbar-item 是底部导航组件的子组件，用于定义单个导航项的内容。

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

基础用法参考 demo/tabbar/tabbar.uvue，作为 t-tabbar 的子组件使用。

vue
<t-tabbar v-model="current">
  <t-tabbar-item>
    <t-icon name="home" :type="current === 0 ? 'primary' : ''"></t-icon>
    <text :class="current === 0 ? 'c-primary' : ''">首页</text>
  </t-tabbar-item>
  <t-tabbar-item>
    <t-icon name="search" :type="current === 1 ? 'primary' : ''"></t-icon>
    <text :class="current === 1 ? 'c-primary' : ''">发现</text>
  </t-tabbar-item>
  <t-tabbar-item>
    <view class="relative">
      <t-icon name="message" :type="current === 2 ? 'primary' : ''"></t-icon>
      <t-badge text="5" class="absolute -top-10 -right-10"></t-badge>
    </view>
    <text :class="current === 2 ? 'c-primary' : ''">消息</text>
  </t-tabbar-item>
</t-tabbar>

Props ​

该组件无特定 Props，继承通用属性。

Events ​

该组件无特定 Events。

Slots ​

插槽名说明
default默认插槽，放置导航项内容，通常包含图标和文字