60 lines
4.1 KiB
Markdown
60 lines
4.1 KiB
Markdown
# TabPanel
|
||
|
||
**コントロール機能**：TabPanel はタブ切り替え機能を実装するためのコンテナコントロールです。ユーザーは異なるタブボタンをクリックすることで、対応するコンテンツ領域の表示を切り替えることができます。タブのレイアウトには上部、下部、左側、右側の配置がサポートされており、タブの動的な追加・削除も可能で、作成済みページの内容をキャッシュすることでパフォーマンスを向上させます。
|
||
|
||
**タイプ**：コンテナコントロール
|
||
**親クラス**：`bricks.Layout`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 説明 |
|
||
|--------|------|------|
|
||
| `tab_pos` | String | タブの位置。選択肢は `\"top\"`（デフォルト）、`\"bottom\"`、`\"left\"`、`\"right\"`。タブバーの配置方向と位置を決定します。 |
|
||
| `tab_long` | String | タブの幅または高さの割合。デフォルトは `\"100%\"`。タブ全体の伸縮動作を制御します。 |
|
||
| `css` | Object/String | カスタムCSSクラス名。ルート要素に適用されます。使用可能なクラス：`tab`, `tab-button`, `tab-button-active`, `tab-button-hover`, `tab-content`。 |
|
||
| `items` | Array | タブ項目の配列。各オブジェクトは以下のプロパティを持つ：<br>- `name`: タブの一意な識別子（必須）<br>- `label`: 表示テキスト<br>- `icon`: アイコンのクラス名（任意）<br>- `removable`: 閉じられるかどうか（真偽値）<br>- `refresh`: タブ切り替え時に毎回コンテンツを再読み込みするかどうか（真偽値）<br>- `content`: コンテンツコンポーネントの説明オブジェクト、または直接 `bricks.JsWidget` インスタンス |
|
||
|
||
例：
|
||
```js
|
||
{
|
||
tab_pos: "top",
|
||
items: [
|
||
{
|
||
name: "tab1",
|
||
label: "ホーム",
|
||
icon: "fa fa-home",
|
||
removable: false,
|
||
refresh: false,
|
||
content: { widgettype: "Text", text: "ようこそ！" }
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 主要イベント
|
||
|
||
### `switch`
|
||
- **発火タイミング**：タブ切り替えが完了し、新しいコンテンツが表示されたときに発火。
|
||
- **イベントデータ**：現在アクティブなコンテンツコントロールのインスタンス（すなわち `w`、型は `bricks.JsWidget`）。
|
||
- **用途**：コンテンツ領域の変更を監視し、状態同期やログ記録などに利用できます。
|
||
|
||
例：イベントリスナー登録
|
||
```js
|
||
tabpanel.bind('switch', function(event) {
|
||
console.log('現在表示中のコンテンツコンポーネント：', event.data);
|
||
});
|
||
```
|
||
|
||
### `active`（コンテンツコントロールイベント）
|
||
- **発火タイミング**：特定のコンテンツコントロールが前面に表示される（アクティブになる）とき、そのコントロール自身が `active` イベントを発火します。
|
||
- **説明**：このイベントは、コンテンツコントロールが `dispatch('active')` を呼び出すことで発火され、ページ表示時に初期化処理（例：データ更新、入力フィールドへのフォーカスなど）を実行したい場合に適しています。
|
||
|
||
> 注意：このイベントは TabPanel 自身が発行するものではなく、内部のコンテンツコントロールがアクティブになった際に個別に発行されます。
|
||
|
||
---
|
||
|
||
**備考**：
|
||
- TabPanel はタブボタンバーの実装に `bricks.Toolbar` を使用しており、横方向・縦方向のレイアウトをサポートしています。
|
||
- コンテンツ領域には `bricks.Filler` をコンテナとして使用し、`switch_content()` メソッドによりコンテンツを動的に置き換えます。
|
||
- 一度読み込まれたコンテンツは、デフォルトで `content_buffer` 内にキャッシュされます。`refresh: true` と設定しない限り、再生成されることはありません。
|
||
- `add_tab(desc)` メソッドにより、新規タブを動的に追加でき、イベントバインディングを通じてタブの閉じる操作を処理することも可能です。 |