Card
Ignite UI for Angular IgxCardComponent
は、テキスト、画像、アイコン、およびボタンを表示します。この要素は詳細情報のエントリ ポイントになります。Card を使用してマルチメディア ダッシュボードを作成できます。Card コンポーネントは、Ignite UI for Angular Grid と同じコンポーネントを使用してページングをサポートします。ただし、カスタム コードが必要です。
Angular Card の例
このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
使用方法
Card コンポーネントは、様々なオブジェクト タイプ、サイズやサポートされるアクションが異なる同様のオブジェクトから成るコンテンツを表示できます。
作業の開始
app.module.ts ファイルに IgxCardModule
をインポートします。
// 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-card-header
タグの間に配置し、igxCardHeaderTitle
ディレクティブを要素に添付します。逆に、別の見出し要素を subtitle
にしたい場合は、igxCardHeaderSubtitle
をその要素に添付します。
カードに表示する画像やビデオはすべて、igx-card-media
タグで囲みます。igx-card-media
を使用すると、width
や height
属性を使用して内側に配置されているコンテンツのサイズを変更できます。上の例では、高さ
のみ指定し、幅を 自動
にすることにより、設定された高さを維持しながら画像をカードの表面全体に広げることが可能になります。
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
タイプは、細い境界線と置き換えてカードと背景を区別してカードからすべてのシャドウを削除します。
水平レイアウト
デフォルトでは、カードのすべてのセクション (ヘッダー、コンテンツ、メディア、アクション) は縦にレイアウトされています。垂直方向のスペースが多くある場合に便利です。カードのすべてのセクションを水平に配置する場合、カードの 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;" igxButton="icon" 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
は、その親
と逆
のレイアウトになります。そのため、カードの 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 のスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する index
ファイルをインポートする必要があります。
@import '~igniteui-angular/lib/core/styles/themes/index';
最も単純なアプローチに従って、igx-card-theme
を拡張する新しいテーマを作成し、カードのアイテムをスタイル設定するいくつかのパラメーターを受け取ります。
$colorful-card: igx-card-theme(
$background: #011627,
$header-text-color: #FEFEFE,
$subtitle-text-color: #ECAA53,
$content-text-color: #FEFEFE
);
ご覧のとおり、igx-card-theme
は、アイテムの基本的なスタイル設定に役立ついくつかのパラメーターを公開しています。
テーマを含む
最後の手順は、コンポーネントのテーマを含めることです。
$legacy-support
が true
に設定されている場合、コンポーネントのテーマを以下のように含めます。
@include igx-card($colorful-card);
Note
コンポーネントが Emulated
ViewEncapsulation を使用している場合、::ng-deep
を使用してこのカプセル化を解除する必要があります。
:host {
::ng-deep {
@include igx-card($colorful-card);
}
}
$legacy-support
が false
(デフォルト) に設定されている場合、css 変数 を以下のように含めます。
@include igx-css-vars($colorful-card);
Note
コンポーネントが Emulated
ViewEncapsulation を使用している場合、変数をオーバーライドするにはグローバル セレクターが必要なため、:host
を使用する必要があります。
:host {
@include igx-css-vars($colorful-card);
}
デモ
まとめ
このトピックでは Card コンポーネントの詳細について説明しました。最初にテキスト コンテンツのみを含むベーシックなカードを作成しました。次に画像を追加しました。他の Ignite UI for Angular コンポーネントをカードで使用してアバター、ボタン、およびアイコンを追加して機能性を向上しました。最後に公開されたテーマの色を設定してカスタムパレットを作成、スキーマを拡張してカードのテーマを変更しました。 カード コンポーネントはその他のレイアウトも表示できます。詳細については、このトピックの最初の部分の Card デモを参照してください。
API と スタイル リファレンス
カード API に関する詳細な情報は、以下のリンクのトピックを参照してください。
以下の定義済み CSS スタイルを使用してカード レイアウトを構成しました。
使用したその他のコンポーネントとディレクティブ
スタイル: