Progress
progress。 The unit of length of the component's properties is px by default.
Type
ComponentType<ProgressProps>
Examples
- React
- Vue
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>
)
}
}
<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 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |