Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Avatar

Present user or thing information as icons, pictures, or characters.

Basic usage

Set the shape and size of your avatar IsCircle and Size.

Demo

Circle

Split the line

Square

@inject IStringLocalizer<AvatarNormal> Localizer

<div class="d-flex flex-column">
    <div class="text-center mb-2">Circle</div>
    <div class="d-flex justify-content-between align-items-center">
        <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" IsCircle="true" Size="Size.ExtraExtraLarge" />
        <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" IsCircle="true" Size="Size.ExtraLarge" />
        <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" IsCircle="true" Size="Size.Large" />
        <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" IsCircle="true" />
        <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" IsCircle="true" Size="Size.Small" />
        <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" IsCircle="true" Size="Size.ExtraSmall" />
    </div>
</div>
<Divider Text="@Localizer["BasicUsageDivider"]" />
<div class="d-flex flex-column">
    <div class="text-center my-2">Square</div>
    <div class="d-flex justify-content-between align-items-center">
        <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo.png" Size="Size.ExtraExtraLarge" />
        <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo.png" Size="Size.ExtraLarge" />
        <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo.png" Size="Size.Large" />
        <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo.png" />
        <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo.png" Size="Size.Small" />
        <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo.png" Size="Size.ExtraSmall" />
    </div>
</div>

The type of presentation

Three types are supported: icons, pictures, and characters

Demo

User

<div class="d-flex justify-content-between align-items-center">
    <Avatar IsCircle="true" IsIcon="true" Icon="fa-solid fa-user" />
    <Avatar IsCircle="true" Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" />
    <Avatar IsCircle="true" IsText="true" Text="User" />
</div>

Border

By setting the IsBorder whether to display the avatar border, the border in this mode when the picture fails to load is border-danger style, and when the load is successful, the border is border-success; The borders in the remaining modes are border-info

Demo

The first fillet square avatar box is loaded correctly, so the border is blue

The second circular avatar loads the picture path incorrectly, so the border is red and the picture appears as the default icon

@inject IStringLocalizer<AvatarBorder> Localizer
<div class="d-flex justify-content-between align-items-center">
    <Avatar IsCircle="false" IsBorder="true" Url="_content/BootstrapBlazor.Shared/images/avatar2.png" />
    <Avatar IsCircle="true" IsBorder="true" Url="_content/BootstrapBlazor.Shared/images/Argo-c1.png" />
    <Avatar IsCircle="true" IsBorder="true" IsIcon="true" Icon="fa-solid fa-tv" />
    <Avatar IsCircle="true" IsBorder="true" IsText="true" Text="AZ" />
</div>
<div class="mt-3">@((MarkupString)Localizer["BorderDiv1"].Value)</div>
<div>@((MarkupString)Localizer["BorderDiv2"].Value)</div>

Asynchronous loading

Suitable for scenarios where the picture address is obtained asynchronously by interfaces such as webapi

Demo

<div class="d-flex justify-content-between align-items-center">
    <Avatar IsCircle="true" GetUrlAsync="@GetUrlAsync" />
</div>

@code {
    private static async Task<string> GetUrlAsync()
    {
        // 模拟异步获取图像地址
        await Task.Delay(500);
        return "_content/BootstrapBlazor.Shared/images/Argo-C.png";
    }
}

Attributes

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Avatar

Present user or thing information as icons, pictures, or characters.

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01