We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Describe the bug
Steps are layed out evenly, regardless of position prop value (position = width / number of steps).
position
To Reproduce render steps by mapping over an array, ex :
const steps = [ { id: 1, percentage: 10, src: 'image1.svg', scale: 2 }, { id: 2, percentage: 25, src: 'image2.svg', scale: 0.5 }, { id: 3, percentage: 26, src: 'image3.svg', scale: 0.3 }, { id: 4, percentage: 61, src: 'image4.svg', scale: 1 }, { id: 5, percentage: 62, src: 'image5.svg', scale: 1 }, { id: 6, percentage: 63, src: 'image6.svg', scale: 2 }, { id: 7, percentage: 80, src: 'image7.svg', scale: 0.5 }, { id: 8, percentage: 81, src: 'image8.svg', scale: 1 }, { id: 9, percentage: 82, src: 'image9.svg', scale: 2 }, { id: 10, percentage: 90, src: 'image10.svg', scale: 1 } ];
<ProgressBar percent={percentage} > {steps.map(step => ( <Step key={step.id} position={step.percentage} transition="scale" > {({ accomplished }) => ( <img style={{ transform: `scale(${step.scale})` }} width="30" src={step.src} /> )} </Step>)) } </ProgressBar>
Expected behavior
<Steps /> items are positioned along the progressbar according to number provided by position prop value.
<Steps />
edit : providing stepsPositions on parent <ProgressBar /> does work
stepsPositions
<ProgressBar />
The text was updated successfully, but these errors were encountered:
Use stepPositions prop on ProgressBar component
https://pierreericgarcia.github.io/react-step-progress-bar/docs/progress-bar-api
Sorry, something went wrong.
No branches or pull requests
Describe the bug
Steps are layed out evenly, regardless of
position
prop value (position = width / number of steps).To Reproduce
render steps by mapping over an array, ex :
Expected behavior
<Steps />
items are positioned along the progressbar according to number provided byposition
prop value.edit : providing
stepsPositions
on parent<ProgressBar />
does workThe text was updated successfully, but these errors were encountered: