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.component.html>-->

<igx-card>
    <igx-card-media height="196px">
        <img [src]="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50">
    </igx-card-media>

    <igx-card-header>
        <h3 igxCardHeaderTitle>New York</h3>
        <h5 igxCardHeaderSubtitle>City in New York</h5>
    </igx-card-header>

    <igx-card-content>
        <p>New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is Manhattan, a densely populated borough that’s among the world’s major commercial, financial and cultural centers.</p>
    </igx-card-content>

    <igx-card-actions>
        <button igxButton igxRipple>Read More</button>
        <button igxButton="icon" igxRipple igxRippleCentered="true">
            <igx-icon>favorite</igx-icon>
        </button>
        <button igxButton="icon" igxRipple igxRippleCentered="true">
            <igx-icon>share</igx-icon>
        </button>
    </igx-card-actions>
</igx-card>

以下は結果です。

上記が確認できます。最初に h3 見出しのように要素をヘッダータイトルとしてタグしたい場合は、igx-car-header タグの間に配置し、igxCardHeaderTitle ディレクティブを要素に添付します。逆に、別の見出し要素をサブタイトルにしたい場合は、igxCardHeaderSubtitle をそれに添付します。

カードに表示する画像やビデオはすべて、igx-card-media タグで囲みます。igx-card-media を使用すると、widthheight 属性を使用して内側に配置されているコンテンツのサイズを変更できます。上の例では、高さのみ指定し、幅を 自動 にすることにより、設定された高さを維持しながら画像をカードの表面全体に広げることが可能になります。

igx-card-content タグ内には何でも配置できます。通常テキストが配置されます。

最後に igx-card-actions は、ボタンのようなアクション可能なアイテムを配置する場所です。要素に igxButton ディレクティブを使用すると、その領域内の材料設計仕様に従って自動的に正しく配置されます。

メディア、サムネイル、アバター

タイトルや字幕の横のカード ヘッダーに画像やアイコンを表示したい場合は、igxCardThumbnail ディレクティブを使用してそれを実行できます。

上記のカードを例にとると、igx-card-header の内容を編集して、アイコンを保持する igxCardThumbnail コンテナを追加できます。

<igx-card-header>
    <div igxCardThumbnail>
        <igx-icon>place</igx-icon>
    </div>

    <h3 igxCardHeaderTitle>Title</h3>
    <h5 igxCardHeaderSubtitle>Subtitle</h5>
</igx-card-header>

上記の例では、カード ヘッダーのタイトルと字幕の横にアイコンが表示されます。

カード ヘッダーに置かれた igx-avatar または igx-card-media の存在も自動的に検出され、カードのサムネイルのように表示されます。So you can do:

<igx-card-header>
    <igx-avatar>
        <igx-icon>place</igx-icon>
    </igx-avatar>

    <h3 igxCardHeaderTitle>Title</h3>
    <h5 igxCardHeaderSubtitle>Subtitle</h5>
</igx-card-header>

or, even this:

<igx-card-header>
    <igx-card-media width="40px" height="40px">
        <img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=80&q=50">
    </igx-card-media>

    <h3 igxCardHeaderTitle>Title</h3>
    <h5 igxCardHeaderSubtitle>Subtitle</h5>
</igx-card-header>

Outlined cards

カードには type 属性があり、デフォルト (省略した場合は自動的に設定) またはアウトラインに設定できます。outlined タイプは、細い境界線と置き換えてカードと背景を区別してカードからすべてのシャドウを削除します。

以下はアウトラインのあるカードの例です。

<!--outlined-card.component.html>-->
<igx-card type="outlined">
    <igx-card-header>
        <igx-card-media width="64px" height="64px">
            <img [src]="card.imageUrl">
        </igx-card-media>

        <h5 igxCardHeaderTitle>{{card.title}}</h5>
        <h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5>
    </igx-card-header>

    <igx-divider></igx-divider>

    <igx-card-actions layout="justify">
        <button *ngFor="let icon of card.icons;" igxButton="icon" igxRipple igxRippleCentered="true">
            <igx-icon>{{icon}}</igx-icon>
        </button>
    </igx-card-actions>
</igx-card>

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

水平レイアウト

デフォルトでは、カードのすべてのセクション (ヘッダー、コンテンツ、メディア、アクション) は縦にレイアウトされています。垂直方向のスペースが多くある場合に便利です。カードのすべてのセクションを水平に配置する場合、カードの horizontal 属性を使用してレイアウトを設定できます。

以下の例を参照してください。

<igx-card type="outlined" [horizontal]="horizontal">
    <div igxLayout igxLayoutDir="column" igxFlex igxFlexGrow="1">
        <igx-card-header>
            <h5 igxCardHeaderTitle>{{card.title}}</h5>
            <h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5>
            <igx-card-media width="64px" height="64px">
                <img [src]="card.imageUrl">
            </igx-card-media>
        </igx-card-header>

        <igx-card-content>
            <p>{{card.content}}</p>
        </igx-card-content>
    </div>

    <igx-divider [vertical]="horizontal"></igx-divider>

    <igx-card-actions layout="justify">
        <button *ngFor="let icon of card.icons;" igxButton="icon" igxRipple igxRippleCentered="true">
            <igx-icon>{{icon}}</igx-icon>
        </button>
    </igx-card-actions>
</igx-card>

igxLayoutigxFlex のサポートディレクティブを使用して、igx-card-headerigx-card-content を縦に並べ、カード内の他のセクションは横に並べます。

igx-card-actions のボタンが垂直のレイアウトに切り替わりました。igx-card-actions は、その親とのレイアウトになります。そのため、カードの horizontal 属性が true に設定されているときはいつでもアクションの vertical プロパティが true に設定され、その逆も同様です。

アクション領域の vertical 属性を明示的に設定して、デフォルトの動作を上書きすることができます。

<igx-card-actions layout="justify" [vertical]="false">
    <button *ngFor="let icon of card.icons;" igxButton="icon" igxRipple igxRippleCentered="true">
        <igx-icon>{{icon}}</igx-icon>
    </button>
</igx-card-actions>

以下は横向きのカードです。

その他のレイアウト

igx-card カードはさまざまなレイアウトが可能です。

以下は、igx-card-media がカードの垂直部分と並んで表示されている状態で、カードのすべての部分を垂直方向にレイアウトし、半横向きのカードを作成する方法を示した例です。

<igx-card [horizontal]="horizontal">
    <div igxLayout igxLayoutDir="column" igxFlex igxFlexGrow="1">
        <igx-card-header>
            <igx-avatar [src]="card.avatarUrl"></igx-avatar>
            <h5 igxCardHeaderTitle>{{card.title}}</h5>
            <h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5>
        </igx-card-header>

        <igx-card-content>
            <p>{{card.content}}</p>
        </igx-card-content>

        <igx-card-actions [vertical]="false">
            <button *ngFor="let button of card.buttons;" igxButton="flat" igxRipple>
                {{button}}
            </button>
        </igx-card-actions>
    </div>

    <igx-card-media width="96px">
        <img [src]="card.imageUrl">
    </igx-card-media>
</igx-card>

カード アクション

カードのアクション領域では、すでに説明したコンテンツに追加の設定を加えることができます。

reverse 属性を使用して、フラットボタンとボタンアイコンの順序を逆にすることができます。

<igx-card-actions [reverse]="true">
    <button igxButton>Button</button>

    <button igxButton="icon">
        <igx-icon>star</igx-icon>
    </button>
</igx-card-actions>

アイコン ボタンはフラットスタイルのテキスト ボタンの前に表示されます。

ボタンは、両端ではなく軸全体に配置されるように配置することもできるため、以下のように、layout 属性を使用して値を justify に設定します。

<igx-card-actions layout="justify">
    <button igxButton>Button</button>

    <button igxButton="icon">
        <igx-icon>star</igx-icon>
    </button>
</igx-card-actions>

概要

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

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

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

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

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

スタイル:

その他のリソース

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