Blazor Avatar
The Ignite UI for Blazor Avatar helps to display initials, images, or icons in your application.
Blazor Icon Avatar Example
Usage
Before using the IgbAvatar
, you need to register it as follows:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule));
You will also need to link an additional CSS file to apply the styling to the IgbAvatar
component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
The IgbAvatar
is capable of displaying images, initials, or any other content, including icons. Declaring an IgbAvatar
is as simple as:
<IgbAvatar />
The avatar has several attributes that allow rendering different content based on the context. The most basic way to display content in the boundaries of the avatar is to provide content between the opening and closing tags.
<IgbAvatar>
<IgbIcon Name="home" />
</IgbAvatar>
Initials
If the initials
attribute is set all children elements of the avatar will be ignored and the string passed to this attribute will be displayed.
<!-- Initials("AZ") will be displayed instead of the icon. -->
<IgbAvatar Initials="AZ">
<IgbIcon Name="home" />
</IgbAvatar>
Image
The avatar can also display an image when the src
attribute is assigned a valid URL to a static asset. In that case the initials
value will be ignored and children elements will not be rendered.
<IgbAvatar Initials="AZ"
Src="https://static.infragistics.com/xplatform/images/people/GUY01.png"
Alt="A photo of a man.">
<IgbIcon Name="home" />
</IgbAvatar>
The avatar supports three shapes - circle
, rounded
, and square
. The shape of the avatar can be changed via the shape
attribute.
Shape
Size
Apart from the shape, the size of the avatar can also be changed by setting the size
attribute. The supported sizes are small
, medium
, and large
.
Styling
The avatar component exposes a base
part that can be used to change all of its style properties.
igc-avatar::part(base) {
--size: 72px;
color: olive;
background: beige;
border-radius: 20px;
}