CircleProgress 环形进度条

介绍

圆环形的进度条组件。

引入

import { IBestCircleProgress } from "@ibestservices/ibest-ui-v2";

代码演示

基础用法

点我查看代码

@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 30
  build() {
    Column(){
      IBestCircleProgress({
        value: this.value!!,
        text: `${this.value}%`
      })
    }
  }
}

样式定制

点我查看代码

@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 30
  build() {
    Flex({wrap: FlexWrap.Wrap, space: { main: LengthMetrics.vp(20), cross: LengthMetrics.vp(20) }}){
      IBestCircleProgress({
        value: this.value!!,
        strokeWidth: 6,
        text: "宽度定制"
      })
      IBestCircleProgress({
        value: this.value!!,
        color: "#ee0a24",
        bgColor: "#ebedf0",
        text: "颜色定制"
      })
      IBestCircleProgress({
        value: this.value!!,
        clockwise: false,
        text: "逆时针",
        color: "#07c160"
      })
      IBestCircleProgress({
        value: this.value!!,
        diameter: 120,
        clockwise: false,
        text: "大小定制",
        color: "#7232dd"
      })
    }
  }
}

起始位置

点我查看代码

@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 30
  build() {
    Flex({wrap: FlexWrap.Wrap, space: { main: LengthMetrics.vp(20), cross: LengthMetrics.vp(20) }}){
      IBestCircleProgress({
        value: this.value!!,
        startPosition: "left",
        text: "左侧"
      })
      IBestCircleProgress({
        value: this.value!!,
        startPosition: "right",
        text: "右侧"
      })
      IBestCircleProgress({
        value: this.value!!,
        startPosition: "bottom",
        text: "底部"
      })
      IBestCircleProgress({
        value: this.value!!,
        startPosition: "left",
        clockwise: false,
        text: "左侧逆时针"
      })
      IBestCircleProgress({
        value: this.value!!,
        startPosition: "right",
        clockwise: false,
        text: "右侧逆时针"
      })
      IBestCircleProgress({
        value: this.value!!,
        startPosition: "bottom",
        clockwise: false,
        text: "底部逆时针"
      })
    }
  }
}

API

@Props

参数	说明	类型	默认值
value	进度值, 支持双向绑定	number	0
diameter	进度条直径(宽度)	number	100
target	目标进度	number	100
text	中间文字	string	''
textColor	中间文字颜色	ResourceColor	#323233
textFontSize	中间文字大小	number | string	16
textFontWeight	中间文字字重	FontWeight	600
color	进度条颜色	ResourceColor	#3d8af2
bgColor	进度条背景颜色	ResourceColor	#fff
strokeWidth	进度条宽度	number	4
duration	动画时长	number	300
strokeLineCap	进度端点样式	LineCapStyle	Round
clockwise	是否顺时针	boolean	true
startPosition	进度条起始位置, 可选值 left right top bottom	string	top

Events

事件名	说明	回调参数
onReachTarget	到达目标值	-