4.4 KiB
4.4 KiB
IconBar
控件功能:创建一个图标工具栏,包含多个可点击的SVG图标按钮,支持选中状态和事件分发。
类型:容器控件
父类控件:bricks.HBox
初始化参数
| 参数名 | 类型 | 说明 |
|---|---|---|
opts.cheight |
Number | 子控件高度(字符单位),默认值为 2 |
opts.rate |
Number | 缩放比例,影响图标大小,默认值为 1 |
opts.margin |
String | 图标之间的左右边距,CSS格式(如 '10px') |
opts.tools |
Array | 工具项数组,每个工具项是一个对象,包含以下字段: - name: 工具名称(用于标识和事件)- icon: SVG图标的URL- rate: 当前图标的缩放比例(可选)- dynsize: 是否动态调整尺寸(布尔值)- tip: 提示文本(可选) |
如果未提供
cheight或rate,会自动设置默认值。
主要事件
| 事件名 | 触发条件 | 携带数据 |
|---|---|---|
desc.name(即 tools[i].name) |
点击某个图标时触发,事件名为该图标的 name 字段 |
传递对应图标的 desc 对象 |
command |
所有图标点击都会触发此统一事件 | 传递当前图标的 desc 对象 |
事件通过
dispatch分发,可用于外部监听具体命令或通用操作。
IconTextBar
控件功能:扩展自 IconBar,每个工具项显示为“图标 + 文本”组合形式,适用于需要标签说明的工具栏。
类型:容器控件
父类控件:bricks.IconBar
初始化参数
继承 IconBar 的所有参数,并增强 tools 数组中每一项的支持:
| 参数名 | 类型 | 说明 |
|---|---|---|
opts.tools[i].label |
String | 显示在图标旁边的文本标签 |
opts.tools[i].tip |
String | 鼠标悬停提示文本,会应用到整个图标+文本容器上 |
其他参数同 IconBar |
—— | 支持 name, icon, rate, dynsize 等 |
每个工具项会被构造成一个水平布局(
HBox),内部依次添加Svg和Text控件。
主要事件
与 IconBar 完全一致:
| 事件名 | 触发条件 | 携带数据 |
|---|---|---|
desc.name |
点击某一项时触发,事件名为其 name |
对应的 desc 对象 |
command |
所有点击均触发此事件 | 当前项的 desc 对象 |
事件绑定在整体
HBox上,点击任意部分(图标或文字)都会触发。
FloatIconBar
控件功能:浮动式图标工具栏,初始只显示一个“外挂图标”,鼠标移入时展开完整的 IconBar。常用于侧边悬浮工具栏。
类型:容器控件
父类控件:bricks.HBox
初始化参数
| 参数名 | 类型 | 说明 |
|---|---|---|
opts |
Object | 传递给内部 IconBar 的配置对象,结构同 IconBar 的 opts.tools 等 |
内部使用 bricks_resource('imgs/float-out.png') |
—— | 固定的浮出按钮图标 |
实际工具项由传入的
opts构建内部IconBar使用。
主要事件
与内部 IconBar 保持一致:
| 事件名 | 触发条件 | 携带数据 |
|---|---|---|
desc.name |
用户点击展开后的某个图标时触发 | 对应图标的 desc 对象 |
command |
所有图标点击都会触发 | 当前图标的 desc 对象 |
事件来自内嵌的
IconBar实例,自动透传。
此外还具备行为事件:
mousemove在浮出图标上触发展开菜单- 页面任意位置
click触发收起菜单(通过监听bricks.Body)
FloatIconTextBar
控件功能:浮动式“图标+文本”工具栏,是 FloatIconBar 的扩展版本,展开后显示带文字标签的工具项。
类型:容器控件
父类控件:bricks.FloatIconBar
初始化参数
与 FloatIconBar 相同:
| 参数名 | 类型 | 说明 |
|---|---|---|
opts |
Object | 包含 tools 数组及其他配置,在内部构建 IconTextBar 时使用 |
内部调用
build_bar(opts)创建的是IconTextBar实例,因此支持label、tip等文本相关属性。
主要事件
与 IconTextBar 一致:
| 事件名 | 触发条件 | 携带数据 |
|---|---|---|
desc.name |
点击展开后的某一项时触发 | 该项的 desc 对象 |
command |
所有点击都触发 | 当前项的 desc 对象 |
所有事件均由内部
IconTextBar实例发出,自动向上冒泡。