SectorProgress 扇形进度条

介绍

用于展示进度、占比。

引入

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

代码演示

基础用法

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 30
  build() {
    Column(){
      IBestSectorProgress({
        value: $value,
        text: `${this.value}%`
      })
    }
  }
}

样式定制

点我查看代码

import { IBestSlider } from "@ibestservices/ibest-ui"
@Entry
@Component
struct DemoPage {
  @State value: number = 30
  build() {
    Column({space: 20}){
      Flex({wrap: FlexWrap.Wrap, alignItems: ItemAlign.Center, space: { main: LengthMetrics.vp(20), cross: LengthMetrics.vp(20) }}){
        IBestSectorProgress({
          value: $value,
          diameter: 80,
          text: "宽度定制"
        })
        IBestSectorProgress({
          value: $value,
          bgColor: "#ebedf0",
          sectorBgColor: "#ee0a24",
          text: "颜色定制"
        })
        IBestSectorProgress({
          value: $value,
          clockwise: false,
          text: "逆时针"
        })
        IBestSectorProgress({
          value: $value,
          text: "边框",
          outerBorder: {width: 1, color: Color.Green}
        })
        IBestSectorProgress({
          value: $value,
          text: "过渡动画",
          enableAnimation: true
        })
      }
      Row({space: SPACE.SM}){
        IBestSlider({
          value: $value
        })
      }
    }
  }
}

起始位置

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 30
  build() {
    Flex({wrap: FlexWrap.Wrap, space: { main: LengthMetrics.vp(20), cross: LengthMetrics.vp(20) }}){
      IBestSectorProgress({
        value: $value,
        startPosition: "left",
        text: "左侧"
      })
      IBestSectorProgress({
        value: $value,
        startPosition: "right",
        text: "右侧"
      })
      IBestSectorProgress({
        value: $value,
        startPosition: "bottom",
        text: "底部"
      })
      IBestSectorProgress({
        value: $value,
        startPosition: "left",
        clockwise: false,
        text: "左侧逆时针"
      })
      IBestSectorProgress({
        value: $value,
        startPosition: "right",
        clockwise: false,
        text: "右侧逆时针"
      })
      IBestSectorProgress({
        value: $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
clockwise	是否顺时针	boolean	true
startPosition	进度条起始位置, 可选值 left right top bottom	string	top
bgColor	底层背景色	ResourceColor	#fff
sectorBgColor	扇形背景色	string | number | CanvasGradient | CanvasPattern	#1989fa
outerBorder	边框	BorderOptions	{}
enableAnimation	是否需要过渡动画	boolean	false

Events

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