跳到主要内容
Termlib

UI 组件 · 布局容器

工具栏

Toolbar

也叫：操作栏、按钮栏、编辑器工具栏

一横排紧凑的按钮和图标，放在某块内容上方，集中放针对这块内容的常用操作。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

表格上方加一个工具栏：左侧是主按钮「新建」和普通按钮「导入」「导出」，右侧是刷新、列设置、全屏三个图标按钮，悬停显示文字提示；勾选表格行后，左侧切换为「已选 3 项」和「批量删除」按钮。按钮高度统一 32px，组与组之间用间距分开。

发给

01判断

你的内容是这样吗？

对照两列，确认工具栏是不是你要找的。

符合这些情况，用工具栏

  • 表格、列表上方需要集中放新建、导入、导出等针对这组数据的操作
  • 富文本、图片等编辑器需要一排格式化或编辑工具
  • 勾选多条记录后需要显示批量操作按钮

是这些情况，换成别的

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    十几个按钮平铺一排，没有分组也没有主次，窄屏时挤成两行

  2. 02

    全是图标按钮却没有文字提示，用户看不懂每个图标的意思

  3. 03

    把筛选条件、导航链接、操作按钮混在同一条工具栏里

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由一行按钮、图标按钮和分组竖线组成，常分为左侧主要操作和右侧辅助操作，放不下的操作收进「更多」菜单。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1内容区上方一横排紧凑的按钮和图标
  2. 2按钮之间有竖线分隔成几组
  3. 3左侧常是文字按钮，右侧是一排小图标

04解释

详细解释

工具栏是一排挨着的按钮，通常贴在某块内容的上方：富文本编辑器顶部的「加粗、斜体、列表、插入图片」，表格上方的「新建、导入、导出、刷新」，图片编辑器里的「裁剪、旋转、撤销」。相关按钮之间用竖线分组，常用的直接露出来，不常用的收进「更多」下拉菜单。按无障碍规范，工具栏容器应带 role="toolbar"，并能用方向键在按钮间移动焦点。

它和 顶部导航栏 的区别：导航栏负责在页面之间跳转，工具栏只对当前这块内容进行操作。和 筛选栏 的区别：筛选栏放的是搜索框、下拉选项这些查询条件，用来缩小数据范围；工具栏放的是动作按钮。表格页常把两者上下叠放：上面筛选栏，下面工具栏。

开发者信息
术语 ID
component-toolbar
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • [role="toolbar"]
  • .btn-toolbar
  • .ql-toolbar
  • .tox-toolbar
  • .ck-toolbar
  • .w-e-toolbar
  • .ant-pro-table-list-toolbar
  • [class*="MuiToolbar-root"]:not([class*="MuiAppBar-root"] *)
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • toolbar
  • tool-bar
  • table-toolbar
  • editor-toolbar
  • message-actions
  • row-actions
  • item-actions
  • icon-actions
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Toolbar
  • MessageActions
  • RowActions
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30