Stepper
A dynamic, configurable step-by-step navigation component with customizable step progression and styling. Ideal for guiding users through multi-step processes in a structured and visually appealing way.
Extends: baseComponent
Fields
Name | Code | Data Type | Description |
|---|---|---|---|
Resource ID |
| text | Unique identifier for the stepper |
Selected Step |
| text | Currently selected step |
Style Classes |
| text | CSS classes applied to the stepper |
Control Classes |
| text | Additional CSS classes for stepper controls |
Navigate Button Color |
| text | Color of navigation buttons |
Done Icon |
| text | Icon for completed steps |
Done Color |
| text | Color for completed steps |
Active Color |
| text | Color for active step |
Inactive Color |
| text | Color for inactive steps |
Next Button Label |
| text | Custom label for next button |
Back Button Label |
| text | Custom label for back button |
Finish Button Label |
| text | Custom label for finish button |
Step Title |
| text | Title for individual steps |
Step Icon |
| text | Icon for individual steps |
Dark |
| boolean | Enable dark mode |
Contracted |
| boolean | Enable contracted view |
Vertical |
| boolean | Enable vertical layout |
Alternative Labels |
| boolean | Use alternative label style |
Header Navigation |
| boolean | Enable header navigation |
Animated |
| boolean | Enable animation |
Hide Navigation |
| boolean | Hide navigation buttons |
Step Done |
| boolean | Mark step as completed |
Step Error |
| boolean | Mark step as having an error |
Step Disabled |
| boolean | Disable specific step |
Methods
Name | Description |
|---|---|
| Get the index of the current step |
| Check if a specific step is completed |
| Move to the next step |
| Move to the previous step |
| Handle stepper completion |
| Get the title of a specific step |
Events
Name | Description |
|---|---|
| Triggered when stepping between steps |
| Triggered when stepper is completed |