TaroifyReact UI

    Progress 进度条

    介绍

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

    引入

    import { Progress } from "@taroify/core"

    代码演示

    基础用法

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

    <Progress percent={50} />

    线条粗细

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

    <Progress percent={50} strokeWidth={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 | string0
    strokeWidth进度条粗细，默认单位为pxnumber | string4px
    color进度条颜色stringprimary
    inactive是否置灰booleanfalse
    label进度文字boolean | ReactNodetrue

    主题定制

    样式变量

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

    名称默认值描述
    --progress-height14px * $hd-
    --progress-border-radiusvar(--progress-height)-
    --progress-background-colorvar(--gray-3)-
    --progress-portion-colorvar(--white)-
    --progress-portion-font-sizevar(--font-size-xs)-
    --progress-inactive-background-color#cacaca-
    --progress-portion-primary-background-colorvar(--primary-color)-
    --progress-portion-info-background-colorvar(--info-color)-
    --progress-portion-success-background-colorvar(--success-color)-
    --progress-portion-warning-background-colorvar(--warning-color)-
    --progress-portion-danger-background-colorvar(--danger-color)-