Ignite UI for Angular

すべて
  • パブリック
  • パブリック/保護
  • すべて

Class IgxCardComponent

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

Igx Module

IgxCardModule

Igx Theme

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

Igx Keywords

card, button, avatar, icon

Igx Group

レイアウト

備考

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>

コンストラクター

アクセサー

コンストラクター

constructor

アクセサー

elevated

elevated: boolean = false

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

例

<igx-card elevated></igx-card>

let cardElevation = this.card.elevated;

horizontal

horizontal: boolean = false

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

例

<igx-card [horizontal]="true"></igx-card>

id

id: string = ...

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

例

<igx-card id="my-first-card"></igx-card>

let cardId =  this.card.id;

role

role: string = 'group'

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

例

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