
Circle 进度环
图表类组件。一般有两种用途:
- 显示某项任务进度的百分比
- 统计某些指标的占比。
基本用法
通过设置 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 = ""
}
};
}
}
}