TabBar底部标签栏
手机上的主导航：一个放大的分段选择，悬在页面底部，左右留缝并避开安全区。选中块在各项之间滑动；旁边可以带一个主操作按钮。只在窄屏用，宽屏换成 AppShell 的侧栏。
示例
手机里的样子
默认 position="fixed" 贴着视口底部。这里为了放进演示框，用的是 position="absolute"。
只有图标、带主操作和徽标
图标和文字是横排的，带文字时放 2–3 项；4 项以上改成只有图标。聚焦后按 ← → 在各项之间移动。
API
TabBar 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | string | — | 当前项（受控）。 |
defaultValue | string | — | 初始项（非受控）。 |
onChange | (value: string) => void | — | 切换时触发，参数是新值。 |
action | ReactNode | — | 标签栏旁边的主操作位，比如“新建”按钮。 |
position | 'fixed' | 'absolute' | 'static' | 'fixed' | fixed 贴视口底部；absolute 贴最近的定位祖先；static 不定位。 |
aria-label | string | — | 导航的名字。 |
…rest | HTMLAttributes | — | ref、className、style 和其余原生属性透传到根节点。 |
TabBarItem 属性（也可以写成 TabBar.Item）
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value* | string | — | 这一项的值。 |
icon | ReactNode | — | 图标。 |
children | ReactNode | — | 文字。 |
label | string | — | 只显示图标时的无障碍名称（没有 children 时必填）。 |
badge | ReactNode | — | 徽标位（未读数之类）。 |
href | string | — | 有 href 渲染成 <a>，否则是 <button>。 |
as | ElementType | — | 自定义渲染的元素 / 组件。 |
disabled | boolean | false | 禁用。 |
无障碍
- 渲染成
<nav>，当前项带aria-current="page"。它是导航，不是tablist：切换的是页面而不是同一页里的面板。 - 每一项都能 Tab 到；另外 ← → / Home / End 可以在项之间移动焦点。Enter 或 Space 选中。
- 只有图标的项必须给
label；主操作按钮是图标按钮时同样要有aria-label。 - 各项高度跟随
--ok-h-lg，触屏上自动加高。徽标只有数字时，建议在项的文字或label里把含义说全（“消息，3 条未读”）。 - 页面内容底部要留出位置（约 116px 加安全区），否则最后一条内容会被挡住、键盘聚焦到它时也看不见。