Stepper
The stepper component helps you lay out multi-step apps, with an optional validation function to validate a step.
If no validation function is defined, the stepper will behave a tabs component where the user can switch between tabs (with Previous and Next buttons, or directly on the step).
A validation function can be set and won't allow users to go to the next step while the runnable returns an error.
The following section details Stepper component's specific settings. For more details on the App Editor, check the dedicated documentation or the App Editor Quickstart:
App Editor Documentation
The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code.
Apps Quickstart
Learn how to build your first app in a matter of minutes.
Outputs
| Name | Type | Description |
|---|---|---|
| currentStepIndex | number | Number of the step / tab. |
| result | any | The result of the runnable. |
| loading | boolean | The loading state of the button. |
| lastAction | string: "previous", "next" | The last action performed by the user. |
Component controls
| Name | Parameters | Description | Example |
|---|---|---|---|
| setTab | id: string, index:number | Set the current tab. | setTab('a',1) |
Event handlers
The stepper component has the following event handlers:
onPrevious: Trigger a runnable when the user clicks on the previous button.onNext: Trigger a runnable when the user clicks on the next button.
Multiple runnables can be added to each event handler.