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" />
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 つの形状をサポートしています。アバターの形状は、shape
属性を介して変更できます。
形状
サイズ
形状とは別に、size
属性を設定することでアバターのサイズを変更することもできます。サポートされているサイズは small
、medium
、large
です。
スタイル設定
アバター コンポーネントは、すべてのスタイル プロパティを変更するために使用できる base
パーツを公開します。
igc-avatar::part(base) {
--size: 72px;
color: olive;
background: beige;
border-radius: 20px;
}