Blazor Avatar (アバター)

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

Blazor Icon Avatar の例

使用方法

IgbAvatar を使用する前に、次のように登録する必要があります。

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule));

また、追加の CSS ファイルをリンクして、スタイルを IgbAvatar コンポーネントに適用する必要があります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

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

<IgbAvatar />

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

<IgbAvatar>
  <IgbIcon Name="home" />
</IgbAvatar>

イニシャル

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

<!-- Initials("AZ") will be displayed instead of the icon. -->

<IgbAvatar Initials="AZ">
  <IgbIcon Name="home" />
</IgbAvatar>

画像

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

<IgbAvatar Initials="AZ"
           Src="https://static.infragistics.com/xplatform/images/people/GUY01.png"
           Alt="A photo of a man.">
  <IgbIcon Name="home" />
</IgbAvatar>

形状

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

サイズ

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

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

スタイル設定

IgbAvatar コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。

igc-avatar {
  --ig-avatar-background: var(--ig-success-500);
}

igc-avatar::part(base) {
  --size: 60px;
  color: var(--ig-success-500-contrast);
  border-radius: 20px;
}

API リファレンス

その他のリソース

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