Steps

The widget shows the progress through a sequence of numbered steps. This can be used to represent navigation and display a feedback message after each step is done.

Insert

Preview

Basic

Steps

List down the number of steps involved here. Each step should specify the following details.

Property	Description
name	The name to be displayed near the step icon
tooltip	The text to be shown as the user hovers the mouse over the stepper
id	This is for development purpose to set an id for each step
widget	The name of the widget attached in the step

[{"name":"Profile Info","tooltip":"Enter your profile information","id":0,"widget":"w1"},{"name":"Upload Docs","tooltip":"Upload the documents required","id":1,"widget":"w2"},{"name":"Choose Services","tooltip":"some tooltip","id":2,"widget":"w3"},{"name":"Submit","tooltip":"some tooltip","id":3,"widget":"w4"}]

Interaction

Event Handlers

Event	Description
Click	This event will be triggered when the user clicks on the icon.
Step Changed	This event will be triggered when the moves to another stepper.

Hide

This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

Set the visibility

Layout

Mode

The Stepper widget provides two modes to customize its layout.

Vertical or Horizontal

Vertical	The stepper widget displays steps vertically.
Horizontal	The stepper widget displays steps horizontally.

Initial Step for Stepper

This is the index based number which specifies the step number that should be displayed for users to start with the widget.

Initial step to start with

Style

Property	Description
Background	Users can change the colour of the text background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.
Border Color for Completed Steps	Set the colour to the border lines for the steps that are completed.
Margin	This value is set in terms of "px" number which creates the space between the border and the content of the widget.
Padding	This value is set in terms of "px" number which creates the space between the border and outer elements.
Border Color	Set the colour to the border lines for the steps where the user did not complete the step.
Border Radius	This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.
Border Width	Set the thickness of the border of the widget using this value. It is defined using "px" terms.