42 lines
3.2 KiB
Markdown
42 lines
3.2 KiB
Markdown
# ツールバー
|
||
|
||
**コントロール機能**：複数のツールボタンを含むことができるツールバーを作成します。水平または垂直レイアウトをサポートし、各ボタンはコマンドイベントを発生させることができます。また、ボタンの動的な追加・削除が可能です。
|
||
**タイプ**：コンテナーコントロール
|
||
**親クラス**：`bricks.Layout`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 説明 |
|
||
|--------------|-----|------|
|
||
| `orientation` | 文字列 | ツールバーの方向。`'horizontal'`（デフォルト）または `'vertical'` のいずれかを選択可能。スクロールパネルの種類および間隔の方向に影響します。 |
|
||
| `target` | 任意 | オプションのターゲットオブジェクト。コマンドイベント発生時にイベントデータに付加されます。 |
|
||
| `interval` | 文字列または数値 | ツール項目間の間隔サイズ。デフォルトは `'10px'`。方向に応じて幅または高さが設定されます。 |
|
||
| `tools` | 配列\<オブジェクト\> | ツールボタンの定義配列。各オブジェクトには以下のプロパティを含みます：<br>- `icon`：ボタンアイコンのパスまたはクラス名<br>- `name`：ボタンの一意な名称。イベントのディスパッチや検索に使用<br>- `label`：ボタンに表示されるテキスト<br>- `css`：カスタムCSSクラス名<br>- `removable`：真偽値。削除可能かどうか（`true`の場合、削除アイコンが表示される） |
|
||
|
||
**例**：
|
||
```js
|
||
{
|
||
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'` の場合、これをクリックすると `command` イベントと `export` イベントの両方が発生します。
|
||
|
||
### 補足説明
|
||
- `click(name)` メソッドを使用することで、指定された名前のボタンをプログラム上でクリックしたかのようにシミュレートできます。
|
||
- キーボードによる選択（`enable_key_select()` 経由）をサポートしています。
|
||
- すべてのツールボタンは `JsWidget` を使って構築され、非同期で作成されることにより、コンポーネントツリーが正しく初期化されることを保証しています。 |