117 lines
6.5 KiB
Markdown
117 lines
6.5 KiB
Markdown
# IconBar
|
||
|
||
**コントロール機能**：複数のクリック可能なSVGアイコンボタンを含むアイコンツールバーを作成。選択状態のサポートおよびイベント発行に対応。
|
||
**タイプ**：コンテナーコントロール
|
||
**親クラスコントロール**：`bricks.HBox`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 説明 |
|
||
|------------|----|------|
|
||
| `opts.cheight` | Number | 子コントロールの高さ（文字単位）。デフォルト値は `2` |
|
||
| `opts.rate` | Number | 拡大縮小率。アイコンサイズに影響を与える。デフォルト値は `1` |
|
||
| `opts.margin` | String | アイコン間の左右マージン。CSS形式（例：`'10px'`） |
|
||
| `opts.tools` | Array | ツール項目の配列。各ツール項目は以下のフィールドを持つオブジェクト：<br>- `name`: ツール名（識別およびイベント用）<br>- `icon`: SVGアイコンのURL<br>- `rate`: 当該アイコンの拡大縮小率（任意）<br>- `dynsize`: サイズを動的に調整するかどうか（真偽値）<br>- `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` インスタンスから発行され、自動的に上位へバブルアップする。 |