TaroifyReact UI

    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默认选中标签的标识或索引值any0
    value当前选中标签的标识或索引值any0
    bordered是否显示外边框booleanfalse
    fixed是否固定在底部booleanfalse
    safeArea安全区域，可选值 top bottom，仅在fixed=true时有效string-
    placeholder固定在底部时，是否在标签位置生成一个等高的占位元素booleanfalse

    Tabbar Events

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

    Tabbar.TabItem Props

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

    主题定制

    样式变量

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

    名称默认值描述
    --tabbar-height50px * $hd-
    --tabbar-z-index1-
    --tabbar-background-colorvar(--white)-
    --tabbar-item-font-sizevar(--font-size-sm)-
    --tabbar-item-colorvar(--gray-7)-
    --tabbar-item-line-height1-
    --tabbar-item-icon-size22px * $hd-
    --tabbar-item-margin-bottom4px * $hd-
    --tabbar-item-active-colorvar(--blue)-
    --tabbar-item-active-background-colorvar(--white)-