
Avatar
Present user or thing information as icons, pictures, or characters.
Set the shape and size of your avatar IsCircle
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>IsCircle</code> and <code>Size</code>." Name="Normal" Demo="typeof(Demos.Avatar.AvatarNormal)" />
<DemoBlock Title="The type of presentation" Introduction="Three types are supported: icons, pictures, and characters" Name="Icon" Demo="typeof(Demos.Avatar.AvatarIcon)" />
<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" Demo="typeof(Demos.Avatar.AvatarBorder)" />
<DemoBlock Title="Asynchronous loading" Introduction="Suitable for scenarios where the picture address is obtained asynchronously by interfaces such as <code>webapi</code>" Name="Circle" Demo="typeof(Demos.Avatar.AvatarCircle)" />
<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/
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class Avatars
{
/// <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-solid 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 = " — "
}
};
}