bricks/docs/zh/toolbar.md
2025-11-19 12:30:39 +08:00

2.2 KiB
Raw Permalink Blame History

Toolbar

控件功能:创建一个可包含多个工具按钮的工具栏,支持水平或垂直布局,每个按钮可触发命令事件,并支持动态添加/删除按钮。
类型:容器控件
父类控件:bricks.Layout

初始化参数

参数名 类型 说明
orientation String 工具栏方向,可选 'horizontal'(默认)或 'vertical'。影响滚动面板类型及间隔方向。
target Any 可选的目标对象,在触发命令事件时附加到事件数据中。
interval String 或 Number 工具项之间的间隔大小,默认为 '10px'。根据方向设置宽度或高度。
tools Array<Object> 工具按钮描述数组,每个对象包含以下子属性:
- icon: 按钮图标路径或类名
- name: 按钮唯一名称,用于事件分发和查找
- label: 按钮显示文本
- css: 自定义CSS类名
- removable: Boolean是否可移除若为 true,则显示删除图标)

示例:

{
  orientation: 'horizontal',
  interval: '10px',
  target: myTarget,
  tools: [
    { name: 'save', label: '保存', icon: 'save-icon.png', css: 'btn-save', removable: true },
    { name: 'undo', label: '撤销', icon: 'undo-icon.png' }
  ]
}

主要事件

事件名 触发条件 传递数据结构
command 当任意工具按钮被点击时触发 { name, label, icon, css, [target] } —— 包含该工具的所有配置信息,如果有设置 target 则也会包含
[tool.name] 动态事件,以工具的 name 命名的事件会被单独触发 同上,便于监听特定按钮操作
remove 当用户点击可移除按钮上的删除图标时触发 被移除工具的原始 tool_opts 对象

示例:若某工具 name: 'export',则点击它会同时触发 commandexport 两个事件。

补充说明

  • 使用 click(name) 方法可通过编程方式模拟点击指定名称的按钮。
  • 支持键盘选择(通过 enable_key_select())。
  • 所有工具按钮使用 JsWidget 构建,异步创建,确保组件树正确初始化。