この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

lightning:accordionSection

lightning:accordion コンポーネント内にネストされた 1 つのセクション。lightning:accordionSection は、関連コンテンツを 1 つのコンテナに保持します。セクションを選択すると、展開されるか折りたたまれます。各セクションには、1 つ以上の Lightning コンポーネントを含めることができます。このコンポーネントは、lightning:accordion と併用します。このコンポーネントはバージョン 41.0 以降で使用できます。

lightning:accordion コンポーネント内にネストされた 1 つのセクション。

lightning:accordionSection は、関連コンテンツを 1 つのコンテナに保持します。セクションを選択すると、展開されるか折りたたまれます。各セクションには、1 つ以上の Lightning コンポーネントを含めることができます。このコンポーネントは、lightning:accordion と併用します。

このコンポーネントは、Lightning Design System のアコーディオンからスタイル設定を継承します。

さらにこのコンポーネントのスタイルを設定するには、Lightning Design System ヘルパークラスを使用します。

次の例では、3 つのセクション (セクション B はデフォルトで展開される) がある基本的なアコーディオンを作成します。

1<aura:component>
2   <lightning:accordion activeSectionName="B">
3      <lightning:accordionSection label="Accordion Title A" name="A">This is the content area for section A</lightning:accordionSection>
4      <lightning:accordionSection label="Accordion Title B" name="B">This is the content area for section B</lightning:accordionSection>
5      <lightning:accordionSection label="Accordion Title C" name="C">This is the content area for section C</lightning:accordionSection>
6   </lightning:accordion>
7</aura:component>

次の例では、同じ基本的なアコーディオンを作成しますが、最初のセクションに buttonMenu が追加されています。

1<aura:component>
2   <lightning:accordion>
3      <lightning:accordionSection label="Accordion Title A" name="A">This is the content area for section A
4         <aura:set attribute="actions">
5            <lightning:buttonMenu aura:id="menu" alternativeText="Show menu">
6               <lightning:menuItem value="New" label="Menu Item One" />
7            </lightning:buttonMenu>
8         </aura:set>
9      </lightning:accordionSection>
10      <lightning:accordionSection label="Accordion Title B" name="B">This is the content area for section B</lightning:accordionSection>
11      <lightning:accordionSection label="Accordion Title C" name="C">This is the content area for section C</lightning:accordionSection>
12   </lightning:accordion>
13</aura:component>

使用上の考慮事項

lightning:accordion の最初のセクションはデフォルトで展開されます。デフォルトを変更するには、activeSectionName 属性を使用します。

複数のセクションで同じ名前が使用されていて、その名前が activeSectionName として指定されている場合、最初のセクションがデフォルトで展開されます。

属性

属性名	属性型	説明
`actions`	Component[]	カスタムメニュー実装を有効にします。アクションは、セクションタイトルの右側に表示されます。
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`label`	String	セクションのタイトルとして表示されるテキスト。
`name`	String	lightning:accordion コンポーネントの activeSectionName 属性と共に使用する一意のセクション名。
`title`	String	マウスが要素に重ねられたときにツールチップテキストを表示します。

Lightning コンポーネント開発者ガイド

lightning:accordionSection

属性