Taroify

Progress 进度条

介绍

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

引入

import { Progress } from "@taroify/core"
// or
import Progress from "@taroify/core/progress"

代码演示

基础用法

进度条默认为蓝色，使用 percentage 属性来设置当前进度。

<Progress percent={50} />

线条粗细

通过 stroke-width 可以设置进度条的粗细。


<van-progress :percentage="50" stroke-width="8" />

置灰

设置 inactive 属性后进度条将置灰。

<Progress percent={50} inactive />

样式定制

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

<Progress className="custom-color1" percent={25} />
<Progress className="custom-color2" percent={50} />
<Progress className="custom-color3" percent={75} />

.custom-color1 {
  &:not(.taroify-progress--inactive) {
    .taroify-progress__portion {
      background: #f2826a;
    }
  }
}

.custom-color2 {
  &:not(.taroify-progress--inactive) {
    .taroify-progress__portion {
      background: #ee0a24;
    }
  }
}

.custom-color3 {
  &:not(.taroify-progress--inactive) {
    .taroify-progress__portion {
      background: linear-gradient(to right, #be99ff, #7232dd)_ | - |
    }
  }
}

API

Props

参数	说明	类型	默认值
percent	进度百分比	number \| string	`0`
strokeWidth	进度条粗细，默认单位为`px`	number \| string	`4px`
color	进度条颜色	string	`primary`
inactive	是否置灰	boolean	`false`
label	进度文字	boolean \| ReactNode	`true`

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
—progress-height	14px $hd*	-
—progress-border-radius	var(—progress-height)	-
—progress-background-color	var(—gray-3)	-
—progress-portion-color	var(—white)	-
—progress-portion-font-size	var(—font-size-xs)	-
—progress-inactive-background-color	#cacaca	-
—progress-portion-primary-background-color	var(—primary-color)	-
—progress-portion-info-background-color	var(—info-color)	-
—progress-portion-success-background-color	var(—success-color)	-
—progress-portion-warning-background-color	var(—warning-color)	-
—progress-portion-danger-background-color	var(—danger-color)	-