
Avatar
Present user or thing information as icons, pictures, or characters.
Set the shape and size of your avatar is
and Size
.
Demo












Three types are supported: icons, pictures, and characters
Demo

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


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

Attributes
@page "/avatars"
@inject IStringLocalizer<Avatars> Localizer
<h3>Avatar</h3>
<h4>Present user or thing information as icons, pictures, or characters.</h4>
<DemoBlock Title="Basic usage" Introduction="Set the shape and size of your avatar <code>is</code> and <code>Size</code>." Name="Normal">
<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="Split the line" />
<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>
</DemoBlock>
<DemoBlock Title="The type of presentation" Introduction="Three types are supported: icons, pictures, and characters" Name="Icon">
<div class="d-flex justify-content-between align-items-center">
<Avatar IsCircle="true" IsIcon="true" Icon="fa fa-user" />
<Avatar IsCircle="true" Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" />
<Avatar IsCircle="true" IsText="true" Text="User" />
</div>
</DemoBlock>
<DemoBlock Title="Border" Introduction="By setting the <code>IsBorder</code> whether to display the avatar border, the border in this mode when the picture fails to load is <code>border-danger</code> style, and when the load is successful, the border is <code>border-success</code>; The borders in the remaining modes are <code>border-info</code>" Name="Border">
<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 fa-tv" />
<Avatar IsCircle="true" IsBorder="true" IsText="true" Text="AZ" />
</div>
<div class="mt-3">The first fillet square avatar box is loaded correctly, so the border is <b class='text-info' > blue </b></div>
<div>The second circular avatar loads the picture path incorrectly, so the border is <b class='text-danger'> red</b>and the picture appears as the default icon</div>
</DemoBlock>
<DemoBlock Title="Asynchronous loading" Introduction="Suitable for scenarios where the picture address is obtained asynchronously by interfaces such as <code>webapi</code>" Name="Circle">
<div class="d-flex justify-content-between align-items-center">
<Avatar IsCircle="true" GetUrlAsync="@GetUrlAsync" />
</div>
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Shared.Common;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class Avatars
{
private static async Task<string> GetUrlAsync()
{
// 模拟异步获取图像地址
await Task.Delay(500);
return "_content/BootstrapBlazor.Shared/images/Argo-C.png";
}
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "Size",
Description = Localizer["Size"],
Type = "Size",
ValueList = "ExtraSmall|Small|Medium|Large|ExtraLarge|ExtraExtraLarge",
DefaultValue = "None"
},
new AttributeItem() {
Name = "IsBorder",
Description = Localizer["IsBorder"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "IsCircle",
Description = Localizer["IsCircle"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "IsIcon",
Description = Localizer["IsIcon"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "IsText",
Description = Localizer["IsText"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "Icon",
Description = Localizer["Icon"],
Type = "string",
ValueList = " — ",
DefaultValue = "fa fa-user"
},
new AttributeItem() {
Name = "Text",
Description = Localizer["Text"],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Url",
Description = Localizer["Url"],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "GetUrlAsync",
Description = Localizer["GetUrlAsync"],
Type = "Func<Task<string>>",
ValueList = " — ",
DefaultValue = " — "
}
};
}