COMPONENT 15 · Actions & Menus

工具栏

Toolbar

也叫Tool BarAction Bar操作栏NSToolbar

集中排列当前内容或应用的常用操作。

Collects frequently used actions for the current content or application.

ANATOMY & USAGE

结构与使用建议

组成部分

工具栏容器
操作按钮
可选分组或分隔线

适合使用

同一工作区有多个高频操作时。

不建议使用

只有一个主要动作或操作不相关时。

键盘与无障碍

使用 toolbar 角色和名称；支持方向键在内部移动且图标按钮具有可访问名称。

DESCRIBE IT TO AI

这样告诉编程助手

实现工具栏（Toolbar）：集中排列当前内容或应用的常用操作。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<div class="demo stack">
  <div class="row" role="toolbar" aria-label="文字格式">
    <button type="button" aria-label="加粗">
      <strong>B</strong>
    </button>
    <button type="button" aria-label="斜体">
      <em>I</em>
    </button>
    <button type="button" aria-label="添加链接">🔗</button>
  </div>
  <output>尚未选择格式</output>
</div>