React Avatar (アバター)

Ignite UI for React アバターは、アプリケーションでイニシャル、画像、またはアイコンを表示するのに役立ちます。

React Icon Avatar の例

使用方法

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

次に、以下のように、IgrAvatar とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

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

IgrAvatarModule.register();

Ignite UI for React の完全な概要については、作業の開始トピックを参照してください。

IgrAvatar は、画像、イニシャル、またはアイコンを含むその他のコンテンツを表示できます。IgrAvatar の宣言は次のように簡単です。

<IgrAvatar />

アバターには、コンテキストに基づいてさまざまなコンテンツを描画できるようにするいくつかの属性があります。アバターの境界にコンテンツを表示する最も基本的な方法は、開始タグと終了タグの間にコンテンツを提供することです。

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

イニシャル

initials 属性が設定されている場合、アバターのすべての子要素は無視され、この属性に渡された文字列が表示されます。

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

画像

src 属性に静的アセットに有効な URL が割り当てられている場合、アバターは画像を表示することもできます。その場合、initials 値は無視され、子要素は描画されません。

<IgrAvatar initials="AZ"
           src="https://static.infragistics.com/xplatform/images/people/men/1.jpg"
           alt="A photo of a man.">
    <IgrIcon name="home" />
</IgrAvatar>

形状

アバターは、circle、rounded、square の 3 つの形状をサポートしています。アバターの形状は square であり、shape 属性を介して変更できます。

サイズ

形状とは別に、アバターのサイズも --ig-size CSS 変数を利用して変更できます。サポートされているサイズは、small (デフォルト)、medium、large です。次のコードスニペットは、異なるコンポーネントサイズを使用する方法を示しています。

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

スタイル設定

アバターコンポーネントは、すべてのスタイルプロパティを変更するために使用できる base パーツを公開します。

igc-avatar::part(base) {
  --size: 72px;
  color: olive;
  background: beige;
  border-radius: 20px;
}

API リファレンス

IgrAvatar