Toolbar 工具栏
工具按钮组容器:role="toolbar" + aria-label,Tab 进入后方向键在按钮间移动(roving tabindex,只聚焦当前项)。
基础用法
基础用法(原生按钮)
示例代码
与 oas-button 组合
slot 里放 oas-button(自定义元素自动参与 roving),用 data-toolbar-ignore 排除分隔元素。
oas-button + 分隔
示例代码
禁用项
disabled / aria-disabled 的按钮不参与方向键导航(roving 跳过)。
禁用项
示例代码
API
插槽
| 名称 | 说明 |
|---|---|
| 默认 | — |
- 宿主
role="toolbar",aria-label走 locale key(toolbar.label,默认「工具栏」) - 参与 roving 的子元素:native 控件(
button/input/select/textarea/a[href])、交互role、自定义元素(tag 含-);用data-toolbar-ignore或aria-hidden排除,disabled/aria-disabled自动跳过 - 键盘:
Tab进入(仅当前项可 Tab 到达),←/→(或↑/↓)在按钮间移动,Home/End跳转首末