Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Progress 进度条

用于展示操作进度,告知用户当前状态和预期

进度条组件

常用的进度条

Demo

显示值

通过 IsShowValue 设置进度条值显示

Demo
25%

设置进度条高度

通过 Height 进度条高度设置

Demo
25%

带颜色进度条

设置进度条颜色

Demo
25%
50%
75%
100%

是否显示条纹

通过 IsStriped 设置进度条的条纹设置

Demo
25%
50%
75%
100%

是否动态显示

通过 IsAnimated 设置进度条的动态显示

Demo
25%
50%
75%
100%

双向绑定数据

绑定数据

Demo
75%

Attributes

Loading...
@page "/progresss"

<h3>Progress 进度条</h3>

<h4>用于展示操作进度,告知用户当前状态和预期</h4>

<Block Title="进度条组件" Introduction="常用的进度条">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Progress Value="0"></Progress>
            </div>
            <div class="form-group col-12">
                <Progress Value="25"></Progress>
            </div>
            <div class="form-group col-12">
                <Progress Value="50"></Progress>
            </div>
            <div class="form-group col-12">
                <Progress Value="75"></Progress>
            </div>
            <div class="form-group col-12">
                <Progress Value="100"></Progress>
            </div>
        </div>
    </div>
</Block>

<Block Title="显示值" Introduction="通过 <code>IsShowValue</code> 设置进度条值显示">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Progress Value="25" IsShowValue="true"></Progress>
            </div>
        </div>
    </div>
</Block>

<Block Title="设置进度条高度" Introduction="通过 <code>Height</code> 进度条高度设置">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Progress Value="25" IsShowValue="true" Height="32"></Progress>
            </div>
        </div>
    </div>
</Block>

<Block Title="带颜色进度条" Introduction="设置进度条颜色">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Progress Value="25" Color="Color.Success" IsShowValue="true"></Progress>
            </div>
            <div class="form-group col-12">
                <Progress Value="50" Color="Color.Info" IsShowValue="true"></Progress>
            </div>
            <div class="form-group col-12">
                <Progress Value="75" Color="Color.Warning" IsShowValue="true"></Progress>
            </div>
            <div class="form-group col-12">
                <Progress Value="100" Color="Color.Danger" IsShowValue="true"></Progress>
            </div>
        </div>
    </div>
</Block>

<Block Title="是否显示条纹" Introduction="通过 <code>IsStriped</code> 设置进度条的条纹设置">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Progress IsStriped="true" Value="25" Color="Color.Success" IsShowValue="true"></Progress>
            </div>
            <div class="form-group col-12">
                <Progress IsStriped="true" Value="50" Color="Color.Info" IsShowValue="true"></Progress>
            </div>
            <div class="form-group col-12">
                <Progress IsStriped="true" Value="75" Color="Color.Warning" IsShowValue="true"></Progress>
            </div>
            <div class="form-group col-12">
                <Progress IsStriped="true" Value="100" Color="Color.Danger" IsShowValue="true"></Progress>
            </div>
        </div>
    </div>
</Block>

<Block Title="是否动态显示" Introduction="通过 <code>IsAnimated</code> 设置进度条的动态显示">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Progress IsAnimated="true" IsStriped="true" Value="25" Color="Color.Success" IsShowValue="true"></Progress>
            </div>
            <div class="form-group col-12">
                <Progress IsAnimated="true" IsStriped="true" Value="50" Color="Color.Info" IsShowValue="true"></Progress>
            </div>
            <div class="form-group col-12">
                <Progress IsAnimated="true" IsStriped="true" Value="75" Color="Color.Warning" IsShowValue="true"></Progress>
            </div>
            <div class="form-group col-12">
                <Progress IsAnimated="true" IsStriped="true" Value="100" Color="Color.Danger" IsShowValue="true"></Progress>
            </div>
        </div>
    </div>
</Block>

<Block Title="双向绑定数据" Introduction="绑定数据">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <BootstrapInput TItem="int" @bind-Value="@Value" />
            </div>
            <div class="form-group col-12">
                <Progress IsAnimated="true" IsStriped="true" @bind-Value="@Value" Color="Color.Danger" IsShowValue="true"></Progress>
            </div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

@code {

    private int Value { get; set; } = 75;
}
// 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 BootstrapBlazor.Shared.Pages.Components;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Progresss
    {
        /// <summary>
        /// 
        /// </summary>
        private Logger? Trace { get; set; }

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Color",
                Description = "颜色",
                Type = "Color",
                ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
                DefaultValue = "Primary"
            },
            new AttributeItem() {
                Name = "Class",
                Description = "样式",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Height",
                Description = "进度条高度",
                Type = "int",
                ValueList = " — ",
                DefaultValue = "15"
            },
            new AttributeItem() {
                Name = "IsAnimated",
                Description = "是否动态显示",
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsShowValue",
                Description = "是否显示值",
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsStriped",
                Description = "是否显示条纹",
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群: BootstrapAdmin & Blazor(795206915)欢迎加群讨论
An error has occurred. This application may no longer respond until reloaded. Reload