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

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

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

ライブ デモ

構造

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

igx-avatar[role="img"]           // ホスト - アバターを公開
└─ 優先順位順に以下のいずれか:
   ├─ div.igx-avatar__image      // `src` が設定されている場合 - 背景として画像をレンダリング
   ├─ igx-icon                   // `icon` が設定されている場合
   ├─ span                       // `initials` が設定されている場合 - 最初の 2 文字
   └─ ng-content                 // カスタム プロジェクション コンテンツ

作業の開始

<igx-avatar> をレンダリングする前に Angular アバター コンポーネントをインポートします。Ignite UI for Angular をまだセットアップしていない場合は、最初に共通の作業の開始トピックを完了してください。

import { IgxAvatarComponent } from 'igniteui-angular/avatar';

使用方法

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

バリアント

表示するコンテンツ ソースのみを設定します。Angular アバターは、最初に src をレンダリングし、次に icon、次に initials をレンダリングし、これらのいずれの入力も設定されていない場合はプロジェクションされたカスタム コンテンツにフォールバックします。

<igx-avatar initials="AZ"></igx-avatar>

<igx-avatar src="https://static.infragistics.com/xplatform/images/people/men/1.jpg"></igx-avatar>

<igx-avatar icon="home"></igx-avatar>

形状

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

<igx-avatar initials="AZ" shape="circle"></igx-avatar>

サイズ

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

<igx-avatar initials="AZ" size="large"></igx-avatar>

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

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

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

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

プロパティ

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

スタイル設定

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

トークン レベルの変更にはアバター CSS 変数を使用し、特定のレンダリング タイプや形状をターゲットにする必要がある場合は Angular ホスト クラスを使用します。

Sass テーマ

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

@use "igniteui-angular/theming" as *;

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

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

CSS 変数

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

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

Tailwind によるスタイル設定

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

アクセシビリティ

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

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

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

スクリーン リーダー / ARIA

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

• 画像アバターがアイデンティティを伝える場合、周囲のテキストを使用して表現される人物、エンティティ、またはオブジェクトを識別します。
• 隣接するテキストがすでに同じエンティティを識別している場合、装飾的なアバターを冗長として扱います。

アクセシビリティ準拠

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

ユーザー側の責任:

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

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

• アバター画像がアイデンティティを伝える場合、近くのテキストが表現されるエンティティを識別していることを確認します。

トラブルシューティング

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

既知の制限

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

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

API リファレンス

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

依存関係

Sass スタイル設定ワークフローは、IgxAvatar Theme および IgxIcon Theme API を使用します。

その他のリソース

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

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

関連コンポーネント

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

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

FAQ