Tabbar 底部导航栏

Layout · Interactive component

Bottom application navigation.

On-demand importwbbb-ui/components/tabbar

Basic Usage

Example code

<script setup lang="ts">
import { ref } from 'vue'
import { WbbbTabbar } from 'wbbb-ui/components/tabbar'
import 'wbbb-ui/styles/tabbar'

const value = ref('')
</script>

<template>
  <WbbbTabbar v-model="value" />
</template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

DefaultPressed选中Disabled

API Reference

Props

Property	Description	Type	Default	Required
activeColor	Sets the color used by the active state.	string	'var(--wbbb-color-primary)'	No
fixed	Fixes the component to its viewport position.	boolean	true	No
inactiveColor	Sets the color used by the inactive state.	string	'var(--wbbb-color-text-secondary)'	No
items	Provides the data items rendered by the component.	WbbbTabbarItem[]	() => []	No
modelValue	Provides the current value used by v-model.	string \| number	''	No
safeAreaInsetBottom	Adds padding for the device bottom safe area.	boolean	true	No
zIndex	Sets the stacking order of the component.	number	800	No

Events

• update:modelValue
• change

Slots

• default

Two-way binding

Supports v-model (modelValue).

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Use Playground to verify further state combinations and cross-platform behavior.