---
title: TabBar 标签栏
description: 用于在不同功能模块之间进行快速切换，位于页面底部。
spline: base
isComponent: true
toc: false
---

## 基本用法

通过 `value` 可设置当前选中的标签项，支持语法糖 `v-model`或 `v-model:value`  <br/>

可通过 `icon` 属性设置标签栏的每项图标，支持 `slot` 和 `function` 传入 

{{ base }}

### 带徽章标签栏

通过 `badgeProps` 属性可透传徽标属性，设置标签项右上角提示信息

{{ badge-props }}

### 纯文本标签栏

{{ text }}

### 双层级纯文本标签栏

通过 `sub-tab-bar` 属性可以设置标签栏的二级菜单，通过点击标签项可触发对应二级菜单

{{ text-spread }}

### 纯图标标签栏

{{ pure-icon }}


