# Progress 进度条

# 介绍

用于展示操作的当前进度。

# 引入

"usingComponents": {
	"m-progress": "/dist/progress/index"
}

# 示例

# 基础用法

<m-progress percent="50" bind:change="onChange" />

# 不同类型

通过 type 属性可以设置颜色类型,可选值为 primarysuccesswarningdanger 四种类型。

<m-progress type="primary" percent="50" />
<m-progress type="success" percent="50" />
<m-progress type="warning" percent="50" />
<m-progress type="danger" percent="50" />

# 自定义文字与颜色

可以使用 point-text 属性自定义文字,color 属性自定义进度条颜色。

<m-progress point-text="橙色" active-color="orange" percent="25" />

# 自定义高度

滑槽的线宽,单位 rpx

<m-progress bar-height="30" percent="50" />

# 不显示进度节点

<m-progress point-visible="{{ false }}" percent="50" />

# Api

# Properties

参数 说明 类型 可选值 默认值
custom-class 根节点样式 String - -
percent 进度百分比 Number - -
type 类型 String primary success warning danger primary
bar-height 滑槽的线宽(rpx) Number - 6
active-color 进度条激活态颜色 String - -
point-visible 是否显示进度节点 Boolean - true
point-text 节点文字 Boolean - 进度百分比
point-color 节点背景色 Boolean - 同进度条激活颜色