Progress 进度条


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

使用指南

在 Taro 文件中引入组件

:::demo

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

:::

一般用法

:::demo

  1. <AtProgress></AtProgress>

:::

传入当前进度

:::demo

  1. <AtProgress percent='25' />
  2. <AtProgress percent='50' />
  3. <AtProgress percent='75' />

:::

是否隐藏信息

:::demo

  1. <AtProgress percent='25' isHidePercent />
  2. <AtProgress percent='75' isHidePercent />

:::

自定义进度条的线宽

:::demo

  1. <AtProgress percent='25' strokeWidth='6' />
  2. <AtProgress percent='50' strokeWidth='8' />
  3. <AtProgress percent='75' strokeWidth='10' />

:::

自定义进度条颜色

:::demo

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

:::

传入不同的状态

:::demo

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

:::

AtProgress 参数

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