Tabbar 标签栏

介绍

底部导航栏，用于在不同页面之间进行切换。

基础用法

v-model 默认绑定选中标签的索引值，通过修改 v-model 即可切换选中的标签。

<z-tabbar :fixed="false" v-model="active">
  <z-tabbar-item icon="home">标签</z-tabbar-item>
  <z-tabbar-item icon="search">标签</z-tabbar-item>
  <z-tabbar-item icon="bell">标签</z-tabbar-item>
  <z-tabbar-item icon="setting">标签</z-tabbar-item>
</z-tabbar>

import { ref } from 'vue';
const active = ref(0);

通过名称匹配

在标签指定 name 属性的情况下，v-model 的值为当前标签的 name。

<z-tabbar :fixed="false" v-model="activeName">
  <z-tabbar-item name="home" icon="home"> 标签 </z-tabbar-item>
  <z-tabbar-item name="search" icon="search"> 标签 </z-tabbar-item>
  <z-tabbar-item name="friends" icon="bell"> 标签 </z-tabbar-item>
  <z-tabbar-item name="setting" icon="setting"> 标签 </z-tabbar-item>
</z-tabbar>

import { ref } from 'vue';
const active = ref('home');

徽标提示

设置 dot 属性后，会在图标右上角展示一个小红点；设置 badge 属性后，会在图标右上角展示相应的徽标。

<z-tabbar :fixed="false" v-model="active2">
  <z-tabbar-item icon="home">标签</z-tabbar-item>
  <z-tabbar-item icon="search" dot>标签</z-tabbar-item>
  <z-tabbar-item icon="bell" badge="5"> 标签 </z-tabbar-item>
  <z-tabbar-item icon="setting" badge="20"> 标签 </z-tabbar-item>
</z-tabbar>

自定义图标

通过 icon 插槽自定义图标，可以通过 slot-scope 判断标签是否选中。

<z-tabbar :fixed="false" v-model="active3">
  <z-tabbar-item badge="3">
    <text>自定义</text>
    <template #icon="props">
      <image
        class="image"
        :src="props.active ? icon.active : icon.inactive"
      />
    </template>
  </z-tabbar-item>
  <z-tabbar-item icon="search">标签</z-tabbar-item>
  <z-tabbar-item icon="setting">标签</z-tabbar-item>
</z-tabbar>

import { ref } from 'vue';
const active = ref(0);
const icon = {
  active: 'https://cdn.zebraui.com/zebra-ui/images/assets/demo-select.png',
  inactive: 'https://cdn.zebraui.com/zebra-ui/images/assets/demo-noselect.png'
}

自定义颜色

通过 active-color 属性设置选中标签的颜色，通过 inactive-color 属性设置未选中标签的颜色。

<z-tabbar :fixed="false" v-model="active4" active-color="#ee0a24">
  <z-tabbar-item icon="home">标签</z-tabbar-item>
  <z-tabbar-item icon="search">标签</z-tabbar-item>
  <z-tabbar-item icon="bell">标签</z-tabbar-item>
  <z-tabbar-item icon="setting">标签</z-tabbar-item>
</z-tabbar>

监听切换事件

通过 change 事件来监听选中标签的变化。

<z-tabbar :fixed="false" v-model="active5" @change="onChange">
  <z-tabbar-item icon="home">标签 1</z-tabbar-item>
  <z-tabbar-item icon="search">标签 2</z-tabbar-item>
  <z-tabbar-item icon="bell">标签 3</z-tabbar-item>
  <z-tabbar-item icon="setting">标签 4</z-tabbar-item>
</z-tabbar>

import { ref } from 'vue';
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const onChange = (index: number) => {
  toast.showToast(`标签 ${index + 1}`)
}

背景

通过background属性指定背景。

<z-tabbar :fixed="false" v-model="active6" background>
  <z-tabbar-item icon="home">标签</z-tabbar-item>
  <z-tabbar-item icon="search">标签</z-tabbar-item>
  <z-tabbar-item icon="bell">标签</z-tabbar-item>
  <z-tabbar-item icon="setting" badge="5">标签</z-tabbar-item>
</z-tabbar>

Tabbar Props

Tabbar Events

TabbarItem Props

TabbarItem Slots

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。