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="row g-3">
        <div class="col-12">
            <Progress Value="0"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="25"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="50"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="75"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="100"></Progress>
        </div>
    </div>
</Block>

<Block Title="显示值" Introduction="通过 <code>IsShowValue</code> 设置进度条值显示">
    <Progress Value="25" IsShowValue="true"></Progress>
</Block>

<Block Title="设置进度条高度" Introduction="通过 <code>Height</code> 进度条高度设置">
    <Progress Value="25" IsShowValue="true" Height="32"></Progress>
</Block>

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

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

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

<Block Title="双向绑定数据" Introduction="绑定数据">
    <div class="row g-3">
        <div class="col-12">
            <BootstrapInput TItem="int" @bind-Value="@Value" />
        </div>
        <div class="col-12">
            <Progress IsAnimated="true" IsStriped="true" @bind-Value="@Value" Color="Color.Danger" IsShowValue="true"></Progress>
        </div>
    </div>
</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 BootstrapBlazor.Shared.Pages.Components;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Progresss
    {
        private int Value { get; set; } = 75;

        /// <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 Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload