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()" />
根据相关法律政策,该内容无法显示

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload