BottomNavigation 底部导航
移动端底部导航栏:role="tablist" + 每项 role="tab" + aria-selected 同步,键盘左右移动焦点(roving tabindex)、Enter/Space 选中,激活项主色 + 图标,顶部细分隔线。
默认是静态布局;需要固定到屏幕底部时加
fixed属性(position: fixed; bottom: 0,建议放在body直接子级避免被滚动容器带偏)。
基础用法
items 传 JSON 数组 [{ label, value, icon? }],icon 取 @oas-isui/icons 的 iconRegistry 图标名;未指定 value 时默认激活第一项。
基础用法
示例代码
受控 value
value 属性受控:外部设置即切换激活项,组件交互也会写回属性并派发 oas-change。
受控切换
示例代码
禁用项
disabled 项 aria-disabled 同步、不可点击选中,键盘方向键自动跳过。
禁用项
示例代码
固定底部(fixed)
加 fixed 属性固定在视口底部(bottom: 0)。演示页为避免遮挡内容使用静态布局;实际移动端场景请用 fixed。
fixed 示意(此处保持 static)
示例代码
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
fixed | 固定到视口底部(position: fixed; bottom: 0) | boolean | — |
items | 导航项 JSON | string | [] |
value | 激活项 value,未指定默认激活第一个可用项 | — | — |
事件
| 事件 | 说明 |
|---|---|
oas-change | 切换激活项,detail: { value } |
BottomNavItem 字段:
| 字段 | 说明 | 类型 |
|---|---|---|
label | 文案 | string |
value | 值(唯一标识) | string |
icon | 图标名(@oas-isui/icons 的 iconRegistry 键) | string |
disabled | 禁用(不可选中、键盘跳过) | boolean |
行为:role="tablist" + role="tab" + aria-selected / aria-disabled 同步;roving tabindex 仅激活项可聚焦;方向键(左右/上下)在可用项间循环移动焦点(Home/End 首尾),Enter/Space 选中当前焦点项;点击已激活项不重复派发;空 items 渲染空 tablist 不报错。激活项主色 + 图标(iconRegistry 内联 SVG,跟随 currentColor),顶部细分隔线。