Card (カード)

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

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

ライブ デモ

構造

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

igc-card                         // host - groups related content
├─ igc-card-media                 // optional media region
│  └─ default slot                // image, video, or other media content
├─ igc-card-header                // optional header region
│  ├─ [slot="thumbnail"]          // optional avatar, icon, or small image
│  ├─ [slot="title"]              // card title
│  ├─ [slot="subtitle"]           // optional card subtitle
│  └─ default slot                // optional additional header content
├─ igc-card-content               // optional body region
│  └─ default slot                // text, lists, or custom content
└─ igc-card-actions               // optional action region
   ├─ [slot="start"]              // leading actions
   ├─ default slot                // centered actions
   └─ [slot="end"]                // trailing actions

作業の開始

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

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

npm install igniteui-react

次に、以下のように、Card ラッパーとテーマ CSS をインポートする必要があります:

import {
  IgrCard,
  IgrCardActions,
  IgrCardContent,
  IgrCardHeader,
  IgrCardMedia,
} from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrAvatar、IgrButton、IgrIconButton など、カード コンテンツで使用するその他のラッパーもインポートします。

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

<IgrCard>
  <IgrCardHeader>
    <h3 slot="title">Title</h3>
  </IgrCardHeader>
  <IgrCardContent>
    <p>Content</p>
  </IgrCardContent>
</IgrCard>

使用方法

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

メディア

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

<IgrCardMedia>
  <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" />
</IgrCardMedia>

位置

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

ヘッダー スロット

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

<IgrCardHeader>
  <IgrAvatar slot="thumbnail" initials="TS" />
  <h3 slot="title">Title</h3>
  <span slot="subtitle">Subtitle</span>
</IgrCardHeader>

カードがドキュメントのアウトラインに含まれるように、title スロットには <h3> などの見出し要素を渡し、subtitle には <span> などの中立的なインライン要素を使用します。ヘッダーはスロットされたコンテンツのマージンとフォントをリセットするため、見出しにはカードのタイポグラフィが適用されます。

コンテンツ

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

<IgrCardContent>
  <p>New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.</p>
</IgrCardContent>

エレベーション

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

<IgrCard elevated={true}>
  ...
</IgrCard>

アクション スロット

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

<IgrCardActions>
  <IgrButton slot="start">Like</IgrButton>
  <IgrButton>Comment</IgrButton>
  <IgrIconButton slot="end" name="more_vert" />
</IgrCardActions>

アクションの方向

orientation プロパティを使用して、IgrCardActions のコンテンツを水平または垂直に配置します。アクションはデフォルトで水平に配置されるため、縦に積み重ねるには orientation を vertical に設定します。

<IgrCardActions orientation="vertical">
  <IgrButton slot="start">Like</IgrButton>
  <IgrButton slot="start">Share</IgrButton>
  <IgrIconButton slot="end" name="more_vert" />
</IgrCardActions>

レイアウト

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

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

<IgrCard>
  <div className="card-horizontal">
    <div>
      <IgrCardHeader>
        <img src="https://dl.infragistics.com/x/img/music/rozes.jpg" slot="thumbnail" alt="Rozes album cover" />
        <span slot="title">Rozes</span>
        <span slot="subtitle">Under the Grave (2016)</span>
      </IgrCardHeader>
      <IgrCardContent>
        <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>
      </IgrCardContent>
    </div>
    <div className="divider"></div>
    <IgrCardActions>
      <IgrIconButton variant="flat" name="skip_previous" aria-label="Previous track" />
      <IgrIconButton variant="flat" name="play_arrow" aria-label="Play" />
      <IgrIconButton variant="flat" name="skip_next" aria-label="Next track" />
    </IgrCardActions>
  </div>
</IgrCard>

.card-horizontal {
  display: flex;
  flex-direction: row;
  flex: 1 1 0%;
}

.card-horizontal igc-card-actions {
  justify-content: center;
}

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

<IgrCard>
  <div className="semi-horizontal">
    <div>
      <IgrCardHeader>
        <IgrAvatar src="https://dl.infragistics.com/x/img/music/singer_with_mic.jpg" slot="thumbnail" />
        <span slot="title">HERE</span>
        <span slot="subtitle">by Mellow D</span>
      </IgrCardHeader>
      <IgrCardContent>
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
      </IgrCardContent>
      <IgrCardActions>
        <IgrButton>Play Album</IgrButton>
      </IgrCardActions>
    </div>
    <IgrCardMedia className="card-media">
      <img src="https://dl.infragistics.com/x/img/music/singer_female.jpg" alt="Singer" />
    </IgrCardMedia>
  </div>
</IgrCard>

.semi-horizontal {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.card-media {
  width: 96px;
  min-width: 96px;
}

推奨/非推奨

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

プロパティ

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

スタイル設定

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

カード ヘッダーは、テキスト コンテナー用の CSS パーツも公開します。

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 変数を直接設定します。

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

igc-card-header::part(subtitle) {
  color: var(--ig-warn-500);
}

Tailwind によるスタイル設定

アプリケーションがすでに Tailwind を使用していて、カードのレイアウトとローカルな色の選択をコンポーネントのマークアップ内に保持したい場合は、Tailwind ユーティリティ クラスを使用します。

アクセシビリティ

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

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

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

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

スクリーン リーダー / ARIA

• Card とすべてのカード領域は単純なスロットをレンダリングし、role や aria-* 属性を設定しません。ヘッダー内のラッパー要素にはアクセシブルな名前がなく、ランドマークも作成しません。情報アーキテクチャで必要な場合は、カード ホストにロールとアクセシブルな名前を自分で追加してください。
• title および subtitle スロットは、渡された要素をそのままレンダリングし、見出しレベルを強制しません。
• メディア領域内の画像には alt テキストを追加します。
• アクション領域のアイコンのみのボタンには、アクセシブルな名前を付けてください。アイコンだけでは名前は提供されません。
• カード全体で 1 つのアクションを実行する場合は、コンテナーにクリック ハンドラーを割り当てるのではなく、単一のインタラクティブな要素を使用して、アクションがロールと名前を保持するようにします。

アクセシビリティ準拠

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

ユーザーの責任:

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

API リファレンス

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

依存関係

Card は、独自のヘッダー、メディア、コンテンツ、アクションの各サブコンポーネントを使用します。サムネイル、アクション、アイコン、リップルを含むカードは、対応する IgrAvatar、IgrButton、IgrIconButton、IgrIcon、IgrRipple コンポーネントにも依存します。

Card ラッパーと、カード コンテンツで使用するサポート ラッパーをインポートします。Ignite UI for React テーマ スタイルシートは、アプリケーションに 1 回だけ含めます。

その他のリソース

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

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

関連コンポーネント

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

FAQ