Lightning コンポーネント開発者ガイド
jlightning:card
カードは、関連する情報のグルーピングにコンテナを適用するために使用されます。
lightning:card は、スタイル設定されたコンテナを情報のグルーピングに適用するために使用されます。情報は、1 つの項目の場合もあれば、関連リストなど項目のグループの場合もあります。
スタイル設定をカスタマイズするには variant 属性または class 属性を使用します。
lightning:card にはタイトル、ボディ、フッターが含まれています。カードのボディのスタイルを設定するには、Lightning Design System ヘルパークラスを使用します。
このコンポーネントは、Lightning Design System のカードからスタイル設定を継承します。
次に例を示します。
1<aura:component>
2 <lightning:card footer="Card Footer">
3 <aura:set attribute="title">
4 <lightning:badge label="Hello"/>
5 </aura:set>
6 <aura:set attribute="actions">
7 <lightning:button label="New"/>
8 </aura:set>
9 <p class="slds-p-horizontal--small">
10 Card Body (custom component)
11 </p>
12 </lightning:card>
13</aura:component>属性
| 属性名 | 属性型 | 説明 | 必須項目 |
|---|---|---|---|
| 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 です。 |