アコーディオン
ヘッダーをクリックすることにより、上下に階層化されたコンテンツを展開します。
Accordionは、最初にコンテンツの一部を表示し、コンテンツを展開すると詳細が表示されるようにして情報を整理する必要がある場合に使用します。
使用方法
画面にアコーディオンブロックを追加します。次に、ブロック内にアコーディオンアイテムを追加してコンテンツを作成します。
- アコーディオンをプレビューにドラッグします。
- 必要な数のアコーディオンアイテムをドラッグします。
-
プレースホルダに必要なコンテンツを設定します。
-
パブリッシュしてテストします。
デモ
入力パラメータ
アコーディオン
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| MultipleItems | 複数のアコーディオンアイテムを開き、Section Expandableの効果を持たせることができます。 | Boolean | False | False |
| ExtendedClass | このブロックにカスタムスタイルクラスを追加します。Text | False | なし |
アコーディオンアイテム
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| IsOpen | Trueの場合、描画時にアコーディオンアイテムが開きます。 | Boolean | False | False |
| IsDisable | アコーディオンアイテムをクリックできないようにします。 | Boolean | False | False |
| ExtendedClass | このブロックにカスタムスタイルクラスを追加します。Text | False | なし |
レイアウトおよびクラス
CSSセレクタ
| 要素 | CSSクラス | 説明 |
|---|---|---|
| .accordion-item | .accordion-item.is--open | AccordionItemが開いている場合 |
| .accordion-item | accordion-item-content.is--expanded | AccordionItemが開いている場合 |
| .accordion-item | .accordion-item.is--closed | AccordionItemが閉じている場合 |
| .accordion-item | accordion-item-content.is--collapsed | AccordionItemが閉じている場合 |
| .accordion-item | .accordion-item.is--disabled | IsDisabledパラメータがTrueの場合 |
高度なユースケース
ListRecordsを持つアコーディオンを使用する
- Accordionパターンをプレビューにドラッグします。
- ［Content］プレースホルダに、ListRecordsウィジェットをドラッグします。
- ListRecordsウィジェットに、AccordionItemパターンをドラッグします。
- AccordionItemパターンで、Expressionを使用して必要なデータベースコンテンツを表示します。
-
パブリッシュしてテストします。
矢印の位置を左に変更する
カスタムCSSを使用して、AccordionItemの矢印の位置を変更することができます。これをアプリケーションで実行するには、CSSをコピーしてテーマ内に配置する必要があります。
.accordion-item .accordion-item-header {
flex-direction: row-reverse;
}
.accordion-item .accordion-item-title {
padding-left: var(--space-base);
}
アコーディオンアイテムの間にマージンを追加する
アコーディオンアイテムの間にマージンを追加するには、カスタムCSSを使用する必要があります。これをアプリケーションで実行するには、CSSをコピーしてテーマ内に配置する必要があります。
.accordion {
background-color: transparent;
}
.accordion-item {
background-color: var(--color-neutral-0);
border-bottom-width: var(--border-size-s);
}
.accordion-item:not(:last-child) {
margin-bottom: var(--space-base);
}
注記
ListRecordsのLine Separatorは［None］にする必要があります。
