Progress - 《Taro 文档帮助手册教程》

sidebar_label: Progress
Type
Examples
ProgressProps
- Property Support
API Support

title: Progress

sidebar_label: Progress

progress。 The unit of length of the component’s properties is px by default.

Reference

Type

ComponentType<ProgressProps>

Examples

import Tabs from ‘@theme/Tabs’; import TabItem from ‘@theme/TabItem’;

tsx
export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  render() {
    return (
      <View className='components-page'>
        <Progress percent={20} showInfo strokeWidth={2} />
        <Progress percent={40} strokeWidth={2} active />
        <Progress percent={60}  strokeWidth={2} active />
        <Progress percent={80}  strokeWidth={2} active activeColor='blue' />
      </View>
    )
  }
}

html
<template>
  <view class="components-page">
    <progress percent="20" stroke-width="2" :show-info="true" />
    <progress percent="40" stroke-width="2" :active="true" />
    <progress percent="60" stroke-width="2" :active="true" />
    <progress percent="80" stroke-width="2" :active="true" active-color="blue" />
  </view>
</template>

ProgressProps

Property	Type	Default	Required	Description
percent	`number`		No	0 to 100 percent.
showInfo	`boolean`	`false`	No	Shows the percent on the right of the progress bar.
borderRadius	`string \| number`	`0`	No	The radius of the round corner.
fontSize	`string \| number`	`16`	No	The font size of the percent on the right.
strokeWidth	`string \| number`	`6`	No	The width of the stroke on the progress bar.
color	`string`	`"#09BB07"`	No	The color of the progress bar (Use activeColor).
activeColor	`string`	`"#09BB07"`	否	The color of the selected progress bar.
backgroundColor	`string`	`"#EBEBEB"`	No	The color of the unselected progress bar.
active	`boolean`	`false`	No	The animation where the progress bar moves from left to right.
activeMode	`"backwards" \| "forwards"`	`backwards`	否	The value “backwards” indicates that the animation plays from the beginning, and the value “forwards” indicates that the animation plays from the point at which it paused.
duration	`number`	`30`	No	Number of milliseconds to increase progress by 1%.
onActiveEnd	`BaseEventOrigFunction<any>`		No	Triggered on animation completion.

Property Support

Property	WeChat Mini-Program	Baidu Smart-Program	Alipay Mini-Program	ByteDance Micro-App	H5	React Native
ProgressProps.percent	✔️	✔️	✔️	✔️	✔️	✔️
ProgressProps.showInfo	✔️	✔️	✔️		✔️	✔️
ProgressProps.borderRadius	✔️				✔️
ProgressProps.fontSize	✔️				✔️
ProgressProps.strokeWidth	✔️	✔️	✔️	✔️	✔️	✔️
ProgressProps.color	✔️	✔️	✔️	✔️	✔️
ProgressProps.activeColor	✔️	✔️	✔️	✔️	✔️	✔️
ProgressProps.backgroundColor	✔️	✔️	✔️	✔️	✔️	✔️
ProgressProps.active	✔️	✔️	✔️	✔️	✔️	✔️
ProgressProps.activeMode	✔️	✔️		✔️	✔️	✔️
ProgressProps.duration	✔️				✔️
ProgressProps.onActiveEnd	✔️				✔️

API Support

API	WeChat Mini-Program	Baidu Smart-Program	Alipay Mini-Program	ByteDance Micro-App	H5	React Native
Progress	✔️	✔️	✔️	✔️	✔️	✔️