跳到主要内容

Toolbar工具栏

把一组相关的控件收成一条：整条只占一个 Tab 停靠点，方向键在控件之间移动。放不下时沿主轴原生滚动。里面放按钮、开关按钮、分隔线、Spacer 都可以。

示例

横向

先 ⇥ 进入工具栏，再按 → ← 移动，Home / End 到两端。再按一次 ⇥ 直接离开。

工具栏只占一个 Tab 停靠点，进去之后用方向键移动。

纵向

orientation="vertical" 时改用 ↑ ↓。这里关掉了 loop：走到头不再回到另一端。

API

属性

属性类型默认值说明
orientation'horizontal' | 'vertical''horizontal'排列方向，同时决定用哪一对方向键。
gapResponsive<Space>2子项间距（间距档位）。
loopbooleantrue方向键走到头后回到另一端。
wrapbooleanfalse放不下时换行，而不是横向滚动。只对横向工具栏有效。
aria-labelstring—工具栏的名字。页面上有多条时必须给。
…restHTMLAttributes—ref、className、style 和其余原生属性透传到根节点。

无障碍

  • 根节点是 role="toolbar"，带 aria-orientation。记得给 aria-label 或 aria-labelledby。
  • roving tabindex：只有当前项能被 Tab 到，上次停在哪一项，下次 Tab 回来还在那一项。
  • ← → （纵向为 ↑ ↓）移动，Home / End 到两端。禁用的按钮会被跳过。
  • 焦点在文本输入框里时方向键留给光标，不会被工具栏拦走；带 Ctrl / Alt / ⌘ 的组合键也不拦。
  • 图标按钮各自要有 aria-label；纯分组用的分隔线传 decorative。