Progress 进度条

介绍

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

引入

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

代码演示

基础用法

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 50
  build() {
    IBestProgress({
      value: this.value
    })
  }
}

进度内显示百分比

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 50
  build() {
    IBestProgress({
      value: this.value,
      lineWidth: 18,
      textInside: true
    })
  }
}

自定义样式

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 50
  format(value: number){
		return value < 100 ? `${value}%` : 'Full'
	}
  build() {
    Column({space: 16}){
      IBestProgress({
        value: this.value,
        color: "#ee0a24"
      })
      IBestProgress({
        value: this.value,
        linearGradientColor:{
          angle: 90,
          colors: [['#be99ff', 0], ['#7232dd', 1]]
        },
        format: (value: number): string => this.format(value)
      })
    }
  }
}

置灰

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 50
  build() {
    IBestProgress({
      value: this.value,
      inactive: true
    })
  }
}

不确定进度

点我查看代码

@Entry
@Component
struct DemoPage {
  build() {
    Column({space: 16}){
      IBestProgress({
        value: 50,
        indeterminate: true
      })
      IBestProgress({
        value: 100,
        indeterminate: true,
        duration: 1,
        color: "#DB3131"
      })
    }
  }
}

API

@Props

参数	说明	类型	默认值
value	进度值	number	0
lineWidth	进度条粗细	string | number	4
color	进度条颜色	ResourceColor	#3D8AF2
linearGradientColor	进度条渐变色	LinearGradient	-
bgColor	进度条背景色	ResourceColor	#ebedf0
showText	是否显示进度条文字	boolean	true
textInside	文字显示在进度条内	boolean	false
textColor	文本颜色	ResourceColor	#323233
textFontSize	左侧图标颜色	string | number	16
inactive	文本颜色	boolean	false
indeterminate	不确定进度	boolean	false
duration	不确定进度时动画时长 单位秒	number	3
format	格式化文本函数	(value: number) => string	-

Events

事件名	说明	回调参数
onBarClick	点击通知栏回调	-
onClose	点击右侧关闭图标回调	-
onTextClick	垂直滚动时,点击文字回调	index: number