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

プロパティ

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>

アクセサー

elevated