wxc-progress

wxc-progress

MinUI 小程序组件 - 进度条

Install

$ min install @minui/wxc-progress

Demos

前景色

active-color 属性设置前景色

<template>
  <wxc-progress percent="60" active-color="#ac89ff"></wxc-progress>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {},
  methods: {}
}
</script>
<style>
</style>

渐变的前景色

以英文逗号区分左右两端色值

<template>
  <wxc-progress percent="60" active-color="#ac89ff,#ff76a2"></wxc-progress>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {},
  methods: {}
}
</script>
<style>
</style>

背景色

background-color 属性设置背景色

<template>
  <wxc-progress percent="40" background-color="#eaffea"></wxc-progress>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {},
  methods: {}
}
</script>
<style>
</style>

百分比

percent 属性设置进度的百分比

<template>
  <wxc-progress percent="80"></wxc-progress>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {},
  methods: {}
}
</script>
<style>
</style>

圆角

radius 属性设置圆角的角度值

<template>
  <wxc-progress radius="5"></wxc-progress>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {},
  methods: {}
}
</script>
<style></style>

宽度

stroke-width 属性设置进度条的宽度

<template>
  <wxc-progress stroke-width="20"></wxc-progress>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {},
  methods: {}
}
</script>
<style>
</style>

API

Progress【props】

属性	描述
percent	[必填] 进度百分比
stroke-width	[可选] 进度条线的宽度，单位 rpx，默认值 16
active-color	[可选] 高亮态进度条的颜色，支持纯色与线性渐变色。默认值 "#ffca49, #ffb262"。若只填一个色值，则进度条显示为该纯色值。
background-color	[可选] 进度条背景色，默认值 "#e5e5e5"
radius	[可选] 圆角角度，单位 rpx, 默认值 15

Link

	地址
	progress 组件文档 https://meili.github.io/min/docs/minui/index.html#progress
	progress 组件源码 https://github.com/meili/minui/tree/master/packages/wxc-progress
	MinUI 组件库 https://github.com/meili/minui