Blazor 组件库 BootstrapBlazor 中Circle组件介绍

组件介绍

Circle进度环组件，是一个图表类组件。一般有两种用途：

1. 显示某项任务进度的百分比。

2. 统计某些指标的占比。

它的样子如下：

它的代码如下：

<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>

组件的其他属性

Width：组件的宽度，单位为px，默认为120。

StrokeWidth：进度条的宽度，默认为2。

Value：int型数字，只能在0-100范围内取值。

Color：进度条颜色，可选值有 Primary / Secondary / Success / Danger / Warning / Info / Dark，默认值为Primary。

ShowProgress：是否显示进度信息，默认为true，会在组件中间显示百分比。

ChildContent：子组件，即进度环中间部分的内容模板，RenderFragment，如果使用ChildContent，请将ShowProgress设为false。