Has anyone made a step indicator before, and can share a “how to” with me? I am trying to make one, but struggles with aligning everything, while also making sure that the progress bar dynamically scales to different screen sizes.
I am using an icon and a text to indicate the steps, and containers with set height and background color for the lines between each step. I have tried making containers that contains both the icon and the text, to make sure they are aligned perfectly, but then I am struggling with getting the bars aligned in between the icons.
If I put the lines and icons in the same container, I get the progress bar/step indicator like I want it, but then I struggle with getting the text labels to align.
Yes, I checked both the showroom and farmer’s market, but I only found progress bar without the step indicator. I want to use the step indicator to navigate as well to show progress, so I can’t use the built in progress component.
The “Order details #2” UI component in Farmer’s market is a nice example for getting started. It uses step indicators with a progress bar in between each step, and by adding a container below you can get some labels for each step. Hope it helps
Thank you, that is a nice example However, I had already managed the “icon + line” - part, as you can see in my examples. My issue is that I need labels, and I struggle with aligning the text to the steps (without setting fixed width on everything). I tried setting the position to Absolute or Fixed for the lines in the version on my first picture, but then I loose the stretch.
In the second picture of your first post: what if you put those texts inside the container for the “dots”, centeralign the text, let the text have absolute positioning, and put an offset on them (e.g. 32px from top)?
