Tabbar tab bar

introduce

Bottom navigation bar for switching between different pages.

Code Demo

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>

API

Tabbar Props

ParametersDescriptionTypeDefault value
v-modelThe name or index value of the currently selected tagnumber | string0
fixedWhether to be fixed at the bottombooleantrue
borderWhether to display the outer borderbooleantrue
z-indexelement z-indexnumber | string1
active-colorThe color of the selected tagstring#1989fa
inactive-colorThe color of unselected tagsstring#7d7e80
placeholderWhether to generate a placeholder element of equal height at the label position when fixed at the bottombooleanfalse
safe-area-inset-bottomWhether to enable bottom safe area adaptation, it is enabled by default when fixed is setbooleanfalse
before-changeCallback function before switching labels, return false to prevent switching, support returning Promise(name: number | string) => boolean | Promise<boolean>-

Tabbar Events

Event nameDescriptionCallback parameters
changeTriggered when switching tagsactive: number | string

TabbarItem Props

ParametersDescriptionTypeDefault value
nameTag name, as matching identifiernumber | stringIndex value of the current tag
iconIcon name or image link, equivalent to the name attribute of the Icon componentstring-
icon-prefixIcon class name prefix, equivalent to the class-prefix attribute of the Icon componentstringz-icon
dotWhether to display the small red dot in the upper right corner of the iconbooleanfalse
badgeThe content of the logo in the upper right corner of the iconnumber | string-
badge-propsCustomize the properties of the logo. The incoming object will be transparently passed to Badge component propsBadgeProps-

TabbarItem Slots

NameDescriptionParameters
iconcustom iconactive: boolean

Theme customization

Style variables

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

NameDefaultDescription
--z-tabbar-height100rpx-
--z-tabbar-z-index1-
--z-tabbar-backgroundvar(--z-background-2)-
--z-tabbar-item-font-sizevar(--z-font-size-sm)-
--z-tabbar-item-text-colorvar(--z-text-color)-
--z-tabbar-item-active-colorvar(--z-primary-color)-
--z-tabbar-item-active-backgroundvar(--z-background-2)-
--z-tabbar-item-line-height1-
--z-tabbar-item-icon-size44rpx-
--z-tabbar-item-icon-margin-bottomvar(--z-padding-base)-