组件

Progress 进度条

在需要很长时间才能完成的操作中为用户显示该操作的当前进度,让用户直观的看到当前的进度和状态。 API文档 组件问题反馈和讨论

使用方法

显示处理任务的进度,完成度,剩余未完成任务量的大小,和可能需要处理时间,一般超过2秒时用进度条。调用方法: progress.init(config),具体配置信息可见下面config配置项。
在进度条节点可通过添加data-percent属性设置初始进度,如果config同时设置了percent属性,data-percent将会被覆盖

基础样式 #

最基础的进度条样式,线形进度条nv-progress-line 。进度条有大(默认)、小 nv-progress-line-sm 两种尺寸,颜色有蓝色 nv-progress-line-primary 红色 nv-progress-line-danger 绿色 nv-progress-line-success
<code>
显示代码

小尺寸进度条 #

小尺寸的线形进度条
<code>
显示代码

百分比内显 #

百分比放置于进度条内 nv-progress-line-inset,默认百分比显示在进度右侧,添加 nv-progress-current-over 类使百分比显示在已完成进度内侧
<code>
显示代码

特殊文本显示 #

选择显示特定的文本而不是百分比。
<code>
显示代码

环形进度条 #

环形进度条 nv-progress-circle 。环形进度条有大(默认)、小 nv-progress-circle-sm 两种尺寸,颜色有蓝色 nv-progress-circle-primary 红色 nv-progress-circle-danger 绿色 nv-progress-circle-success
<code>
显示代码

小尺寸环形进度条 #

小尺寸的环形进度条
<code>
显示代码

config配置 #

进度条初始化配置
属性
类型(是否必要)
描述
config.target
String(必填)
初始化进度条的目标元素,可使用ID选择器或类选择器
ID选择器初始化后返回的是一个Progress对象。
类选择器初始化后返回的是包含多个Progress对象的数组
config.percent
String(选填)
设置进度条的进度,例如:0.1,0.8(设置了此属性将会覆盖节点属性data-percent设置的值)
config.content
String(选填)
进度条显示的内容,默认显示百分比,例如:10%,80%。可设置显示图标,例如:<i class="nvicon-ok"></i>

Method #

方法
入参
描述
message.change
Object options
修改进度条的进度和显示内容。

Object options属性 #

属性
类型(是否必要)
描述
options.percent
String(必填)
修改进度条的进度,例如:0.1,0.8
options.content
String(选填)
修改进度条的显示内容,默认显示百分比,例如:10%,80%。可设置显示图标,例如:<i class="nvicon-ok"></i>