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

lightning:accordionSection

lightning:accordion コンポーネント内にネストされた 1 つのセクション。このコンポーネントでは、バージョン 41.0 以降が必要です。

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 として指定されている場合、最初のセクションがデフォルトで展開されます。

lightning:accordionSection コンポーネントは、lightning:accordion コンポーネント内にネストされた 1 つのセクションです。このコンポーネントは、単独では使用できません。次の例では、1 つのセクションを持つ基本的なアコーディオンを作成します。

1<aura:component implements="aura:requireLocker" render="client">
2    <lightning:accordion aura:id="accordion" activeSectionName="A">
3        <lightning:accordionSection name="A" label="Accordion Title A">
4            <aura:set attribute="actions">
5                <lightning:buttonMenu aura:id="menu" alternativeText="Show menu" iconSize="x-small">
6                    <lightning:menuItem value="New" label="Menu Item One" />
7                    <lightning:menuItem value="Edit" label="Menu Item Two" />
8                </lightning:buttonMenu>
9            </aura:set>
10            <aura:set attribute="body">
11                <p>This is the content area for section A.</p>
12                <p>.</p>
13                <p>.</p>
14                <p>.</p>
15                <p>The section height expands to fit your content.</p>
16            </aura:set>
17        </lightning:accordionSection>
18    </lightning:accordion>
19</aura:component>

属性

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

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

lightning:accordionSection

属性