Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

Circle

Chart class components. There are generally two uses:

Displays the percentage of progress for a task
Count the proportion of certain indicators.

Basic usage

Set the circular progress by setting the Value property

Demo

@inject IStringLocalizer<CircleNormal> Localizer

<Circle Value="@_circleValue" />
<div class="mt-3">
    <div class="btn-group">
        <button class="btn btn-primary" @onclick="e => Add(10)">
            <i class="fa-solid fa-plus"></i>
            <span>@Localizer["IncreaseSpan"] 10</span>
        </button>
        <button class="btn btn-info" @onclick="e => Add(-10)">
            <i class="fa-solid fa-minus"></i>
            <span>@Localizer["DecreaseSpan"] 10</span>
        </button>
    </div>
</div>

@code {
    private int _circleValue = 0;

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

Color

Set the color of the circular progress bar by setting the Color property

Demo

10%

20%

30%

40%

50%

60%

70%

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

The width of the progress bar

Set the width of the circular progress bar by setting the StrokeWidth property

Demo

80%

<div class="d-flex justify-content-between">
    <Circle Value="80" Color="Color.Info" StrokeWidth="5" />
</div>

Customize the display

Customize the display content with custom subcomponents

Demo

42,001,776

The size of the consumer population

Total number of people 75%

@inject IStringLocalizer<CircleChildContent> Localizer

<Circle Width="250" Value="75" Color="Color.Success" StrokeWidth="10" ShowProgress="false">
    <div class="circle-demo">
        <h1>42,001,776</h1>
        <p>@Localizer["ChildContentP1"]</p>
        <span>
            @Localizer["ChildContentSpan"]
            <i>75%</i>
        </span>
    </div>
</Circle>

Attributes

@page "/circles"
@inject IStringLocalizer<Circles> Localizer

<h3>Circle</h3>

<h4>Chart class components. There are generally two uses:</h4>

<ol>
    <li>Displays the percentage of progress for a task</li>
    <li>Count the proportion of certain indicators.</li>
</ol>

<DemoBlock Title="Basic usage" Introduction="Set the circular progress by setting the <code>Value</code> property" Name="Normal" Demo="typeof(Demos.Circle.CircleNormal)" />

<DemoBlock Title="Color" Introduction="Set the color of the circular progress bar by setting the <code>Color</code> property" Name="Color" Demo="typeof(Demos.Circle.CircleColor)" />

<DemoBlock Title="The width of the progress bar" Introduction="Set the width of the circular progress bar by setting the <code>StrokeWidth</code> property" Name="StrokeWidth" Demo="typeof(Demos.Circle.CircleStrokeWidth)" />

<DemoBlock Title="Customize the display" Introduction="Customize the display content with custom subcomponents" Name="ChildContent" Demo="typeof(Demos.Circle.CircleChildContent)" />

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

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// Circles
/// </summary>
public sealed partial class Circles
{
    /// <summary>
    /// GetAttributes
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes()
    {
        return new AttributeItem[]
        {
                new AttributeItem(){
                    Name = "Width",
                    Description = Localizer["Width"],
                    Type = "int",
                    ValueList = "",
                    DefaultValue = "120"
                },
                new AttributeItem(){
                    Name = "StrokeWidth",
                    Description = Localizer["StrokeWidth"],
                    Type = "int",
                    ValueList = "",
                    DefaultValue = "2"
                },
                new AttributeItem()
                {
                    Name = "Value",
                    Description = Localizer["Value"],
                    Type = "int",
                    ValueList = "0-100",
                    DefaultValue = "0"
                },
                new AttributeItem(){
                    Name = "Color",
                    Description = Localizer["Color"],
                    Type = "Color",
                    ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
                    DefaultValue = "Primary"
                },
                new AttributeItem()
                {
                    Name = "ShowProgress",
                    Description = Localizer["ShowProgress"],
                    Type = "bool",
                    ValueList = "true / false",
                    DefaultValue = "true"
                },
                new AttributeItem()
                {
                    Name = "ChildContent",
                    Description = Localizer["ChildContent"],
                    Type = "RenderFragment",
                    ValueList = "",
                    DefaultValue = ""
                }
        };
    }
}

Circle

Chart class components. There are generally two uses:

Demo

Demo

Demo

Demo

42,001,776

Attributes

Bootstrap Blazor Component library updated to 7.2.5-beta02