Progress进度条模块
Progress进度条是指数据加载状态、任务完成度,或事务进程;支持多种形态,包括条状、全圆、半圆和大半圆;支持多种主题颜色,包括渐变色;支持多种整体尺寸和轨道尺寸;支持任意数值的进度,不限于百分比。
简单使用
对文本容器使用ax-progress
属性即可表示一个进度条,当然通常会使用value参数。
也可以通过id+new
的方式创建实例。
-
-
-
new ax.Progress('#demo01',{
value:21,
});
不使用文字
参数label
默认为true
即显示进度结果文本,如果不需要可以设置label:false
或label.enable:false
予以隐藏。
方角边缘
参数linecap
设置轨道两头的轮廓形状,默认为round
即圆角,可设为square
方角。
基础外观配置
属性 |
类型 |
默认值 |
说明 |
type |
'line'/'circle'/'semicircle'/'gapcircle' |
'line' |
进度条类型 |
theme |
'prim'/'succ'/'error'/'info'/'issue'/'warn'/'' |
'' |
颜色风格 |
gradient |
boolean |
false |
是否使用渐变色 |
linecap |
'round'/'square' |
'round' |
线条端点形状 |
size |
'sm'/'md'/'lg'/'' |
'' |
进度条宽度 |
thk |
'sm'/'md'/'lg'/'' |
'' |
进度条厚度 |
classes |
string |
'' |
追加样式类 |
取值配置
属性 |
类型 |
默认值 |
说明 |
range |
array |
[0, 100] |
取值范围 |
value |
number |
0 |
初始进度值 |
steps |
array |
[] |
进度阶段设置 |
动画配置
属性 |
类型 |
默认值 |
说明 |
curve |
'easeOut'/'linear'/'easeIn'/'easeInOut'/'easeOutIn' |
'easeOut' |
动画曲线 |
duration |
number |
0 |
动画时长(ms) |
rotate |
boolean |
false |
是否旋转 |
显示控制
属性 |
类型 |
默认值 |
说明 |
simple |
boolean |
false |
是否隐藏轨道 |
control |
boolean |
false |
是否显示控制按钮 |
标签配置
属性 |
类型 |
默认值 |
说明 |
label.enable |
boolean |
true |
是否显示文本 |
label.template |
string |
'' |
文本HTML模板 |
label.placement |
string |
'' |
文本位置 |
label.unit |
string |
'%' |
单位 |
label.tips |
boolean |
false |
是否显示提示 |
数字显示配置
属性 |
类型 |
默认值 |
说明 |
number.type |
'percent'/'value' |
'percent' |
显示类型 |
number.trunc |
boolean |
true |
是否取整 |
number.emphatic |
boolean |
false |
是否强调显示 |
等待函数
属性 |
类型 |
默认值 |
说明 |
b4Set |
function |
null |
设置值前等待函数 |
回调函数
属性 |
类型 |
默认值 |
说明 |
onStart |
function |
null |
进程开始回调 |
onMove |
function |
null |
进程进行中回调 |
onEnd |
function |
null |
进程结束回调 |
onZero |
function |
null |
进度为0%回调 |
onCompleted |
function |
null |
进度完成回调 |
onSet |
function |
null |
设置值后回调 |
onPause |
function |
null |
暂停后回调 |
onContinue |
function |
null |
继续进行回调 |
onRestored |
function |
null |
恢复初始值回调 |