Angular Card (カード) コンポーネントの概要
Angular Card は、タイトル テキスト、説明、画像スタイル、CTA (行動喚起) ボタン、リンクなどのさまざまな要素を持つ柔軟なコンテナーを表します。特定のシナリオ/コンテンツを可能な限り最適な方法で表現するために、さまざまな表示オプション、ヘッダー、フッター、背景色、アニメーションなどを提供します。
この軽量の Angular Card コンポーネントは、あらゆる種類のカードの作成に使用されます。その中には、名刺、マテリアル フリッピング カード、スタック カードなどがあります。
Angular Card の例
以下に、画像、タイトル、サブタイトル、主要なカード コンテンツ、ボタンのコンテナなどの主要なカード セクションを備えた、巧妙に作成された Ignite UI for Angular Card の基本的なサンプルを示します。
Ignite UI for Angular Card を使用した作業の開始
Ignite UI for Angular Card コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
ng add igniteui-angular
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 {}
あるいは、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 {}
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>
上記を確認することができます。最初に 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>
上記の例では、カード ヘッダーのタイトルと字幕の横にアイコンが表示されます。
カード ヘッダーに置かれた 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>
以下も可能です。
<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>
カードのアウトライン
カードには 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>
.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;
}
}
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>
すべて適切に設定できると、結果は以下のようになります。
その他のレイアウト
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>
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>
ボタンは、両端ではなく軸全体に配置されるように配置することができます。そのためには、以下のように layout 属性を使用してその値を justify に設定します。
<igx-card-actions layout="justify">
<button igxButton>Button</button>
<button igxIconButton="flat">
<igx-icon>star</igx-icon>
</button>
</igx-card-actions>
スタイル設定
Card のスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
最も単純なアプローチに従って、card-theme を拡張する新しいテーマを作成し、カードのアイテムをスタイル設定するいくつかのパラメーターを受け取ります。
$colorful-card: card-theme(
$background: #011627,
$header-text-color: #FEFEFE,
$subtitle-text-color: #ECAA53,
$content-text-color: #FEFEFE
);
ご覧のとおり、card-theme は、アイテムの基本的なスタイル設定に役立ついくつかのパラメーターを公開しています。
テーマを含む
最後の手順は、コンポーネントのテーマを含めることです。
$legacy-support が true に設定されている場合、コンポーネントのテーマを以下のように含めます。
@include card($colorful-card);
Note
コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。
:host {
::ng-deep {
@include card($colorful-card);
}
}
$legacy-support が false (デフォルト) に設定されている場合、css 変数 を以下のように含めます。
@include css-vars($colorful-card);
Note
コンポーネントが Emulated ViewEncapsulation を使用している場合、変数をオーバーライドするにはグローバル セレクターが必要なため、:host を使用する必要があります。
:host {
@include css-vars($colorful-card);
}
Angular Card のデモ
まとめ
このトピックでは Card コンポーネントの詳細について説明しました。最初にテキスト コンテンツのみを含むベーシックなカードを作成しました。次に画像を追加しました。他の Ignite UI for Angular コンポーネントをカードで使用して、アバター、ボタン、およびアイコンを追加して機能性を向上しました。最後に公開されたテーマの色を設定してカスタムパレットを作成、スキーマを拡張してカードのテーマを変更しました。 カード コンポーネントはその他のレイアウトも表示できます。詳細については、このトピックの最初の部分の Card デモを参照してください。
API と スタイル リファレンス
カード API に関する詳細な情報は、以下のリンクのトピックを参照してください。
以下の定義済み CSS スタイルを使用してカード レイアウトを構成しました。
使用したその他のコンポーネントとディレクティブ
スタイル:
テーマの依存関係
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub