Taroify

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`，仅在`fixed=true`时有效	string	-
placeholder	固定在底部时，是否在标签位置生成一个等高的占位元素	boolean	`false`

Tabbar Events

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

Tabbar.TabItem Props

参数	说明	类型	默认值
value	标签值，作为匹配的标识符	any	-
icon	图标或图片	ReactNode	-
badge	图标上徽标的内容	boolean \| number \| string \| Badge \| ReactNode	-
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)	-