Give a Thumbs up if you like this component. This makes it easier for others to find in the gallery.
My Twitter handle is: formsandflows. Send me a DM if you find any bugs 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 @mdevaney for his component "Progress Indicator Component" which was used as an inspiration for this component.
