Class IgxCardComponent

Card は、整理されたコンテンツを魅力的な方法で表示する方法を提供します。

IgxCardModule

igx-card-theme, igx-icon-theme, igx-button-theme

card, button, avatar, icon

レイアウト

Ignite UI Card は、カスタム コンテンツを配置するコンテナです。コンテンツを配置するため、カードに 5 つのセクションがあります。それらはヘッダー、メディア、コンテンツ、アクションおよびフッターです。

<igx-card>
<igx-card-header>
<h3 igxCardHeaderTitle>{{title}}</h3>
<h5 igxCardHeaderSubtitle>{{subtitle}}</h5>
</igx-card-header>
<igx-card-actions>
<button type="button" igxButton igxRipple>Share</button>
<button type="button" igxButton igxRipple>Play Album</button>
</igx-card-actions>
</igx-card>

コンストラクター

アクセサー

コンストラクター

アクセサー

elevated: boolean = false

カードが elevated かどうかを設定または取得します。 デフォルト値は false です。

<igx-card elevated></igx-card>
let cardElevation = this.card.elevated;
horizontal: boolean = false

カードの horizontal 属性の値を設定します。これを true に設定すると、異なるカード セクションが水平に並ぶようになり、カードを横に反転します。

<igx-card [horizontal]="true"></igx-card>
id: string = ...

カードのid を設定または取得します。 設定しない場合、id"igx-card-0" 値を持ちます。

<igx-card id="my-first-card"></igx-card>
let cardId =  this.card.id;
role: string = 'group'

カードの role 属性の値を設定します。 デフォルトで値が group に設定されています。

<igx-card role="group"></igx-card>