Progress 进度条


提供一个方便的 进度条 组件

使用指南

在 Taro 文件中引入组件

  1. import { AtProgress } from 'taro-ui'

组件依赖的样式文件(仅按需引用时需要)

  1. @import "~taro-ui/dist/style/components/progress.scss";
    @import "~taro-ui/dist/style/components/icon.scss";

一般用法

  1. <AtProgress></AtProgress>

传入当前进度

  1. <AtProgress percent={25} />
    <AtProgress percent={50} />
    <AtProgress percent={75} />

是否隐藏信息

  1. <AtProgress percent={25} isHidePercent />
    <AtProgress percent={75} isHidePercent />

自定义进度条的线宽

  1. <AtProgress percent={25} strokeWidth={6} />
    <AtProgress percent={50} strokeWidth={8} />
    <AtProgress percent={75} strokeWidth={10} />

自定义进度条颜色

  1. <AtProgress percent={25} color='#FF4949' />
    <AtProgress percent={50} color='#13CE66' />
    <AtProgress percent={75} color='#FFC82C' />

传入不同的状态

  1. <AtProgress percent={75} status='error' />
    <AtProgress percent={50} status='progress' />
    <AtProgress percent={100} status='success' />

AtProgress 参数

参数说明类型可选值默认值
color元素的颜色String--
status元素的状态Stringprogress,error,success-
percent元素的进度Number--
strokeWidth元素的规格Number--
isHidePercent是否隐藏文字Boolean-false

Progress进度条 - 图1