@blaze-react/progress v0.7.0
Description
The progress bar, despite providing a good user experience, also helps users avoid frustration and successfully complete all the steps.
Usage
- Progress dot indicators
const steps = [
'Cart', 'Billing', 'Delivery', 'Review & pay'
];
<Progress
progress={2}
onChange={({event, step}) => {}}
steps={steps}/>
- Progress dot indicators + steps counter
<Progress
progress={3}
type="count"
onChange={({event, step}) => {}}
steps={steps}/>
- Progress text
<Progress
progress={1}
type="text"
onChange={({event, step}) => {}}
steps={steps}/>
- Progress + text + completed icon
<Progress
progress={4}
type="text icon"
onChange={({event, step}) => {}}
steps={steps}/>
API
Progress can receive a number of props
as follow:
NAME | TYPE | DEFAULT |
---|---|---|
steps | Array | [] |
progress | Number | 0 |
type | Text | dots |
onChange | Function | () => {} |
4 months ago
8 months ago
7 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago