Angular Card (カード) コンポーネントの概要

Angular Card は、タイトル テキスト、説明、画像スタイル、CTA (行動喚起) ボタン、リンクなどのさまざまな要素を持つ柔軟なコンテナーを表します。特定のシナリオ/コンテンツを可能な限り最適な方法で表現するために、さまざまな表示オプション、ヘッダー、フッター、背景色、アニメーションなどを提供します。

この軽量の Angular Card コンポーネントは、あらゆる種類のカードの作成に使用されます。その中には、名刺、マテリアル フリッピング カード、スタック カードなどがあります。

Angular Card の例

以下に、画像、タイトル、サブタイトル、主要なカード コンテンツ、ボタンのコンテナなどの主要なカード セクションを備えた、巧妙に作成された Ignite UI for Angular Card の基本的なサンプルを示します。

EXAMPLE

このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Ignite UI for Angular Card を使用した作業の開始

Ignite UI for Angular Card コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular
cmd

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxCardModule をインポートします。

// app.module.ts
...
import { IgxCardModule } from 'igniteui-angular';
// import { IgxCardModule } from '@infragistics/igniteui-angular'; for licensed package

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

あるいは、16.0.0 以降、IgxCardComponent をスタンドアロンの依存関係としてインポートすることも、IGX_CARD_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

import { IGX_CARD_DIRECTIVES } from 'igniteui-angular';
// import { IGX_CARD_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <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 igxIconButton="flat" igxRipple igxRippleCentered="true">
                <igx-icon>favorite</igx-icon>
            </button>
            <button igxIconButton="flat" igxRipple igxRippleCentered="true">
                <igx-icon>share</igx-icon>
            </button>
        </igx-card-actions>
    </igx-card>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_CARD_DIRECTIVES]
    /* or imports: [IgxCardComponent,
        IgxCardHeaderComponent,
        IgxCardMediaDirective,
        IgxCardContentDirective,
        IgxCardActionsComponent,
        IgxCardFooterDirective,
        IgxCardHeaderTitleDirective,
        IgxCardHeaderSubtitleDirective,
        IgxCardThumbnailDirective,
        IgxButtonDirective,
        IgxRippleDirective] */
})
export class HomeComponent {}
typescript

Ignite UI for Angular Card モジュールまたはディレクティブをインポートしたので、igx-card コンポーネントの使用を開始できます。

Angular Card コンポーネントの使用

次に、デモのカード テンプレートを表すために、以下のコードを追加します。

<!--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 igxIconButton="flat" igxRipple igxRippleCentered="true">
            <igx-icon>favorite</igx-icon>
        </button>
        <button igxIconButton="flat" igxRipple igxRippleCentered="true">
            <igx-icon>share</igx-icon>
        </button>
    </igx-card-actions>
</igx-card>
html

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

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

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

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

カード ヘッダーに置かれた igx-avatar または igx-card-media の存在も自動的に検出され、カードのサムネイルのように表示されますので次のことができます:

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

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

以下も可能です。

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

カードのアウトライン

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

Angular Card の水平レイアウト

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

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

<igx-card type="outlined" [horizontal]="horizontal">
    <div class="h-sample-column">
        <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;" igxIconButton="flat" igxRipple igxRippleCentered="true">
            <igx-icon>{{icon}}</igx-icon>
        </button>
    </igx-card-actions>
</igx-card>
html

.h-sample-column クラスを使用して、igx-card-header と igx-card-content をまとめてバンドルし、垂直に揃え、カード内の他のセクションを水平に揃えています。

以下は、.h-sample-column クラスが適用されるスタイルです。

.h-sample-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 0%;

  igx-card-header {
      padding-bottom: 0;
  }
}
scss

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

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

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

すべて適切に設定できると、結果は以下のようになります。

EXAMPLE

その他のレイアウト

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

EXAMPLE

Angular Card の操作

Angular Card の操作領域では、すでに説明したコンテンツに追加の設定を加えることができます。

igxStart または igxEnd ディレクティブを使用して、カードのアクション領域内の要素を先頭または末尾に配置できます。

<igx-card-actions>
    <button igxIconButton="flat" igxStart>
        <igx-icon>drag_indicator</igx-icon>
    </button>
    <button igxIconButton="flat" igxEnd>
        <igx-icon>favorite</igx-icon>
    </button>
</igx-card-actions>
html

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

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

    <button igxIconButton="flat">
        <igx-icon>star</igx-icon>
    </button>
</igx-card-actions>
html

スタイル設定

Card のスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

最も単純なアプローチに従って、card-theme を拡張する新しいテーマを作成し、カードのアイテムをスタイル設定するいくつかのパラメーターを受け取ります。

$colorful-card: card-theme(
  $background: #011627,
  $header-text-color: #fefefe,
  $subtitle-text-color: #ecaa53,
  $content-text-color: #fefefe
);
scss

ご覧のとおり、card-theme は、アイテムの基本的なスタイル設定に役立ついくつかのパラメーターを公開しています。

最後の手順は、コンポーネントのテーマを含めることです。

@include css-vars($colorful-card);
scss

Angular Card のデモ

EXAMPLE

まとめ

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

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

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

• IgxCardComponent API

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

• IgxCardComponent スタイル

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

• IgxAvatarComponent
• IgxIconComponent
• IgxButtonDirective
• IgxDividerDirective

スタイル:

• IgxAvatarComponent スタイル
• IgxIconComponent スタイル
• IgxButtonDirective スタイル

テーマの依存関係

• IgxButton テーマ
• IgxAvatar テーマ
• IgxIconTheme

その他のリソース

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)