TabBar

tab-bar

移动端底部导航栏，带角标并避开底部安全区

用法

基础用法

items 驱动；非受控用 defaultValue 设初始项，激活项高亮 text-primary。

tsx

<TabBar
  defaultValue="home"
  items={[
    { key: "home", label: "首页", icon: <Home /> },
    { key: "find", label: "发现", icon: <Search /> },
    { key: "me", label: "我的", icon: <User /> },
  ]}
/>

角标与红点

item.badge 显示数字角标（优先于 dot），item.dot 显示红点。

tsx

<TabBar
  defaultValue="home"
  items={[
    { key: "home", label: "首页", icon: <Home /> },
    { key: "find", label: "发现", icon: <Search />, dot: true },
    { key: "plan", label: "日程", icon: <Calendar />, badge: 5 },
    { key: "me", label: "我的", icon: <User /> },
  ]}
/>

禁用项

item.disabled 置灰且不可点击。

tsx

<TabBar
  defaultValue="home"
  items={[
    { key: "home", label: "首页", icon: <Home /> },
    { key: "plan", label: "日程", icon: <Calendar />, disabled: true },
    { key: "me", label: "我的", icon: <User /> },
  ]}
/>

何时用

H5 / 移动端的全局主导航（首页/发现/我的等几个一级页签贴底切换）时用。临时性、单页内的悬浮操作入口用 Fab；一次性列出多个动作并要弹层确认用 ActionSheet。

导入

import { TabBar } from "@hulianui/ui"

Props

名称	类型	默认	说明
`items` *	`TabBarItem[]`	-	页签数据（见下）
`value`	`string`	-	受控激活 key
`defaultValue`	`string`	首项 key	非受控初始 key
`safeArea`	`boolean`	`true`	吃底部安全区 inset
`fixed`	`boolean`	`true`	fixed 贴底；false 则随文档流
`aria-label`	`string`	跟随 locale	导航区无障碍标签；显式传值优先
`className`	`string`	-	-

TabBarItem

名称	类型	默认	说明
key *	`string`	-	唯一键，也是 `value` 的取值
label *	`ReactNode`	-	页签文案
icon	`ReactNode`	-	默认态图标
activeIcon	`ReactNode`	复用 `icon`	激活态图标
dot	`boolean`	`false`	红点提示
badge	`ReactNode`	-	角标内容（数字 / 文本），优先于 `dot`
disabled	`boolean`	`false`	禁用该页签

Events

事件	类型	说明
`onChange`	`(key: string) => void`	切换页签回调

禁忌 / 坑

默认 fixed 贴视口底 + 吃底部安全区。放进手机框/容器内演示时须 fixed={false} 收进文档流，否则会飘到整页底部；容器内不需要安全区时再加 safeArea={false}。
badge 与 dot 同时给时 badge 优先。
导航区标签跟随 ConfigProvider locale：zhCN 为“底部导航”，enUS 为 “Bottom navigation”。

用法

基础用法

items 驱动；非受控用 defaultValue 设初始项，激活项高亮 text-primary。

tsx

<TabBar
  defaultValue="home"
  items={[
    { key: "home", label: "首页", icon: <Home /> },
    { key: "find", label: "发现", icon: <Search /> },
    { key: "me", label: "我的", icon: <User /> },
  ]}
/>

角标与红点

item.badge 显示数字角标（优先于 dot），item.dot 显示红点。

tsx

<TabBar
  defaultValue="home"
  items={[
    { key: "home", label: "首页", icon: <Home /> },
    { key: "find", label: "发现", icon: <Search />, dot: true },
    { key: "plan", label: "日程", icon: <Calendar />, badge: 5 },
    { key: "me", label: "我的", icon: <User /> },
  ]}
/>

禁用项

item.disabled 置灰且不可点击。

tsx

<TabBar
  defaultValue="home"
  items={[
    { key: "home", label: "首页", icon: <Home /> },
    { key: "plan", label: "日程", icon: <Calendar />, disabled: true },
    { key: "me", label: "我的", icon: <User /> },
  ]}
/>

Props

名称	类型	默认	说明
`items` *	`TabBarItem[]`	-	页签数据（见下）
`value`	`string`	-	受控激活 key
`defaultValue`	`string`	首项 key	非受控初始 key
`safeArea`	`boolean`	`true`	吃底部安全区 inset
`fixed`	`boolean`	`true`	fixed 贴底；false 则随文档流
`aria-label`	`string`	跟随 locale	导航区无障碍标签；显式传值优先
`className`	`string`	-	-

TabBarItem

名称	类型	默认	说明
key *	`string`	-	唯一键，也是 `value` 的取值
label *	`ReactNode`	-	页签文案
icon	`ReactNode`	-	默认态图标
activeIcon	`ReactNode`	复用 `icon`	激活态图标
dot	`boolean`	`false`	红点提示
badge	`ReactNode`	-	角标内容（数字 / 文本），优先于 `dot`
disabled	`boolean`	`false`	禁用该页签

事件

类型

说明

onChange

(key: string) => void

切换页签回调

禁忌 / 坑

默认 fixed 贴视口底 + 吃底部安全区。放进手机框/容器内演示时须 fixed={false} 收进文档流，否则会飘到整页底部；容器内不需要安全区时再加 safeArea={false}。

badge 与 dot 同时给时 badge 优先。

导航区标签跟随 ConfigProvider locale：zhCN 为“底部导航”，enUS 为 “Bottom navigation”。

TabBar

用法

基础用法

角标与红点

禁用项

何时用

导入

Props

Events

禁忌 / 坑

相关

TabBar

用法

基础用法

角标与红点

禁用项

何时用

导入

Props

Events

禁忌 / 坑

相关