Avatar (アバター) コンポーネント

Ignite UI for React Avatar は、画像、イニシャル、またはカスタム コンテンツを使用してユーザー、エンティティ、またはオブジェクトを表します。

アバターを使用して、リスト、カード、プロフィール メニュー、アクティビティ フィードでコンパクトな視覚的アイデンティティを提供します。

ライブ デモ

構造

アバターは、画像のセマンティクスを適用し、サポートされているコンテンツ パターンのいずれかをレンダリングする単一のホスト要素です。

igc-avatar[role="img"]           // ホスト - アバターを公開
└─ div[part="base"]              // アバター ラッパー
   ├─ span[part="initials"]      // `initials` が設定されている場合にレンダリング
   ├─ slot                       // `initials` が設定されていない場合にレンダリング
   └─ img[part="image"]          // `src` が設定され読み込まれている間にレンダリング

作業の開始

アバターをレンダリングする前に React ラッパーとテーマ スタイルシートをインポートします。Ignite UI for React をまだセットアップしていない場合は、最初に共通の作業の開始トピックを完了してください。

import { IgrAvatar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

使用方法

デフォルト スロットに画像ソース、イニシャル、またはカスタム コンテンツを使用してアバターをレンダリングします。

バリアント

表示するコンテンツ ソースのみを設定します。アバターは Initials が設定されている場合にそれをレンダリングし、そうでない場合はデフォルト スロット コンテンツをレンダリングします。また、Src が設定されて正常に読み込まれている間は画像要素もレンダリングします。

<IgrAvatar initials="AZ" />

<IgrAvatar
  src="https://static.infragistics.com/xplatform/images/people/men/1.jpg"
  alt="A photo of Ana Zane"
/>

<IgrAvatar>
  <IgrIcon name="home" />
</IgrAvatar>

形状

Shape を square、rounded、または circle に設定します。

<IgrAvatar initials="AZ" shape="circle" />

サイズ

プリセット アバター サイズが必要な場合は、--ig-size を共通サイズ トークンのいずれかに設定します。

igc-avatar {
  --ig-size: var(--ig-size-large);
}

使用すべき場合と使用すべきでない場合

使用すべき場合: プロフィール画像、イニシャル、またはアイコンなど、UI が人物、組織、オブジェクト、またはアカウントの小さな表現を必要とする場合にアバターを使用します。繰り返し表示されるアイデンティティを簡単に識別できるように、同じ UI 領域内で一貫したアバター戦略を維持します。

使用すべきでない場合: エンティティを表す代わりにカウント、ステータス、または通知インジケーターを表示する必要がある場合は、Badge コンポーネントを使用します。アイデンティティとステータスの両方を一緒に表示する必要がある場合、バッジはアバターを装飾することもできます。

使用すべき	使用すべきでない

プロパティ

アバターは、コンテンツと形状のための小さな入力セットを公開します。

スタイル設定

アバターの外観はテーマ変数とプラットフォーム固有のスタイル設定フックを通じて制御されます。

トークン レベルの変更にはアバター CSS 変数を使用し、レンダリングされたラッパー、画像、アイコン、またはイニシャルをターゲットにする必要がある場合は CSS パーツを使用します。

Sass テーマ

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

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

$custom-avatar-theme: avatar-theme(
  $background: #72da67,
  $border-radius: 16px,
  $size: 3rem
);

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

CSS 変数

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

igc-avatar {
  --ig-avatar-background: var(--ig-success-500);
  --ig-avatar-color: var(--ig-success-500-contrast);
  --ig-avatar-border-radius: 20px;
}

igc-avatar::part(base) {
  border: 2px solid var(--ig-success-700);
}

Tailwind によるスタイル設定

Ignite UI コンポーネント トークンと共にユーティリティ ファーストのレイアウト スタイリングが必要な場合は、Ignite UI for React Avatar で Tailwind ユーティリティ クラスを使用します。

アクセシビリティ

アバターは、アクセシブルな画像セマンティクスを持つ非インタラクティブなアイデンティティ表示要素です。

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

アバターはフォーカスを受け取らず、キーボード インタラクションはありません。

スクリーン リーダー / ARIA

アバターは画像のセマンティクスと avatar のデフォルトのアクセシブル ラベルで初期化されます。

• src 画像が特定の人物、エンティティ、またはオブジェクトを表す場合は alt を設定します。
• プロジェクションされたカスタム コンテンツに別のアクセシブルな名前が必要な場合は、明示的な aria-label を追加します。
• 隣接するテキストがすでに同じエンティティを識別している場合、装飾的なアバターを冗長として扱います。

アクセシビリティ準拠

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

ユーザー側の責任:

• スタイルをオーバーライドするときに、アバターの背景とテキストまたはアイコンの色のコントラストを十分に保ちます。

• 隣接するテキストがすでに人物またはエンティティの名前を示している場合、同じアイデンティティのアナウンスを重複させないようにします。

• アバターがアイデンティティを伝える場合は、説明的なラベルまたは alt テキストを提供してください。

トラブルシューティング

Avatar をインタラクティブまたはステータス コンポーネントとして扱う前に、このセクションを使用して境界と一般的な決定を確認してください。

既知の制限

アバターは視覚的なアイデンティティのプリミティブであり、それ自体ではインタラクション、ステータス、または通知動作を追加しません。

• 表現されるエンティティがクリック可能でなければならない場合は、ボタンやリスト アイテムなどのインタラクティブなコンテナーを使用します。
• ステータス、カウント、または通知インジケーターを表示する必要がある場合は、アバターにバッジを使用します。

API リファレンス

完全なアバター API サーフェスについては、これらの API リファレンスを使用してください。

依存関係

スロット アイコンには、IgrIcon コンポーネントの登録またはインポートが必要です。

アバターはデフォルトの外観に共通テーマ スタイルシートも使用します。

その他のリソース

サポートおよび関連する Ignite UI ドキュメントについては、これらのリソースを使用してください。

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

関連コンポーネント

アイデンティティをステータス、アクション、またはより豊富なレイアウトと組み合わせる必要がある場合は、これらの関連コンポーネントを使用してください。

• Badge - カウント、ステータス、または通知インジケーターを表示するには Badge を使用します。UI にアイデンティティとステータスの両方が必要な場合、Badge は Avatar を装飾できます。

FAQ