Toolbar 工具栏
/TOOL-bar/ · noun · 操作类模式 · #127
一排按钮（大多是图标），放 App 或窗口里最常用的命令：编辑器里的加粗、斜体、插入链接，照片 App 里的返回、分享、删除。它在窗口或屏幕的顶部或底部；放不下的命令收进“更多”（⋯）菜单。Office 的功能区（ribbon）就是把很多条工具栏叠成选项卡。
你可能会这样叫它
- “窗口顶上的一排图标”
- “有加粗、斜体、下划线的那条栏”
- “iPhone App 底部的一排按钮”
- “格式栏”
- “App 里的图标栏”
……它的名字是 工具栏（Toolbar）。
常见问题
工具栏是什么？
工具栏（toolbar）是一排按钮，大多是图标，让你一下就能用到软件里最常用的命令，比如保存、撤销、加粗、分享。它在窗口或屏幕的顶部或底部。菜单栏是一排文字菜单，点开才看到命令；工具栏则是直接能点的按钮。
工具栏怎么调出来？
先看软件的“视图”（View）菜单，大多数软件在那里有显示或隐藏工具栏的开关；Mac 上很多 App 是“显示”>“显示工具栏”，访达窗口只开一个标签页时也可以按 Option-Command-T。Windows 版 Office 的功能区收起来了按 Ctrl+F1（Mac 上是 Command-Option-R）；浏览器的书签栏用 Ctrl+Shift+B（Mac 上是 Command-Shift-B）切换。
代码里叫什么
| Web (ARIA) | role="toolbar" aria-label aria-pressed |
|---|---|
| SwiftUI | .toolbar ToolbarItem ToolbarItemGroup |
| UIKit | UIToolbar UIBarButtonItem |
| macOS (AppKit) | NSToolbar NSToolbarItem |
| Android | Toolbar MaterialToolbar |
| Windows (WinUI) | CommandBar AppBarButton |
| Flutter | AppBar BottomAppBar |
复制给 AI 编程工具
在这个编辑器上方加一条工具栏：一行图标按钮，按用途分组（文字样式、列表、插入），组与组之间用细分隔线隔开；每个按钮都有悬停提示和无障碍名称，加粗这类开关用 aria-pressed 表示是否按下。用 role="toolbar" 并加 aria-label，让 Tab 键只进入工具栏一次，再用方向键在按钮之间移动；放不下的命令收进“更多”（⋯）菜单，不要折成第二行。