Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Circle 进度环

图表类组件。一般有两种用途:

  1. 显示某项任务进度的百分比
  2. 统计某些指标的占比。

通过设置 Value 属性设定圆形进度

Demo
0%

通过设置 Color 属性设定圆形进度条颜色

Demo
10%
20%
30%
40%
50%
60%
70%

通过设置 StrokeWidth 属性设定圆形进度条宽度

Demo
80%

通过自定义子组件自定义显示内容

Demo
75%

42,001,776

消费人群规模

总占人数 75%

Attributes

Loading...
@page "/circles"

<h3>Circle 进度环</h3>

<h4>图表类组件。一般有两种用途:</h4>

<ol>
    <li>显示某项任务进度的百分比</li>
    <li>统计某些指标的占比。</li>
</ol>

<Block Title="基本用法" Introduction="通过设置 <code>Value</code> 属性设定圆形进度">
    <Circle Value="@CircleValue" />
    <div class="mt-3">
        <div class="btn-group">
            <button class="btn btn-primary" @onclick="e => Add(10)">
                <i class="fa fa-plus"></i>
                <span>增加 10</span>
            </button>
            <button class="btn btn-info" @onclick="e => Add(-10)">
                <i class="fa fa-minus"></i>
                <span>减少 10</span>
            </button>
        </div>
    </div>
</Block>

<Block Title="颜色" Introduction="通过设置 <code>Color</code> 属性设定圆形进度条颜色">
    <div class="d-flex justify-content-between">
        <Circle Value="10" Color="Color.Primary" />
        <Circle Value="20" Color="Color.Success" />
        <Circle Value="30" Color="Color.Info" />
        <Circle Value="40" Color="Color.Warning" />
        <Circle Value="50" Color="Color.Danger" />
        <Circle Value="60" Color="Color.Secondary" />
        <Circle Value="70" Color="Color.Dark" />
    </div>
</Block>

<Block Title="进度条宽度" Introduction="通过设置 <code>StrokeWidth</code> 属性设定圆形进度条宽度">
    <div class="d-flex justify-content-between">
        <Circle Value="80" Color="Color.Info" StrokeWidth="5" />
    </div>
</Block>

<Block Title="自定义显示内容" Introduction="通过自定义子组件自定义显示内容">
    <Circle Width="250" Value="75" Color="Color.Success" StrokeWidth="10" ShowProgress="false">
        <div class="circle-demo">
            <h1>42,001,776</h1>
            <p>消费人群规模</p>
            <span>
                总占人数
                <i>75%</i>
            </span>
        </div>
    </Circle>
</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;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Circles
    {
        private int CircleValue = 0;

        private void Add(int interval)
        {
            CircleValue += interval;
            CircleValue = Math.Min(100, Math.Max(0, CircleValue));
        }

        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes()
        {
            return new AttributeItem[]
            {
                new AttributeItem(){
                    Name = "Width",
                    Description = "组件宽度",
                    Type = "int",
                    ValueList = "",
                    DefaultValue = "120"
                },
                new AttributeItem(){
                    Name = "StrokeWidth",
                    Description = "进度条宽度",
                    Type = "int",
                    ValueList = "",
                    DefaultValue = "2"
                },
                new AttributeItem()
                {
                    Name = "Value",
                    Description = "当前进度",
                    Type = "int",
                    ValueList = "0-100",
                    DefaultValue = "0"
                },
                new AttributeItem(){
                    Name = "Color",
                    Description = "进度条颜色",
                    Type = "Color",
                    ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
                    DefaultValue = "Primary"
                },
                new AttributeItem()
                {
                    Name = "ShowProgress",
                    Description = "是否显示进度条信息",
                    Type = "bool",
                    ValueList = "true / false",
                    DefaultValue = "true"
                },
                new AttributeItem()
                {
                    Name = "ChildContent",
                    Description = "子组件",
                    Type = "RenderFragment",
                    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