Card

Ignite UI for Angular IgxCardComponent は、テキスト、画像、アイコン、およびボタンを表示します。この要素は詳細情報のエントリ ポイントになります。Card を使用してマルチメディア ダッシュボードを作成できます。Card コンポーネントは、Ignite UI for Angular Grid と同じコンポーネントを使用してページングをサポートします。ただし、カスタム コードが必要です。

Card デモ

使用方法

Card コンポーネントは、様々なオブジェクト タイプ、サイズやサポートされる操作が異なる同様のオブジェクトから成るコンテンツを表示できます。

はじめに

Ignite UI for Angular Card を初期化する前に、IgxCardModuleapp.module.ts ファイルにインポートします:

// app.module.ts
...
import { IgxCardModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxCardModule],
    ...
})
export class AppModule {}

以下のコードは、Card コンポーネントのテンプレートでヘッダー領域および短いテキスト コンテンツを含むベーシックなカードを表示します。

<!--infocard.component.html>-->

<igx-card>
  <igx-card-header>
    <h3 class="igx-card-header__title">Brad Stanley</h3>
    <h5 class="igx-card-header__subtitle">Audi AG</h5>
  </igx-card-header>
  <igx-card-content>
    <p class="igx-card-content__text">Brad Stanley (born 17 March 1963 in Titting, Germany) is a German business executive and chairman of the Vorstand (CEO) of Audi AG.</p>
  </igx-card-content>
</igx-card>

以下は結果です。

アバターおよび画像の追加

ルーパート スタドラーは人気がありますが、カードをもう少し魅力的に変えてみます。名前の左に画像のアバターを表示し、より大きい Audi TT 画像を追加できます。要素を追加するには、IgxAvatar モジュールを app.module.ts ファイルにインポートします。

// app.module.ts

...
import {
    IgxCardModule,
    IgxAvatarModule
} from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxAvatarModule],
})
export class AppModule {}

次に丸いアバター図形および実際の車を表示するためにカードのテンプレートを変更します。

<!--infocard.component.html>-->

<igx-card>
    <igx-card-header class="compact">
        <igx-avatar src="assets/images/card/avatars/brad_stanley.jpg" roundShape="true"></igx-avatar>
        <div class="igx-card-header__tgroup">
            <h3 class="igx-card-header__title--small">Brad Stanley</h3>
            <h5 class="igx-card-header__subtitle">Audi AG</h5>
        </div>
    </igx-card-header>
    <div style="overflow: hidden">
        <img width="100%" height="100%" src="assets/images/card/media/audi_tt.jpg">
    </div>
    <igx-card-content>
      <p class="igx-card-content__text">Brad Stanley (born 17 March 1963 in Titting, Germany) is a German business executive and chairman of the Vorstand (CEO) of Audi AG.</p>
    </igx-card-content>
</igx-card>

この時点でカードは以下のような外観になります。

アクションの追加

カードに多くの情報が含まれるようになりました。更に他の機能も追加します。その他のコンポーネントを使用してエクスペリエンスを向上し、機能を追加します。 カードからソーシャル メディアにアクセスするオプションを追加します。要素を追加するには、IgxButton および IgxIcon モジュールを取得して app.module.ts ファイルにインポートします。

// app.module.ts

...
import {
    IgxCardModule,
    IgxAvatarModule,
    IgxIconModule,
    IgxButtonModule
} from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxIconModule, IgxButtonModule],
})
export class AppModule {}

次にこのアクション ボタンを表示するためにカードのテンプレートを変更します。

<!--infocard.component.html>-->

<igx-card>
    <igx-card-header class="compact">
        <igx-avatar src="assets/images/card/avatars/brad_stanley.jpg" roundShape="true"></igx-avatar>
        <div class="igx-card-header__tgroup">
            <h3 class="igx-card-header__title--small">Brad Stanley</h3>
            <h5 class="igx-card-header__subtitle">Audi AG</h5>
        </div>
    </igx-card-header>
    <div style="overflow: hidden">
        <img width="100%" height="100%" src="assets/images/card/media/audi_tt.jpg">
    </div>
    <igx-card-actions >
        <div class="igx-card-actions__igroup--start">
            <span igxButton="icon" igxRipple igxRippleCentered="true" *ngFor="let icon of icons">
                <igx-icon fontSet="material">{{icon}}</igx-icon>
            </span>
        </div>
        <button igxButton igxRipple >Follow</button>
    </igx-card-actions>
</igx-card>

igx-icon コンポーネントの fontSet プロパティを "material" に設定し、マテリアル アイコン セットの 2 つのアイコンを追加しました。このアイコンのリストは infocard.component.ts ファイルで定義されます。

// infocard.comoponent.ts

public icons = ['add', 'star'];

簡単に機能を追加できました。ブラウザーで結果を確認します。

まとめ

このトピックでは Card コンポーネントの詳細について説明しました。テキスト コンテンツのみを含むベーシックなカードを作成し、次に画像、最後に他の Ignite UI for Angular コンポーネントをカードで使用してアバター、ボタン、およびアイコンを追加して機能を改善しました。カード コンポーネントはその他のレイアウトも表示できます。詳細については、このトピックの最初の部分の Card デモを参照してください。

API と スタイル リファレンス

カード API に関する詳細な情報は、以下のリンクのトピックを参照してください。

以下の定義済み CSS スタイルを使用してカード レイアウトを構成しました。

使用したその他のコンポーネントとディレクティブ:

スタイル:

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。