# Steps ## 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 | ```json [{"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.

#### Disabled Disables the user interaction with the element on the page. It visually indicates that the element is inactive and prevents users from interacting with it when applied.

## Layout #### Theme | Property | Description | | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Dot |

![](https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FVNeaysSgcsbYtEljDKSF%2Fimage.png?alt=media\&token=13e24e9a-c988-4b97-8577-9377e89a2b57) | | Number |

| | Icon |

| | Icon with Text |

| | Tiles |

| | Percentage |

| #### Mode The Stepper widget provides two modes to customize its layout.

| `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.

#### Hide Body Hides the body of the widget content and shows only the steps section. #### Hide Footer Hides only the footer section of the widget, removing the 'Previous' and 'Next' buttons. #### Progress Percentage Enter a numerical value in this field and this will set the percentage value during the progress of each step. ## 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.
Text Weight	Increase or decrease the thickness of the font using the list of numbers from 100-800.

## Body Style

Property	Description
Body Padding	This value is set in terms of "px" number which creates the space between the body border and other elements of the widget.
Background	Users can change the colour of the background using this property. It has all the RGB colour ranges to pick from.
BG Image	Provide the URL for the image serves as the background image to the widget
BG Repeat	Controls the repetition of the widget's background image. `repeat` - The background image is repeated both vertically and horizontally. `no-repeat` - The background-image is not repeated. The image will only be shown once. The reference to the list of options can be found here: MDN web docs
BG Size	Specifies the size of the background image. `auto`- Default value. The background image is displayed in its original size cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges The reference to the list of options can be found here: MDN web docs
BG Position	Sets the starting position of a background image. center - keeps the image at the center position. The reference to the list of options can be found here: MDN web docs
BG Origin	Specifies the origin position (the background positioning area) of the background image. The reference to the list of options can be found here: MDN web docs

## Footer Style

Property	Description
Footer Padding	This value is set in terms of "px" number which creates the space between the footer border and other elements of the widget.
Background	Users can change the colour of the background using this property. It has all the RGB colour ranges to pick from.
BG Image	Provide the URL for the image serves as the background image to the widget
BG Repeat	Controls the repetition of the widget's background image. `repeat` - The background image is repeated both vertically and horizontally. `no-repeat` - The background-image is not repeated. The image will only be shown once. The reference to the list of options can be found here: MDN web docs
BG Size	Specifies the size of the background image. `auto`- Default value. The background image is displayed in its original size cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges The reference to the list of options can be found here: MDN web docs
BG Position	Sets the starting position of a background image. center - keeps the image at the center position. The reference to the list of options can be found here: MDN web docs
BG Origin	Specifies the origin position (the background positioning area) of the background image. The reference to the list of options can be found here: MDN web docs