• Vant React

Tabbar 标签栏

介绍

底部导航栏，用于在不同页面之间进行切换。

引入

import { Tabbar } from "@taroify/core"

代码演示

基础用法

import { Tabbar } from "@taroify/core"
import { FriendsOutlined, HomeOutlined, Search, SettingOutlined } from "@taroify/icons"

function BasicTabbar() {
  return (
    <Tabbar>
      <Tabbar.TabItem icon={<HomeOutlined />}>标签</Tabbar.TabItem>
      <Tabbar.TabItem icon={<Search />}>标签</Tabbar.TabItem>
      <Tabbar.TabItem icon={<FriendsOutlined />}>标签</Tabbar.TabItem>
      <Tabbar.TabItem icon={<SettingOutlined />}>标签</Tabbar.TabItem>
    </Tabbar>
  )
}

通过标识匹配

在标签 Tabbar.TabItem 指定 value 属性的情况下，value 的值为当前标签的 value。

import { Tabbar } from "@taroify/core"
import { FriendsOutlined, HomeOutlined, Search, SettingOutlined } from "@taroify/icons"

function KeyTabbar() {
  return (
    <Tabbar defaultValue="1">
      <Tabbar.TabItem value="1" icon={<HomeOutlined />}>
        标签
      </Tabbar.TabItem>
      <Tabbar.TabItem value="2" icon={<Search />}>
        标签
      </Tabbar.TabItem>
      <Tabbar.TabItem value="3" icon={<FriendsOutlined />}>
        标签
      </Tabbar.TabItem>
      <Tabbar.TabItem value="4" icon={<SettingOutlined />}>
        标签
      </Tabbar.TabItem>
    </Tabbar>
  )
}

徽标提示

设置 badge 属性为 true 后，会在图标右上角展示一个小红点；设置 badge 属性为 number 后，会在图标右上角展示相应的徽标。

import { Badge, Tabbar } from "@taroify/core"
import { FriendsOutlined, HomeOutlined, Search, SettingOutlined } from "@taroify/icons"

function BadgeTabbar() {
  return (
    <Tabbar>
      <Tabbar.TabItem icon={<HomeOutlined />}>标签</Tabbar.TabItem>
      <Tabbar.TabItem badge icon={<Search />}>
        标签
      </Tabbar.TabItem>
      <Tabbar.TabItem badge="5" icon={<FriendsOutlined />}>
        标签
      </Tabbar.TabItem>
      <Tabbar.TabItem badge={<Badge content={100} max={99} />} icon={<SettingOutlined />}>
        标签
      </Tabbar.TabItem>
    </Tabbar>
  )
}

自定义颜色

通过 css 设置设置选中或未选择标签的颜色。

import { Tabbar } from "@taroify/core"
import { FriendsOutlined, HomeOutlined, Search, SettingOutlined } from "@taroify/icons"

function TabbarWithCustomColor() {
  return (
    <Tabbar className="custom-color">
      <Tabbar.TabItem icon={<HomeOutlined />}>标签</Tabbar.TabItem>
      <Tabbar.TabItem icon={<Search />}>标签</Tabbar.TabItem>
      <Tabbar.TabItem icon={<FriendsOutlined />}>标签</Tabbar.TabItem>
      <Tabbar.TabItem icon={<SettingOutlined />}>标签</Tabbar.TabItem>
    </Tabbar>
  )
}
.custom-color {
  --tabbar-item-color: #000;
  --tabbar-item-active-color: #ee0a24;
}

API

Tabbar Props

参数 说明 类型 默认值
defaultValue 默认选中标签的标识或索引值 any 0
value 当前选中标签的标识或索引值 any 0
bordered 是否显示外边框 boolean false
fixed 是否固定在底部 boolean false
safeArea 安全区域，可选值 top bottom string -
placeholder 固定在底部时，是否在标签位置生成一个等高的占位元素 boolean false

Tabbar Events

事件名 说明 回调参数
onChange 切换标签时触发 value: any

Tabbar.TabItem Props

参数 说明 类型 默认值
value 标签值，作为匹配的标识符 any -
icon 图标或图片 ReactNode -
badge 图标右上角徽标的内容 _boolean \ number \
children 标签名 ReactNode -

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称 默认值 描述
—tabbar-height 50px * $hd -
—tabbar-z-index 1 -
—tabbar-background-color var(—white) -
—tabbar-item-font-size var(—font-size-sm) -
—tabbar-item-color var(—gray-7) -
—tabbar-item-line-height 1 -
—tabbar-item-icon-size 22px * $hd -
—tabbar-item-margin-bottom 4px * $hd -
—tabbar-item-active-color var(—blue) -
—tabbar-item-active-background-color var(—white) -