progress

权限列表
子组件
属性
事件
样式
示例

进度条，用于显示内容加载或操作处理进度。

权限列表

无

子组件

不支持。

属性

名称	类型	默认值	必填	描述
type	string	horizontal	否	设置进度条的类型，该属性不支持动态修改，可选值为： horizontal：线性进度条； circular：loading样式进度条； ring：圆环形进度条； scale-ring：带刻度圆环形进度条 arc：弧形进度条。 eclipse⁵⁺：圆形进度条，展现类似月圆月缺的进度展示效果。
id	string	-	否	组件的唯一标识。
style	string	-	否	组件的样式声明。
class	string	-	否	组件的样式类，用于引用样式表。
ref	string	-	否	用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。
data	string	-	否	给当前组件设置data属性，进行相应的数据存储和读取。

不同类型的进度条还支持不同的属性：

类型为horizontal、ring、scale-ring时，支持如下属性：

名称	类型	默认值	必填	描述
percent	number	0	否	当前进度。取值范围为0-100。
secondarypercent	number	0	否	次级进度。取值范围为0-100。

类型为ring、scale-ring时，支持如下属性：

名称

 类型

 默认值

 必填

 描述

 clockwise

boolean

true

否

 圆环形进度条是否采用顺时针。
类型为arc、eclipse⁵⁺时，支持如下属性：

名称

 类型

 默认值

 必填

 描述

 percent

number

0

否

 当前进度。取值范围为0-100。

名称	类型	默认值	必填	描述
clockwise	boolean	true	否	圆环形进度条是否采用顺时针。

事件

名称	参数	描述
touchstart	TouchEvent	手指刚触摸屏幕时触发该事件。
touchmove	TouchEvent	手指触摸屏幕后移动时触发该事件。
touchcancel	TouchEvent	手指触摸屏幕中动作被打断时触发该事件。
touchend	TouchEvent	手指触摸结束离开屏幕时触发该事件。
click	-	点击动作触发该事件。
longpress	-	长按动作触发该事件。
swipe⁵⁺	SwipeEvent	组件上快速滑动后触发。

样式

type=horizontal

名称	类型	默认值	必填	描述
color	<color>	#ff007dff	否	设置进度条的颜色。
stroke-width	<length>	4px	否	设置进度条的宽度。
background-color	<color>	-	否	设置进度条的背景色。
secondary-color	<color>	-	否	设置次级进度条的颜色。

type=circular

名称	类型	默认值	必填	描述
color	<color>	-	否	loading进度条上的圆点颜色。

type=ring, scale-ring

