概述
Progress
为进度条组件,用于显示各种进度。
参数
Progress
组件的参数定义如下
Progress(options: {value: number, total?: number, type?: ProgressType})
● value
value
属性用于设置当前进度值。
● total
total
属性用于设置总值。
● type
type
属性用于设置进度条类型,可通过ProgressType枚举类型进行设置,可选的枚举值如下
ProgressType.Linear
: 线性样式
ProgressType.Ring
: 环形无刻度样式
ProgressType.Eclipse
: 月食样式
ProgressType.ScaleRing
: 环形有刻度样式
ProgressType.Capsule
: 胶囊样式
胶囊样式如果高比宽大的话进度条会立起来,如果不设宽高会和月食样式相近
常用属性
进度条样式
可通过style()
调整进度条的样式,例如进度条的宽度,该方法的参数类型定义如下
style({strokeWidth?: string|number|Resource,scaleCount?: number,scaleWidth?: string|number|Resource})
● strokeWidth
strokeWidth
属性用于设置进度条的宽度,默认值为4vp
。该属性可用于Linear、Ring、ScaleRing
三种类型,效果如下
● scaleCount
scaleCount
属性用于设置ScaleRing
的刻度数,默认值为120
。效果如下
● scaleWidth
scaleCount
属性用于设置ScaleRing
的刻度线的宽度,默认值为2vp
。效果如下
进度条颜色
进度条的颜色可通过color()
和backgroundColor()
方法进行设置,其中color()
用于设置前景色,backgroundColor()
用于设置背景色,例如