Card (カード)

Ignite UI for Angular Card は、関連するメディア、テキスト、アクションを 1 つの柔軟なコンテンツ コンテナーにまとめます。

Card を使用して、製品、記事、連絡先、場所、ダッシュボード アイテムなど、単一の対象に関するコンテンツをグループ化します。

ライブ デモ

構造

Card は、ヘッダー、メディア、コンテンツ、アクションを標準的な構成要素とするコンテナーです。

igx-card                         // host - groups related content
|- igx-card-media                 // optional media region
|  `- default content             // image, video, or other media content
|- igx-card-header                // optional header region
|  |- [igxCardThumbnail]          // optional avatar, icon, or small image
|  |- [igxCardHeaderTitle]        // card title
|  `- [igxCardHeaderSubtitle]     // optional card subtitle
|- igx-card-content               // optional body region
|  `- default content             // text, lists, or custom content
`- igx-card-actions               // optional action region
   |- [igxStart]                  // leading actions
   `- [igxEnd]                    // trailing actions

作業の開始

Angular Card を使用するには、基本的なプロジェクトのセットアップについて Ignite UI for Angular の作業の開始 トピックを参照し、対象プラットフォーム向けにコンポーネントを登録します。

igniteui-angular パッケージを使用する Angular の場合、パッケージをインストールします:

npm install igniteui-angular

次に、コンポーネントの imports コレクションに IGX_CARD_DIRECTIVES トークンをインポートします。このトークンにより、Card とそのすべてのサポート コンポーネントおよびディレクティブが使用可能になります。

import { IGX_CARD_DIRECTIVES } from 'igniteui-angular/card';

IgxButtonDirective、IgxIconButtonDirective、IgxIconComponent、IgxRippleDirective など、カード コンテンツで使用するその他のディレクティブは igniteui-angular からインポートします。

Card を使用する最も簡単な方法は次のとおりです:

<igx-card>
  <igx-card-header>
    <h3 igxCardHeaderTitle>Title</h3>
  </igx-card-header>
  <igx-card-content>
    <p>Content</p>
  </igx-card-content>
</igx-card>

使用方法

Card コンテナーと、コンテンツに必要なサブコンポーネントを組み合わせてカードを構成します。

メディア

IgxCardMediaDirective を使用して、画像、ビデオ、その他のメディア コンテンツをカードに配置します。

<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" alt="New York city skyline" />
</igx-card-media>

位置

メディアをヘッダーの上または下に配置します。Card は追加された順序で各領域をレンダリングするため、マークアップ内の要素の順序によってメディアの位置が決まります。

ヘッダー スロット

ヘッダー スロットを使用して、サムネイル、タイトル、サブタイトル、および追加のヘッダー コンテンツを定義します。

<igx-card-header>
  <div igxCardThumbnail>
    <igx-icon>place</igx-icon>
  </div>
  <h3 igxCardHeaderTitle>Title</h3>
  <span igxCardHeaderSubtitle>Subtitle</span>
</igx-card-header>

カードがドキュメントのアウトラインに含まれるように、igxCardHeaderTitle を <h3> などの見出し要素に適用し、igxCardHeaderSubtitle を <span> などの中立的なインライン要素に適用します。

コンテンツ

IgxCardContentDirective は、カードの本文テキスト、リスト、またはカスタム コンテンツに使用します。

<igx-card-content>
  <p>New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.</p>
</igx-card-content>

エレベーション

カードにエレベーションのある外観を使用する場合は、elevated を設定します。

<igx-card elevated>
  ...
</igx-card>

アクション スロット

アクション スロットを使用して、先頭、中央、末尾のアクションを CardActions に配置します。

<igx-card-actions>
  <button igxButton igxStart>Like</button>
  <button igxButton>Comment</button>
  <button igxIconButton="flat" igxEnd>
    <igx-icon>more_vert</igx-icon>
  </button>
</igx-card-actions>

アクションの方向

アクションを垂直に配置する場合は、igx-card-actions に vertical を設定します。

<igx-card-actions [vertical]="true">
  <button igxButton>Like</button>
  <button igxButton>Share</button>
  <button igxIconButton="flat">
    <igx-icon>more_vert</igx-icon>
  </button>
</igx-card-actions>

レイアウト

カードのセクションを水平に配置したり、メディアとコンテンツの領域に分割したりする場合は、レイアウト ラッパーを使用します。

水平カードの場合、ヘッダーとコンテンツを 1 つのラッパーにグループ化し、そのラッパーの横にアクションを追加して、カード コンテンツに行方向の flex レイアウトを適用します。

<igx-card [horizontal]="true">
  <div igxLayout igxLayoutDir="column" igxFlex [igxFlexGrow]="1">
    <igx-card-header>
      <h5 igxCardHeaderTitle>Rozes</h5>
      <h5 igxCardHeaderSubtitle>Under the Grave (2016)</h5>
      <igx-card-media width="64px" height="64px">
        <img src="https://dl.infragistics.com/x/img/music/rozes.jpg" alt="Rozes album cover" />
      </igx-card-media>
    </igx-card-header>
    <igx-card-content>
      <p>As I have always said: I write what's real and what's true, even if it means throwing myself under the bus.</p>
    </igx-card-content>
  </div>
  <igx-divider [vertical]="true"></igx-divider>
  <igx-card-actions layout="justify">
    <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" igxEnd aria-label="Previous track">
      <igx-icon>skip_previous</igx-icon>
    </button>
    <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" igxEnd aria-label="Play">
      <igx-icon>play_arrow</igx-icon>
    </button>
    <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" igxEnd aria-label="Next track">
      <igx-icon>skip_next</igx-icon>
    </button>
  </igx-card-actions>
</igx-card>

.card-wrapper {
  max-width: 400px;
  min-width: 250px;
}

セミ水平カードの場合、ヘッダー、コンテンツ、アクションを 1 つの列に積み重ねたまま、その列の横にメディア セクションを配置します。

<igx-card [horizontal]="true" elevated>
  <div igxLayout igxLayoutDir="column" igxFlex [igxFlexGrow]="1">
    <igx-card-header>
      <igx-avatar src="https://dl.infragistics.com/x/img/music/singer_with_mic.jpg"></igx-avatar>
      <h5 igxCardHeaderTitle>HERE</h5>
      <h5 igxCardHeaderSubtitle>by Mellow D</h5>
    </igx-card-header>
    <igx-card-content>
      <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
    </igx-card-content>
    <igx-card-actions [vertical]="false">
      <button igxButton="flat" igxRipple igxStart>Play Album</button>
    </igx-card-actions>
  </div>
  <igx-card-media width="96px">
    <img src="https://dl.infragistics.com/x/img/music/singer_female.jpg" alt="Singer" />
  </igx-card-media>
</igx-card>

.card-wrapper {
  max-width: 400px;
  min-width: 250px;
}

推奨/非推奨

Card は通常、概要 UI であり、より詳細な情報へのエントリ ポイントとして機能します。情報を詰め込みすぎないようにしてください。また、Card を使用してダッシュボードを作成する場合は、カード間の水平および垂直の間隔が等しいレイアウト グリッドを形成するように、カードのサイズと配置を統一します。

プロパティ

Card API は、コンテナーの外観、アクションのレイアウト、およびメディア サイズを制御するプロパティを公開します。

スタイル設定

カードの外観はテーマ変数で制御されます。

Sass テーマ

アプリケーションが Sass を通じて Ignite UI テーマをカスタマイズする場合は、card-theme 関数を使用します。

@use "igniteui-theming/sass/themes" as *;

$custom-card-theme: card-theme(
  $background: #1f2937,
  $border-radius: 12px,
  $header-text-color: #ffffff,
  $content-text-color: #e5e7eb
);

:root {
  @include tokens($custom-card-theme);
}

CSS 変数

Sass のビルド ステップなしでローカルにスタイルを設定する場合は、コンポーネントの CSS 変数を直接設定します。

igx-card {
  --background: var(--ig-secondary-900);
  --header-text-color: var(--ig-secondary-900-contrast);
  --content-text-color: var(--ig-secondary-900-contrast);
}

igx-card-header {
  --subtitle-text-color: var(--ig-warn-500);
}

Tailwind によるスタイル設定

Angular アプリケーションがすでに Tailwind を通じて Ignite UI コンポーネントのスタイルを設定している場合は、Tailwind ユーティリティ クラスを使用します。

アクセシビリティ

Card はコンテナーです。グループ化とメディアのセマンティクスはカードの各領域から提供され、キーボード操作性とアクセシブルな名前は、その中に配置するコンテンツから提供されます。

キーボード インタラクション

Card とそのヘッダー、メディア、コンテンツ、アクションの各領域は、キー ハンドラーを宣言せず、タブ順序にも含まれません。フォーカスは、その中に配置したフォーカス可能なコンテンツの間を DOM 順に移動します。

アクション領域は常に、先頭の領域、中央のコンテンツ、末尾の領域の順にレンダリングされます。アクションを垂直レイアウトに切り替えても、DOM の順序は変更されずにスタイルのみが変更されるため、キーボードとスクリーン リーダーの順序は変わりません。

スクリーン リーダー / ARIA

• カード ホストは role="group" と、igx-card-1 の形式で生成された id をレンダリングします。情報アーキテクチャに別のグループ化ロールが適している場合は role 入力を設定し、グループにアクセシブルな名前を付けるために、カード タイトルを aria-labelledby で参照します。
• igx-card-media は role="img" をレンダリングします。これによりメディア領域全体が単一の画像として公開され、その子要素はプレゼンテーション扱いになるため、内部の画像の alt 属性では名前を付けられません。領域自体に aria-label または aria-labelledby で名前を付けるか、メディアが装飾目的の場合は role 入力を presentation に設定します。
• ヘッダー、タイトル、サブタイトル、コンテンツ、アクションの各メンバーは、スタイル クラスのみを追加します。ロールや aria-* 属性は追加しません。
• アクション領域のアイコンのみのボタンには、アクセシブルな名前を付けてください。アイコンだけでは名前は提供されません。
• カード全体で 1 つのアクションを実行する場合は、コンテナーにクリック ハンドラーを割り当てるのではなく、単一のインタラクティブな要素を使用して、アクションがロールと名前を保持するようにします。

アクセシビリティ準拠

Infragistics は、Ignite UI for Angular のアクセシビリティ サポートについて、Section 508 および WCAG 2.1 ガイドライン領域への対応をアクセシビリティ準拠 トピックで文書化しています。

ユーザーの責任:

• カードがドキュメントのアウトラインに含まれるように、タイトルには実際の見出し要素を渡し、サブタイトルはプレーン テキストにします。
• 意味のあるメディアには代替テキストを提供し、画像として公開される場合は、メディア領域にアクセシブルな名前を付けます。
• アイコンのみのアクション ボタンには、アクセシブルな名前を付けます。
• CSS で水平カードや分割カードのレイアウトを構築する場合は、DOM の順序と視覚的な順序を一致させます。
• カードの色をオーバーライドする場合は、十分なコントラストを維持します。

API リファレンス

Card、カード セクション、およびサポート コンポーネントの完全な API については、以下の API リファレンスを参照してください。

依存関係

Card は、独自のヘッダー、メディア、コンテンツ、アクションの各サブコンポーネントを使用します。サムネイル、アクション、アイコン、リップルを含むカードは、対応する Avatar、IgxButtonDirective、IgxIconButtonDirective、Icon、IgxRippleDirective コンポーネントおよびディレクティブにも依存します。

その他のリソース

Ignite UI for Angular Card のサポート、ソース、および関連するレイアウトのガイダンスについては、以下のリソースを参照してください。

• Ignite UI for Angular フォーラム
• Ignite UI for Angular GitHub

関連コンポーネント

ソート、フィルタリング、列レベルの操作を伴う高密度な表形式データが必要な場合は、Grid を使用します。繰り返しアイテムをコンパクトに保ち、主に縦方向に表示する場合は、List を使用します。

FAQ