
Progress 进度条
用于展示操作进度,告知用户当前状态和预期
进度条组件
常用的进度条
Demo
显示值
通过 IsShowValue
设置进度条值显示
Demo
设置进度条高度
通过 Height
进度条高度设置
Demo
带颜色进度条
设置进度条颜色
Demo
是否显示条纹
通过 IsStriped
设置进度条的条纹设置
Demo
是否动态显示
通过 IsAnimated
设置进度条的动态显示
Demo
双向绑定数据
绑定数据
Demo
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"
},
};
}
}