Blazor ChunkProgressBar概述

Blazor ChunkProgressBar组件跟踪操作的执行,并在预定义数量的节(块)中显示完成的部分。对于很长时间的任务,你也可以这样做不确定的在等待更新时。

为Blazor Ninja图像的Telerik UI

ChunkProgressBar组件是为Blazor的Telerik UI,一个具有100个本地组件的专业级UI库,用于构建现代和功能丰富的应用程序。想要试用它,请注册一个30天的免费试用。

正在创建Blazor ChunkProgressBar

  1. 添加< TelerikChunkProgressBar >标签。

  2. 设置它价值而且马克斯参数来表示已完成的进度。阅读更多关于他们之间的关系Chunk Count, Value和MaxValue部分。

@* ChunkProgressBar基本配置*@  @code {public double MaxValue {get;设置;} = 5;public double ChunkProgressBarValue {get;设置;} = 3;}

Chunk Count, Value和MaxValue

本节解释“ChunkCount”、“Value”和“MaxValue”参数.在匹配的值不匹配的值你可以看到ChunkProgressBar如何在这些场景中呈现它的块。

匹配的值

马克斯而且ChunkCount参数的值匹配价值参数表示高亮显示的块的数量。

 

上面代码片段的结果

Blazor Chunkprogressbar匹配值示例

不匹配的值

每个块(段)代表最大值(Max / ChunkCount).所以,当马克斯而且ChunkCount参数的值不匹配价值参数突出显示小于或等于(< =)到它所代表的全部分数。

在下面的例子中,每个块都是“值”的10 / 4 = 2.5.的价值3.所以这部分内容是3 / 2.5 = 1.2,所以1Chunk将被突出显示。如果价值设置为4时,一个块将保持高亮显示,第二个块将高亮显示价值就变成了5

 

上面的代码片段的结果

不匹配的值示例截图

ChunkProgressBar参数

参数 类型及默认值 描述
字符串 对象呈现自定义CSS类< div class = " k-progressbar”>元素。
马克斯
One hundred.)
ChunkProgressBar的最大值。它必须大于0
价值 ChunkProgressBar的值。该值表示跟踪进程的进度,分布在ChunkProgressBar的块(节)中。它只是马克斯.的读取模式Chunk Count, Value和MaxValue部分。
ChunkCount 无符号整型
5)
ChunkProgressBar将被分离成块的数量。
取向 ProgressBarOrientation
水平)
控制块进度条的方向。
不确定的 保龄球
真正的)
控制块进度条是否处于不确定状态。读了不确定的文章获取更多信息。

例子

响应ProgressBar

当您将进度条的宽度设置为100%时,进度条将随父元素尺寸调整大小

< span style=" font - family:宋体;边框:1px纯红色;">   
. Class="width-100" Value="44

下一个步骤

另请参阅

在本文中
Baidu
map