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>
|