lightning:accordion
複数のコンテンツ領域を含むセクションを縦に積み上げたコレクション。このコンポーネントでは、バージョン 41.0 以降が必要です。
lightning:accordion コンポーネントは、��連コンテンツを 1 つのコンテナにグループ化します。一度に展開できるアコーディオンセクションは 1 つのみです。セクションを選択すると、展開されるか折りたたまれます。各セクションには、1 つ以上の Lightning コンポーネントを含めることができます。
このコンポーネントは、Lightning Design System のアコーディオンからスタイル設定を継承します。
さらにこのコンポーネントのスタイルを設定するには、Lightning Design System ヘルパークラスを使用します。
次の例では、3 つのセクション (セクション B はデフォルトで展開される) がある基本的なアコーディオンを作成します。
1<aura:component>
2 <lightning:accordion activeSectionName="B">
3 <lightning:accordionSection name="A" label="Accordion Title A">This is the content area for section A</lightning:accordionSection>
4 <lightning:accordionSection name="B" label="Accordion Title B">This is the content area for section B</lightning:accordionSection>
5 <lightning:accordionSection name="C" label="Accordion Title C">This is the content area for section C</lightning:accordionSection>
6 </lightning:accordion>
7</aura:component>lightning:accordion の最初のセクションはデフォルトで展開されます。デフォルトを変更するには、activeSectionName 属性を使用します。この属性は大文字と小文字を区別します。
複数のセクションで同じ名前が使用されていて、その名前が activeSectionName として指定されている場合、最初のセクションがデフォルトで展開されます。
属性
| 属性名 | 属性型 | 説明 | 必須項目 |
|---|---|---|---|
| activeSectionName | String | activeSectionName は、デフォルトで展開されるセクションを変更します。アコーディオンの最初のセクションはデフォルトで展開されます。 | |
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 | |
| class | String | コンポーネントの基本クラスに加え、外部要素の CSS クラス。 | |
| title | String | マウスポインタが要素に重ねられたときにツールチップテキストを表示します。 |