
My Twitter handle is: formsandflows. Send me a DM if you find any bugs in this component and I will try to fix them as quickly as possible.
How to use it
This component has 6 input properties. They are described below.
ColorActive
- The color used for the current or a previous stage.
- Type: Color
ColorInactive
- The color used for a next stage.
- Type: Color
CurrentStage
The number of the current stage. Numbering starts at 1.
Type: Number
Items
- The items. The number of items can be dynamic. You do need to take care yourself that the this component is wide enough to show all text.
- Type: Table
Example used in screen above:
Table(
{ID:1,Title:"Reviewed"},
{ID:2,Title:"Quarter 1"},
{ID:3,Title:"Quarter 2"},
{ID:4,Title:"Quarter 3"},
{ID:5,Title:"Quarter 4"},
{ID:6,Title:"Completed"}
)
TextColor
- The color of the text.
- Type: Color
TextFont
- The font of the text.
- Type: Text
How it works
- The stages are shown using a gallery.
- The gallery has a padding of 0.
- The width of a gallery item is calculated by dividing the width of the gallery by the number of items.
- 3 circle shapes are used to show the “icons”.
- 2 rectangle shapes are used to connect the “icons”.
- The circles need to be higher in the hierarchy than the rectangles.
A big thanks to Matthew Devaney for his component “Progress Indicator Component” which was used as an inspiration for this component.
Download
This component can be downloaded from GitHub.