Tabbar - Vant 4

Tabbar

Intro

Used to switch between different pages.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { Tabbar, TabbarItem } from'vant'; const app = createApp(); app.use(Tabbar); app.use(TabbarItem);

Usage

Basic Usage

import { ref } from'vue'; exportdefault { setup() { const active = ref(0); return { active }; }, };

Match by name

import { ref } from'vue'; exportdefault { setup() { const active = ref('home'); return { active }; }, };

Show Badge

Custom Icon

Use icon slot to custom icon.

import { ref } from'vue'; exportdefault { setup() { const active = ref(0); const icon = { active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png', inactive: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png', }; return { icon, active, }; }, };

Custom Color

Change Event

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const active = ref(0); constonChange = (index) => showToast(`Tab ${index}`); return { icon, onChange, }; }, };

Route Mode

API

Tabbar Props

Attribute	Description	Type	Default
v-model	Identifier of current tab	*number	string*
fixed	Whether to fixed bottom	boolean	true
border	Whether to show border	boolean	true
z-index	Z-index	*number	string*
active-color	Color of active tab item	string	#1989fa

| inactive-color | Color of inactive tab item | string | #7d7e80 |

| route | Whether to enable route mode | boolean | false | | placeholder | Whether to generate a placeholder element when fixed | boolean | false | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | boolean | false | | before-change | Callback function before changing tab, return false to prevent change, support return Promise | (name: number | string) => boolean | Promise<boolean> | - |

Tabbar Events

Event	Description	Arguments
change	Emitted when changing active tab	*active: number

TabbarItem Props

Attribute	Description	Type	Default
name	Identifier	*number	string*
icon	Icon name	string	-
icon-prefix	Icon className prefix	string	van-icon
dot	Whether to show red dot	boolean	-
badge	Content of the badge	*number	string*
badge-props	Props of Badge, see Badge - props	BadgeProps	-

| url | Link | string | - | | to | The target route should navigate to when clicked on, same as the to prop of Vue Router | string | object | - |

| replace | If true, the navigation will not leave a history record | boolean | false |

TabbarItem Slots

Name	Description	SlotProps
icon	Custom icon	active: boolean

Types

The component exports the following type definitions:

importtype { TabbarProps, TabbarItemProps } from'vant';

Theming

CSS Variables

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

Name	Default Value	Description
--van-tabbar-height	50px	-
--van-tabbar-z-index	1	-
--van-tabbar-background	var(--van-background-2)	-
--van-tabbar-item-font-size	var(--van-font-size-sm)	-
--van-tabbar-item-text-color	var(--van-text-color)	-
--van-tabbar-item-active-color	var(--van-primary-color)	-
--van-tabbar-item-active-background	var(--van-background-2)	-
--van-tabbar-item-line-height	1	-
--van-tabbar-item-icon-size	22px	-
--van-tabbar-item-icon-margin-bottom	var(--van-padding-base)	-