TabBar
tab-bar底部导航栏 · items 驱动受控/非受控 + 激活 text-primary/aria-current + 角标/红点 + 吃底部安全区(零依赖·H5 主导航)
用法
基础用法
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。
导入
ts
import { TabBar } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
items * | TabBarItem[] | — | 页签数据（见下） |
value | string | — | 受控激活 key |
defaultValue | string | 首项 key | 非受控初始 key |
safeArea | boolean | true | 吃底部安全区 inset |
fixed | boolean | true | fixed 贴底；false 则随文档流 |
className | string | — | — |
TabBarItem：key: string · label: ReactNode · icon?: ReactNode（默认态图标）· activeIcon?: ReactNode（激活态，缺省复用 icon）· dot?: boolean（红点）· badge?: ReactNode（角标，优先于 dot）· disabled?: boolean。
Events
| 事件 | 类型 | 说明 |
|---|---|---|
onChange | (key: string) => void | 切换页签回调 |
禁忌 / 坑
- 默认
fixed贴视口底 + 吃底部安全区。放进手机框/容器内演示时须fixed={false}收进文档流，否则会飘到整页底部；容器内不需要安全区时再加safeArea={false}。 badge与dot同时给时badge优先。
相关
Fab · ActionSheet · Picker · SwipeAction · PullToRefresh · SafeArea