Web Components Avatar (アバター)
Ignite UI for Web Components アバターは、アプリケーションでイニシャル、画像、またはアイコンを表示するのに役立ちます。
Web Components Icon Avatar の例
使用方法
まず、次のコマンドを実行して Ignite UI for Web Components npm パッケージをインストールする必要があります。
npm install igniteui-webcomponents
import { defineComponents, IgcAvatarComponent } from 'igniteui-webcomponents';
defineComponents(IgcAvatarComponent);
Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。
IgcAvatarComponent は、画像、イニシャル、またはアイコンを含むその他のコンテンツを表示できます。IgcAvatarComponent の宣言は次のように簡単です。
<igc-avatar></igc-avatar>
アバターには、コンテキストに基づいてさまざまなコンテンツを描画できるようにするいくつかの属性があります。アバターの境界にコンテンツを表示する最も基本的な方法は、開始タグと終了タグの間にコンテンツを提供することです。
<igc-avatar>
<igc-icon name="home"></igc-icon>
</igc-avatar>
イニシャル
initials 属性が設定されている場合、アバターのすべての子要素は無視され、この属性に渡された文字列が表示されます。
<!-- Initials("AZ") will be displayed instead of the icon. -->
<igc-avatar initials="AZ">
<igc-icon name="home"></igc-icon>
</igc-avatar>
画像
src 属性に静的アセットに有効な URL が割り当てられている場合、アバターは画像を表示することもできます。その場合、initials 値は無視され、子要素は描画されません。
<igc-avatar
initials="AZ"
src="https://www.infragistics.com/angular-demos/assets/images/men/1.jpg"
alt="A photo of a man.">
<igc-icon name="home"></igc-icon>
</igc-avatar>
形状
アバターは、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;
}