/*! For license information please see 4624.41278eca.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["4624"],{75363:function(s,a,n){"use strict";n.r(a);var t=n("80681");let l=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Tabbar

\n

Intro

\n

Used to switch between different pages.

\n

Install

\n

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

\n
import { createApp } from 'vue';\nimport { Tabbar, TabbarItem } from 'vant';\n\nconst app = createApp();\napp.use(Tabbar);\napp.use(TabbarItem);\n
\n

Usage

\n

Basic Usage

\n
<van-tabbar v-model="active">\n  <van-tabbar-item icon="home-o">Tab</van-tabbar-item>\n  <van-tabbar-item icon="search">Tab</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">Tab</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">Tab</van-tabbar-item>\n</van-tabbar>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const active = ref(0);\n    return { active };\n  },\n};\n
\n

Match by name

\n
<van-tabbar v-model="active">\n  <van-tabbar-item name="home" icon="home-o">Tab</van-tabbar-item>\n  <van-tabbar-item name="search" icon="search">Tab</van-tabbar-item>\n  <van-tabbar-item name="friends" icon="friends-o">Tab</van-tabbar-item>\n  <van-tabbar-item name="setting" icon="setting-o">Tab</van-tabbar-item>\n</van-tabbar>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const active = ref('home');\n    return { active };\n  },\n};\n
\n

Show Badge

\n
<van-tabbar v-model="active">\n  <van-tabbar-item icon="home-o">Tab</van-tabbar-item>\n  <van-tabbar-item icon="search" dot>Tab</van-tabbar-item>\n  <van-tabbar-item icon="friends-o" badge="5">Tab</van-tabbar-item>\n  <van-tabbar-item icon="setting-o" badge="20">Tab</van-tabbar-item>\n</van-tabbar>\n
\n

Custom Icon

\n

Use icon slot to custom icon.

\n
<van-tabbar v-model="active">\n  <van-tabbar-item badge="3">\n    <span>Custom</span>\n    <template #icon="props">\n      <img :src="props.active ? icon.active : icon.inactive" />\n    </template>\n  </van-tabbar-item>\n  <van-tabbar-item icon="search">Tab</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">Tab</van-tabbar-item>\n</van-tabbar>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const active = ref(0);\n    const icon = {\n      active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n      inactive:\n        'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n    };\n    return {\n      icon,\n      active,\n    };\n  },\n};\n
\n

Custom Color

\n
<van-tabbar v-model="active" active-color="#ee0a24">\n  <van-tabbar-item icon="home-o">Tab</van-tabbar-item>\n  <van-tabbar-item icon="search">Tab</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">Tab</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">Tab</van-tabbar-item>\n</van-tabbar>\n
\n

Change Event

\n
<van-tabbar v-model="active" @change="onChange">\n  <van-tabbar-item icon="home-o">Tab 1</van-tabbar-item>\n  <van-tabbar-item icon="search">Tab 2</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">Tab 3</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">Tab 4</van-tabbar-item>\n</van-tabbar>\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const active = ref(0);\n    const onChange = (index) => showToast(`Tab ${index}`);\n    return {\n      icon,\n      onChange,\n    };\n  },\n};\n
\n

Route Mode

\n
<router-view />\n\n<van-tabbar route>\n  <van-tabbar-item replace to="/home" icon="home-o">Tab</van-tabbar-item>\n  <van-tabbar-item replace to="/search" icon="search">Tab</van-tabbar-item>\n</van-tabbar>\n
\n

API

\n

Tabbar Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
v-modelIdentifier of current tabnumber | string0
fixedWhether to fixed bottombooleantrue
borderWhether to show borderbooleantrue
z-indexZ-indexnumber | string1
active-colorColor of active tab itemstring#1989fa
inactive-colorColor of inactive tab itemstring#7d7e80
routeWhether to enable route modebooleanfalse
placeholderWhether to generate a placeholder element when fixedbooleanfalse
safe-area-inset-bottomWhether to enable bottom safe area adaptationbooleanfalse
before-changeCallback function before changing tab, return false to prevent change, support return Promise(name: number | string) => boolean | Promise<boolean>-
\n

Tabbar Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
changeEmitted when changing active tabactive: number | string
\n

TabbarItem Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
nameIdentifiernumber | stringItem index
iconIcon namestring-
icon-prefixIcon className prefixstringvan-icon
dotWhether to show red dotboolean-
badgeContent of the badgenumber | string\'\'
badge-propsProps of Badge, see Badge - propsBadgeProps-
urlLinkstring-
toThe target route should navigate to when clicked on, same as the to prop of Vue Routerstring | object-
replaceIf true, the navigation will not leave a history recordbooleanfalse
\n

TabbarItem Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionSlotProps
iconCustom iconactive: boolean
\n

Types

\n

The component exports the following type definitions:

\n
import type { TabbarProps, TabbarItemProps } from 'vant';\n
\n

Theming

\n

CSS Variables

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-tabbar-height50px-
--van-tabbar-z-index1-
--van-tabbar-backgroundvar(--van-background-2)-
--van-tabbar-item-font-sizevar(--van-font-size-sm)-
--van-tabbar-item-text-colorvar(--van-text-color)-
--van-tabbar-item-active-colorvar(--van-primary-color)-
--van-tabbar-item-active-backgroundvar(--van-background-2)-
--van-tabbar-item-line-height1-
--van-tabbar-item-icon-size22px-
--van-tabbar-item-icon-margin-bottomvar(--van-padding-base)-
\n
'},null,8,l))}}}]);