Tabbar tab bar

introduce

Bottom navigation bar for switching between different pages.

Basic usage

v-model is bound to the index value of the selected tag by default, and the selected tag can be switched by modifying v-model.

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

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

Match by name

When a tag specifies a name attribute, the value of v-model is the name of the current tag.

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

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

Logo Tips

After setting the dot attribute, a small red dot will be displayed in the upper right corner of the icon; after setting the badge attribute, the corresponding logo will be displayed in the upper right corner of the icon.

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

Custom icon

Customize the icon through the icon slot, and you can use slot-scope to determine whether the label is selected.

<z-tabbar :fixed="false" v-model="active3">
   <z-tabbar-item badge="3">
     <text>Customized</text>
     <template #icon="props">
       <image
         class="image"
         :src="props.active ? icon.active : icon.inactive"
       />
     </template>
   </z-tabbar-item>
   <z-tabbar-item icon="search">Tab</z-tabbar-item>
   <z-tabbar-item icon="setting">Tab</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'
}

Custom color

Set the color of selected tags through the active-color attribute, and set the color of unselected tags through the inactive-color attribute.

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

Listen for switching events

Use the change event to monitor changes in the selected tag.

<z-tabbar :fixed="false" v-model="active5" @change="onChange">
   <z-tabbar-item icon="home">Tab 1</z-tabbar-item>
   <z-tabbar-item icon="search">Tab 2</z-tabbar-item>
   <z-tabbar-item icon="bell">Tab 3</z-tabbar-item>
   <z-tabbar-item icon="setting">Tab 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(`Tag ${index + 1}`)
}

background

Specify the background via the background attribute.

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

Tabbar Props

Tabbar Events

TabbarItem Props

TabbarItem Slots

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.