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

lightning:card

カードは、関連する情報のグルーピングにコンテナを適用するために使用されます。

lightning:card は、スタイル設定されたコンテナを情報のグルーピングに適用するために使用されます。情報は、1 つの項目の場合もあれば、関連リストなど項目のグループの場合もあります。

スタイル設定をカスタマイズするには variant 属性または class 属性を使用します。

lightning:card にはタイトル、ボディ、フッターが含まれています。カードのボディのスタイルを設定するには、Lightning Design System ヘルパークラスを使用します。

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

次に例を示します。

1<aura:component>
2    <lightning:card>
3        <aura:set attribute="title">
4            Hello!
5        </aura:set>
6        <aura:set attribute="footer">
7            <lightning:badge label="footer"/>
8        </aura:set>
9        <aura:set attribute="actions">
10            <lightning:button label="New"/>
11        </aura:set>
12        <p class="slds-p-horizontal--small">
13            Card Body (custom component)
14        </p>
15    </lightning:card>
16</aura:component>

使用上の考慮事項

title 属性と footer 属性は Object 型です。つまり、String 型や Component[] 型などの値を渡すことができます。上の例で��、title 属性と footer 属性を Component[] 型 (facet とも呼ばれる) として渡しています。Component[] 型は、この例に示すように、タイトルやフッターにマークアップを渡す必要がある場合に役立ちます。

1<aura:component>
2    <aura:attribute name="name" type="String" default="Your Name"/>
3    <aura:attribute name="myTitleName" type="Aura.Component[]">
4        <h1>Hello {! v.name }</h1>
5    </aura:attribute>
6    <lightning:card footer="Card Footer">
7        <aura:set attribute="title">
8            {!v.myTitleName}
9        </aura:set>
10        <!-- actions and body markup here -->
11    </lightning:card>
12</aura:component>

String 型の値を渡すには、それを <lightning:card> タグ内に含めることができます。

1<aura:component>
2    <aura:attribute name="myTitle" type="String" default="My Card Title"/>
3    <lightning:card title="{!v.myTitle}" footer="Card Footer">
4        <aura:set attribute="actions">
5            <lightning:button label="New"/>
6        </aura:set>
7        <p class="slds-p-horizontal--small">
8            Card Body (custom component)
9        </p>
10    </lightning:card>

属性

属性名	属性型	説明	必須項目
`actions`	Component[]	アクションは、button や buttonIcon などのコンポーネントです。アクションはヘッダーに表示されます。
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`footer`	Component[]	フッターにはテキストまたは別のコンポーネントを含めることができます。
`iconName`	String	アイコンの Lightning Design System 名。名前は、形式「\utility:down\」で記述します。「utility」はカテゴリ、「down」は表示する特定のアイコンです。アイコンはヘッダー内のタイトルの左側に表示されます。
`title`	Component[]	タイトルにはテキストまたは別のコンポーネントを含めることができ、ヘッダーに表示されます。	はい
`variant`	String	バリエーションは、カードの外観を変更します。使用できるバリエーションは、base または narrow です。この値のデフォルトは base です。

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

lightning:card

属性