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
Parameters | Description | Type | Default value |
---|---|---|---|
v-model | The name or index value of the currently selected tag | number | string | 0 |
fixed | Whether to be fixed at the bottom | boolean | true |
border | Whether to display the outer border | boolean | true |
z-index | element z-index | number | string | 1 |
active-color | The color of the selected tag | string | #1989fa |
inactive-color | The color of unselected tags | string | #7d7e80 |
placeholder | Whether to generate a placeholder element of equal height at the label position when fixed at the bottom | boolean | false |
safe-area-inset-bottom | Whether to enable bottom safe area adaptation, it is enabled by default when fixed is set | boolean | false |
before-change | Callback function before switching labels, return false to prevent switching, support returning Promise | (name: number | string) => boolean | Promise<boolean> | - |
Tabbar Events
Event name | Description | Callback parameters |
---|---|---|
change | Triggered when switching tags | active: number | string |
TabbarItem Props
Parameters | Description | Type | Default value |
---|---|---|---|
name | Tag name, as matching identifier | number | string | Index value of the current tag |
icon | Icon name or image link, equivalent to the name attribute of the Icon component | string | - |
icon-prefix | Icon class name prefix, equivalent to the class-prefix attribute of the Icon component | string | z-icon |
dot | Whether to display the small red dot in the upper right corner of the icon | boolean | false |
badge | The content of the logo in the upper right corner of the icon | number | string | - |
badge-props | Customize the properties of the logo. The incoming object will be transparently passed to Badge component props | BadgeProps | - |
TabbarItem Slots
Name | Description | Parameters |
---|---|---|
icon | custom icon | active: 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.
Name | Default | Description |
---|---|---|
--z-tabbar-height | 100rpx | - |
--z-tabbar-z-index | 1 | - |
--z-tabbar-background | var(--z-background-2) | - |
--z-tabbar-item-font-size | var(--z-font-size-sm) | - |
--z-tabbar-item-text-color | var(--z-text-color) | - |
--z-tabbar-item-active-color | var(--z-primary-color) | - |
--z-tabbar-item-active-background | var(--z-background-2) | - |
--z-tabbar-item-line-height | 1 | - |
--z-tabbar-item-icon-size | 44rpx | - |
--z-tabbar-item-icon-margin-bottom | var(--z-padding-base) | - |