44 lines
2.8 KiB
Markdown
44 lines
2.8 KiB
Markdown
# アコーディオン
|
||
|
||
**コントロール機能**：アコーディオンは折りたたみ可能なパネルコントロールであり、ユーザーがタイトルボタンをクリックすることで、異なるコンテンツ領域の表示・非表示を切り替えることができます。複数のコンテンツブロックを整理し、画面スペースを節約する場合に一般的に使用されます。
|
||
|
||
**タイプ**：コンテナコントロール
|
||
**親クラスコントロール**：`bricks.VBox`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 説明 |
|
||
|------------|----|------|
|
||
| `item_size` | String（任意） | 各折りたたみ項目のタイトルの高さ。デフォルトは `'25px'`。 |
|
||
| `items` | Array\<Object\> | 折りたたみ項目のリスト。各オブジェクトは以下のプロパティを含みます：<br>- `name`: 項目の一意な識別子<br>- `icon`: ボタンの前に表示されるアイコン（任意）<br>- `label`: ボタンに表示されるテキスト<br>- `content`: 子コントロールの設定オブジェクト（widgettype など）、動的にコンテンツを構築するために使用<br>- `refresh` (Boolean, 任意): クリックするたびにコンテンツを再読み込みするかどうか |
|
||
| `item_css` | String（任意） | タイトルボタンのCSSクラス名。デフォルトは `'accordion-button'`。 |
|
||
| `content_css` | String（任意） | コンテンツ領域のCSSクラス名。デフォルトは `'accordion-content'`。 |
|
||
|
||
例：
|
||
```js
|
||
{
|
||
item_size: '30px',
|
||
items: [
|
||
{
|
||
name: 'panel1',
|
||
label: '基本情報',
|
||
icon: 'info',
|
||
content: { widgettype: 'Label', text: 'ここに基本情報があります' }
|
||
},
|
||
{
|
||
name: 'panel2',
|
||
label: '設定',
|
||
refresh: true,
|
||
content: { widgettype: 'Form', fields: [...] }
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 主なイベント
|
||
|
||
| イベント名 | 発生タイミング | コールバック引数 | 説明 |
|
||
|----------|--------------|----------------|------|
|
||
| `click`（内部バインド） | ユーザーがいずれかの折りたたみ項目のタイトルボタンをクリックしたとき | `event.target.bricks_widget` はクリックされた `Button` インスタンスを指す | コンテンツの切り替えを制御する主要なイベント。内部で自動的にバインドされ、コンテンツの読み込みと表示を処理する |
|
||
|
||
> 注意：このコントロール自体はカスタムイベントAPIを外部に公開しませんが、その動作は`Button`の`click`イベントに依存してコンテンツの切り替えを実現しています。開発者は子コントロールのイベントを監視することで、機能拡張を行うことができます。 |