# IconBar
**Widget Functionality**: Creates an icon toolbar containing multiple clickable SVG icon buttons, supporting selection states and event dispatching.
**Type**: Container widget
**Parent Widget**: `bricks.HBox`
## Initialization Parameters
| Parameter | Type | Description |
|---------|------|-------------|
| `opts.cheight` | Number | Height of child widgets (in character units), default is `2` |
| `opts.rate` | Number | Scaling factor affecting icon size, default is `1` |
| `opts.margin` | String | Left and right margins between icons, in CSS format (e.g., `'10px'`) |
| `opts.tools` | Array | Array of tool items, each being an object with the following fields:
- `name`: Tool name (used for identification and events)
- `icon`: URL of the SVG icon
- `rate`: Optional scaling ratio for this specific icon
- `dynsize`: Whether to dynamically adjust size (boolean)
- `tip`: Tooltip text (optional) |
> If `cheight` or `rate` is not provided, default values will be automatically set.
## Main Events
| Event Name | Trigger Condition | Payload Data |
|-----------|-------------------|--------------|
| `desc.name` (i.e., `tools[i].name`) | Triggered when a specific icon is clicked; event name equals the `name` field of that icon | Passes the corresponding icon's `desc` object |
| `command` | Triggered on any icon click — a unified event for all icons | Passes the `desc` object of the clicked icon |
> Events are dispatched via `dispatch`, allowing external components to listen for specific commands or general actions.
---
# IconTextBar
**Widget Functionality**: Extends `IconBar`. Each tool item is displayed as a combination of "icon + text", suitable for toolbars requiring labeled descriptions.
**Type**: Container widget
**Parent Widget**: `bricks.IconBar`
## Initialization Parameters
Inherits all parameters from `IconBar`, with enhanced support for each item in the `tools` array:
| Parameter | Type | Description |
|---------|------|-------------|
| `opts.tools[i].label` | String | Text label displayed next to the icon |
| `opts.tools[i].tip` | String | Tooltip shown on hover, applied to the entire icon+text container |
| Other parameters same as `IconBar` | —— | Supports `name`, `icon`, `rate`, `dynsize`, etc. |
> Each tool item is constructed as a horizontal layout (`HBox`), internally composed of `Svg` and `Text` widgets in sequence.
## Main Events
Identical to `IconBar`:
| Event Name | Trigger Condition | Payload Data |
|-----------|-------------------|--------------|
| `desc.name` | Triggered when a tool item is clicked; event name is its `name` | The corresponding `desc` object |
| `command` | Triggered on every icon click | `desc` object of the current item |
> Events are bound to the overall `HBox`; clicking either the icon or the text triggers the event.
---
# FloatIconBar
**Widget Functionality**: A floating icon toolbar that initially displays only a "floating icon". On mouse hover, it expands into a full `IconBar`. Commonly used for side-floating toolbars.
**Type**: Container widget
**Parent Widget**: `bricks.HBox`
## Initialization Parameters
| Parameter | Type | Description |
|---------|------|-------------|
| `opts` | Object | Configuration object passed to the internal `IconBar`, structured like `IconBar`'s `opts.tools` and related options |
| Uses `bricks_resource('imgs/float-out.png')` internally | —— | Fixed icon for the floating button |
> Actual tool items are defined through the provided `opts`, which are used to construct the internal `IconBar`.
## Main Events
Same as the internal `IconBar`:
| Event Name | Trigger Condition | Payload Data |
|-----------|-------------------|--------------|
| `desc.name` | Triggered when a user clicks an icon in the expanded toolbar | `desc` object of the corresponding icon |
| `command` | Triggered on any icon click in the expanded bar | `desc` object of the clicked icon |
> Events originate from the embedded `IconBar` instance and are automatically forwarded (transparently passed up).
Additional behavioral events:
- `mousemove` over the floating icon triggers expansion of the menu
- A `click` anywhere on the page triggers collapse of the menu (via listening on `bricks.Body`)
---
# FloatIconTextBar
**Widget Functionality**: Floating "icon + text" toolbar, an extended version of `FloatIconBar`. When expanded, it displays tool items with textual labels.
**Type**: Container widget
**Parent Widget**: `bricks.FloatIconBar`
## Initialization Parameters
Same as `FloatIconBar`:
| Parameter | Type | Description |
|---------|------|-------------|
| `opts` | Object | Contains the `tools` array and other configurations, used internally when constructing the `IconTextBar` |
> Internally calls `build_bar(opts)` to create an `IconTextBar` instance, thus supporting text-related properties such as `label` and `tip`.
## Main Events
Same as `IconTextBar`:
| Event Name | Trigger Condition | Payload Data |
|-----------|-------------------|--------------|
| `desc.name` | Triggered when a tool item in the expanded bar is clicked | `desc` object of the selected item |
| `command` | Triggered on any click within the expanded bar | `desc` object of the current item |
> All events are emitted by the internal `IconTextBar` instance and automatically bubble up.