34 lines
2.4 KiB
Markdown
34 lines
2.4 KiB
Markdown
# IconbarPage
|
||
|
||
**コントロール機能**：アイコンツールバー付きのページコンテナ。アイコンツールバー（IconTextBar）を上部または下部に配置でき、ツールアイテムをクリックすることで、対応するコンテンツコンポーネントを動的に読み込み表示します。
|
||
**タイプ**：コンテナコントロール
|
||
**親クラス**：bricks.VBox
|
||
|
||
## 初期化パラメータ
|
||
|
||
- `opts`：設定オブジェクト。以下のプロパティを含みます：
|
||
- `bar_opts` *(Object)*：アイコンツールバーの設定オプション。`bricks.IconTextBar` に渡されます。
|
||
- `margin` *(String | Number)*：ツールバーの外側余白（マージン）。
|
||
- `rate` *(Number)*：レイアウト内での占有比率。
|
||
- `tools` *(Array)*：ツールアイテムの配列。各アイテムは以下の構造を持つオブジェクトです：
|
||
- `name` *(String)*：ツールの名称。識別用。
|
||
- `icon` *(String)*：アイコンのクラス名またはパス。
|
||
- `label` *(String, オプション)*：ツールのテキストラベル。
|
||
- `tip` *(String)*：マウスオーバー時のヒント情報。
|
||
- `dynsize` *(Boolean)*：サイズを動的に調整するかどうか。
|
||
- `rate` *(Number)*：このツールがレイアウト内で占める比率。
|
||
- `content` *(Object | String)*：子コントロールの設定または型名を示すもので、コンテンツを動的に生成するために使用されます。
|
||
- `bar_at` *(String)*：ツールバーの位置を指定します。「`'top'`」または「`'bottom'`」のいずれか。デフォルトは「`'top'`」。
|
||
|
||
> 注意：コンストラクタでは自動的に `height: '100%'` が設定されます。
|
||
|
||
## 主なイベント
|
||
|
||
- `command` イベント：
|
||
- 発生元：内部の `IconTextBar` インスタンスから発火。
|
||
- コールバックパラメータ：`event.params` にはクリックされた `tool` オブジェクトが含まれます。
|
||
- 動作：ユーザーがツールアイコンをクリックすると、`command_handle` メソッドが呼び出され、`tool.content` の内容に基づいてコンテンツコンポーネントが動的に生成され、現在の表示領域の内容と入れ替えられます。
|
||
|
||
```javascript
|
||
bar.bind('command', this.command_handle.bind(this))
|
||
``` |