Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Avatar 头像

用图标、图片或者字符的形式展示用户或事物信息。

通过 IsCircleSize 设置头像的形状和大小。

Demo
Circle
分割线
Square

支持三种类型:图标、图片和字符

Demo
User

通过设置 IsBorder 是否显示头像框边框,此模式下图片加载失败时边框为 border-danger 样式,加载成功时边框为 border-success;其余模式下边框为border-info

Demo
AZ
第一幅圆角正方形头像框加载正确,所以边框为 蓝色
第二幅圆形头像加载图片路径错误,所以边框为 红色,图片显示为默认图标

适用于图片地址由 webapi 等接口异步获取的场景

Demo

Attributes

Loading...
@page "/avatars"

<h3>Avatar 头像</h3>

<h4>用图标、图片或者字符的形式展示用户或事物信息。</h4>

<Block Title="基本用法" Introduction="通过 <code>IsCircle</code> 和 <code>Size</code> 设置头像的形状和大小。">
    <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.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="分割线" />
    <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.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>
</Block>

<Block Title="展示类型" Introduction="支持三种类型:图标、图片和字符">
    <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>
</Block>

<Block Title="边框" Introduction="通过设置 <code>IsBorder</code> 是否显示头像框边框,此模式下图片加载失败时边框为 <code>border-danger</code> 样式,加载成功时边框为 <code>border-success</code>;其余模式下边框为<code>border-info</code>">
    <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">第一幅圆角正方形头像框加载正确,所以边框为 <b class="text-info">蓝色</b></div>
    <div>第二幅圆形头像加载图片路径错误,所以边框为 <b class="text-danger">红色</b>,图片显示为默认图标</div>
</Block>

<Block Title="异步加载" Introduction="适用于图片地址由 <code>webapi</code> 等接口异步获取的场景">
    <div class="d-flex justify-content-between align-items-center">
        <Avatar IsCircle="true" GetUrlAsync="@GetUrlAsync" />
    </div>
</Block>

<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;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Avatars
    {
        private async Task<string> GetUrlAsync()
        {
            // 模拟异步获取图像地址
            await Task.Delay(500);
            return "_content/BootstrapBlazor.Shared/images/Argo-C.png";
        }
        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<AttributeItem> GetAttributes() => new[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Size",
                Description = "头像框大小",
                Type = "Size",
                ValueList = "ExtraSmall|Small|Medium|Large|ExtraLarge",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsBorder",
                Description = "是否显示边框",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsCircle",
                Description = "是否为圆形",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsIcon",
                Description = "是否为图标",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsText",
                Description = "是否为显示为文字",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Icon",
                Description = "头像框显示图标",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "fa fa-user"
            },
            new AttributeItem() {
                Name = "Text",
                Description = "头像框显示文字",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Url",
                Description = "Image 头像路径地址",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "GetUrlAsync",
                Description = "获取 Image 头像路径地址异步回调委托",
                Type = "Func<Task<string>>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload