148 lines
7.8 KiB
Markdown
148 lines
7.8 KiB
Markdown
# HBox
|
||
|
||
**コントロール機能**：子コントロールを水平方向に並べるためのレイアウトコンテナ。
|
||
**タイプ**：コンテナコントロール
|
||
**親クラス**：`bricks.Layout`
|
||
|
||
## 初期化パラメータ
|
||
|
||
- `options` (Object, オプション)：設定オプション。`Layout` が持つ汎用オプションを継承。
|
||
- 特有のパラメータはなし。コンストラクタでは親クラスを呼び出し、CSS クラス `'hcontainer'` を設定するのみ。
|
||
|
||
## 主なイベント
|
||
|
||
- 特有のイベントなし。
|
||
- `keyselectable` が有効な場合、`Layout` から継承されるキーボードナビゲーションイベントをサポート：
|
||
- `keydown`：方向キーに対応（左右で階層移動、上下で選択項目変更、Enter でクリックイベント発火）。
|
||
|
||
---
|
||
|
||
# FHBox
|
||
|
||
**コントロール機能**：固定された水平レイアウトコンテナ。子要素の折り返しを防ぎ、折れない水平配置が必要なシーンに適している。
|
||
**タイプ**：コンテナコントロール
|
||
**親クラス**：`bricks.HBox` → `bricks.Layout`
|
||
|
||
## 初期化パラメータ
|
||
|
||
- `options` (Object, オプション)：設定オプション。
|
||
- 追加パラメータなし。コンストラクタでは親クラスを呼び出した後、スタイル `flexWrap: 'nowrap'` を設定。
|
||
|
||
## 主なイベント
|
||
|
||
- `HBox` と同じ。`Layout` が提供するキーボードナビゲーションロジックに依存。
|
||
- 方向キーによるフォーカス制御と、Enter キーでのクリック発火をサポート。
|
||
|
||
---
|
||
|
||
# VBox
|
||
|
||
**コントロール機能**：子コントロールを垂直方向に並べるためのレイアウトコンテナ。
|
||
**タイプ**：コンテナコントロール
|
||
**親クラス**：`bricks.Layout`
|
||
|
||
## 初期化パラメータ
|
||
|
||
- `options` (Object, オプション)：設定オプション。
|
||
- 特有のパラメータなし。コンストラクタでは CSS クラス `'vcontainer'` を設定するのみ。
|
||
|
||
## 主なイベント
|
||
|
||
- 特有のイベントなし。
|
||
- `Layout` が定義するキーボードナビゲーション機能を同様にサポート（上下で選択、左右で階層の入出など）。
|
||
|
||
---
|
||
|
||
# FVBox
|
||
|
||
**コントロール機能**：固定された垂直レイアウトコンテナ。子要素の折り返しを防ぎ、折れない垂直配置に使用。
|
||
**タイプ**：コンテナコントロール
|
||
**親クラス**：`bricks.VBox` → `bricks.Layout`
|
||
|
||
## 初期化パラメータ
|
||
|
||
- `options` (Object, オプション)：設定オプション。
|
||
- 追加パラメータなし。コンストラクタで `flexWrap: 'nowrap'` を設定。
|
||
|
||
## 主なイベント
|
||
|
||
- `VBox` と同じ。完全なキーボードナビゲーション動作をサポート。
|
||
|
||
---
|
||
|
||
# Filler
|
||
|
||
**コントロール機能**：フレックスレイアウト内で残りスペースを埋めるための伸縮可能なフィルコントロール。動的なレイアウトバランスを実現するために使用され、他のコンポーネント間のスペースを広げる目的でよく利用される。
|
||
**タイプ**：コンテナコントロール（ただし通常は子コントロールを追加しない）
|
||
**親クラス**：`bricks.Layout`
|
||
|
||
## 初期化パラメータ
|
||
|
||
- `options` (Object, オプション)：設定オプション。
|
||
- 特有のパラメータなし。コンストラクタでは CSS クラス `'filler'` を設定。
|
||
- コメント内には当初 `flexGrow: 1` および `overflow: auto` の設定予定があったが、現在は未使用。
|
||
|
||
## 主なイベント
|
||
|
||
- 特有のイベントなし。
|
||
- 明示的に `keyselectable` を有効にすればキーボードナビゲーションスタックに含まれるが、実際の用途は少ない。
|
||
|
||
---
|
||
|
||
# ResponsableBox
|
||
|
||
> （注：クラス名はおそらく「ResponsiveBox」の誤記と思われる）
|
||
|
||
**コントロール機能**：レスポンシブレイアウトコンテナ。自身のアスペクト比に基づき、自動的に横または縦のレイアウトモードに切り替わる。幅が高さより大きい場合は横向き（hcontainer）、そうでない場合は縦向き（vcontainer）となる。
|
||
**タイプ**：コンテナコントロール
|
||
**親クラス**：`bricks.Layout`
|
||
|
||
## 初期化パラメータ
|
||
|
||
- `opts` (Object, オプション)：親クラス `Layout` に渡される設定オプション。
|
||
- コンストラクタ内で `'element_resize'` イベントをバインドし、サイズ変更を監視。
|
||
|
||
## 主なイベント
|
||
|
||
- `element_resize`：コンテナのサイズ変更時に発火し、`reset_type()` メソッドを呼び出してレイアウト方向を再判定。
|
||
- 自動的に CSS クラスと幅・高さのスタイルを調整：
|
||
- 幅 > 高さ：`'hcontainer'` を適用、高さ100%、幅は自動調整。
|
||
- 高さ ≥ 幅：`'vcontainer'` を適用、幅100%、高さは自動調整。
|
||
- ネストされたキーボードナビゲーションをサポート。動作は `Layout` によって一元管理される。
|
||
|
||
---
|
||
|
||
# Layout
|
||
|
||
> 工場名（ファクトリ名）は直接登録されていないが、そのサブクラスは登録済み。上記すべてのコンテナクラスの基底クラスであり、主要な機能はここに集中している。
|
||
|
||
**コントロール機能**：基本的なレイアウトコンテナクラス。共通の子コントロール管理、キーボード選択対応、タイトル／説明の生成、ツールバー統合などの機能を提供。すべてのレイアウトコントロールの共通親クラス。
|
||
**タイプ**：コンテナコントロール
|
||
**親クラス**：`bricks.JsWidget`
|
||
|
||
## 初期化パラメータ
|
||
|
||
- `options` (Object, オプション)
|
||
- `keyselectable` (Boolean)：キーボード選択機能を有効にするかどうか。デフォルトは `false`。
|
||
- `title` (String)：任意のタイトル文字列。`Title3` コントロールとして生成される。
|
||
- `description` (String)：任意の説明文。`Text` コントロールとして生成される。
|
||
- `toolbar` (Object)：ツールバー設定。`FloatTextIconBar` の作成に使用。
|
||
- その他、`JsWidget` から継承される汎用パラメータ。
|
||
|
||
## 主なイベント
|
||
|
||
- `keydown`：グローバルにバインドされ、`enable_key_select()` により有効化。以下のキーを処理：
|
||
- `ArrowUp` / `ArrowDown`：上下で選択中の子コントロールを切り替え。
|
||
- `ArrowLeft`：`up_level()` を呼び出し、一つ上の階層に戻る。
|
||
- `ArrowRight`：`down_level()` を呼び出し、次の階層に入る。
|
||
- `Enter`：現在選択中のコントロールに対して `click` イベントを発火。
|
||
- `on_parent`：コントロールが親コンテナに追加または削除されたときに発行され、子コントロールに親の変更を通知。
|
||
- `element_resize`：主に `ResponsableBox` で使用されるが、`Layout` が DOM 要素操作の能力を提供。
|
||
- `click`：`enter_handler()` を介して、選択中の子コントロールに手動で送信可能。
|
||
|
||
さらに、以下の重要なメソッドも提供（イベントではないが、イベントフローに影響を与える）：
|
||
|
||
- `enable_key_select()` / `disable_key_select()`：キーボードナビゲーションの有効／無効化。グローバルスタック `key_selectable_stack` を管理。
|
||
- `add_widget(w, index)`：子コントロールを追加。自動的にDOMに挿入され、親子関係が構築される。
|
||
- `remove_widget(w)` / `clear_widgets()`：コントロールを削除。DOMとイベントの関連付けもクリーンアップ。
|
||
- `select_item(w)`：指定した子コントロールをハイライト（`.selected(bool)` メソッドをサポートしている必要あり）。 |