名称	类型	默认值	必填	描述
color	<color> \| <linear-gradient>	-	否	环形进度条的颜色，ring类型支持线性渐变色设置。说明：线性渐变色仅支持两个颜色参数设置格式，如color = linear-gradient(#ff0000, #00ff00)。
background-color	<color>	-	否	环形进度条的背景色。
secondary-color	<color>	-	否	环形次级进度条的颜色。
stroke-width	<length>	10px	否	环形进度条的宽度。
scale-width	<length>	-	否	带刻度的环形进度条的刻度粗细，类型为scale-ring生效。
scale-number	number	120	否	带刻度的环形进度条的刻度数量，类型为scale-ring生效。

type=arc

名称	类型	默认值	必填	描述
color	<color>	-	否	弧形进度条的颜色。
background-color	<color>	-	否	弧形进度条的背景色。
stroke-width	<length>	4px	否	弧形进度条的宽度。说明：进度条宽度越大，进度条越靠近圆心。即进度条始终在半径区域内。
start-angle	<deg>	240	否	弧形进度条起始角度，以时钟0点为基线。范围为0到360（顺时针）。
total-angle	<deg>	240	否	弧形进度条总长度，范围为-360到360，负数标识起点到终点为逆时针。
center-x	<length>	-	否	弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-y和radius一起。
center-y	<length>	-	否	弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-x和radius一起。
radius	<length>	-	否	弧形进度条半径，该样式需要和center-x和center-y一起。

type=eclipse⁵⁺

名称	类型	默认值	必填	描述
color	<color>	-	否	圆形进度条的颜色。
background-color	<color>	-	否	弧形进度条的背景色。

除上述样式之外，所有type还支持如下样式：

名称	类型	默认值	必填	描述
width	<length> \| <percentage>	-	否	设置组件自身的宽度。缺省时使用元素自身内容需要的宽度。
height	<length> \| <percentage>	-	否	设置组件自身的高度。缺省时使用元素自身内容需要的高度。
padding	<length> \| <percentage>⁵⁺	0	否	使用简写属性设置所有的内边距属性。该属性可以有1到4个值：指定一个值时，该值指定四个边的内边距。指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。
padding-[left\|top\|right\|bottom]	<length> \| <percentage>⁵⁺	0	否	设置左、上、右、下内边距属性。
padding-[start\|end]	<length> \| <percentage>⁵⁺	0	否	设置起始和末端内边距属性。
margin	<length> \| <percentage>⁵⁺	0	否	使用简写属性设置所有的外边距属性，该属性可以有1到4个值。只有一个值时，这个值会被指定给全部的四个边。两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。
margin-[left\|top\|right\|bottom]	<length> \| <percentage>⁵⁺	0	否	设置左、上、右、下外边距属性。
margin-[start\|end]	<length> \| <percentage>⁵⁺	0	否	设置起始和末端外边距属性。
border	-	0	否	使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。
border-style	string	solid	否	使用简写属性设置所有边框的样式，可选值为： dotted：显示为一系列圆点，圆点半径为border-width的一半。 dashed：显示为一系列短的方形虚线。 solid：显示为一条实线。
border-[left\|top\|right\|bottom]-style	string	solid	否	分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。
border-[left\|top\|right\|bottom]	-	-	否	使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。
border-width	<length>	0	否	使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。
border-[left\|top\|right\|bottom]-width	<length>	0	否	分别设置左、上、右、下四个边框的宽度。
border-color	<color>	black	否	使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。
border-[left\|top\|right\|bottom]-color	<color>	black	否	分别设置左、上、右、下四个边框的颜色。
border-radius	<length>	-	否	border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left\|top\|right\|bottom]-width，border-[left\|top\|right\|bottom]-color ，border-[left\|top\|right\|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。
border-[top\|bottom]-[left\|right]-radius	<length>	-	否	分别设置左上，右上，右下和左下四个角的圆角半径。
opacity	number	1	否	元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。
display	string	flex	否	确定一个元素所产生的框的类型，可选值为： flex：弹性布局。 none：不渲染此元素。
visibility	string	visible	否	是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为： visible：元素正常显示。 hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。说明： visibility和display样式都设置时，仅display生效
flex	-	-	否	规定当前组件如何适应父组件中的可用空间。 flex可以指定1个，2个⁵⁺或3个⁵⁺值。单值语法：一个无单位数：用来设置组件的flex-grow 一个有效的宽度值⁵⁺：用来设置组件的flex-basis 双值语法⁵⁺：第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：一个无单位数：用来设置组件的flex-shrink 一个有效的宽度值：用来设置组件的flex-basis 三值语法⁵⁺：第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。说明：仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>⁵⁺时生效。
flex-grow	number	0	否	设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。说明：仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>⁵⁺时生效。
flex-shrink	number	1	否	设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。说明：仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>⁵⁺时生效。
flex-basis	<length>	-	否	设置组件在主轴方向上的初始大小。说明：仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>⁵⁺时生效。
position	string	relative	否	设置元素的定位类型，不支持动态变更。 fixed：相对与整个界面进行定位。 absolute：相对于父元素进行定位。 relative：相对于其正常位置进行定位。说明： absolute属性仅在父容器为<div>、<stack>时生效。
[left\|top \|right\|bottom]	<length>	-	否	left\|top \|right\|bottom需要配合position样式使用，来确定元素的偏移位置。 left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。 top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。 bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。

示例

<!--xxx.hml -->
<div class="container">
  <progress class="min-progress" type="scale-ring"  percent= "10" secondarypercent="50"></progress>
  <progress class="min-progress" type="horizontal" percent= "10" secondarypercent="50"></progress>
  <progress class="min-progress" type="arc" percent= "10"></progress>
  <progress class="min-progress" type="ring" percent= "10" secondarypercent="50"></progress>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  height: 100%;
  width: 100%;
  align-items: center;
}
.min-progress {
  width: 300px;
  height: 300px;
}

youguilin / docs

progress

权限列表

子组件

属性

事件

样式

示例

简介

发行版

贡献者

近期动态

youguilin / docs .gitee-modal { width: 500px !important; }

progress

权限列表

子组件

属性

事件

样式

示例

简介

发行版

贡献者

近期动态

搜索帮助

youguilin / docs