ContainerStepped
ContainerStepped displays content in a sequential, step-by-step format, guiding users through a process or workflow.
Each step is clearly marked, often with a number or icon, and the content can vary from text and images to forms and buttons. This component is particularly useful in tutorial guides, setup processes, or any scenario where a linear progression is required.
Examples
Various examples showcasing different configurations of the component
Step 1
Profile
Step 2
Settings
Step 3
Payment
Property
Value
Elevation
1
Value
1
Steps
[{"title":"Step 1","subtitle":"Profile"},{"title":"Step 2","subtitle":"Settings"},{"title":"Step 3","subtitle":"Payment"}]
Properties
Each component can be customized and configured based on product requirements. You can modify the component on Canonic by clicking on the component and opening the configuration panel.
Property
Description
Default Value
Type
Elevation
The elevation level of the container.
1
String
BG Color
The background color of the container.
#FFFFFF
Color
Default step
The default tab to show.
String
Steps
The steps to display in the container.
List
Triggers
Components expose certain events such as clicking. You can use these events to perform actions such as navigation, fetching data and controlling other components. The events exposed by this component are listed below.
Property
Description
On click
Triggered when the card is clicked.
On double click
Triggered when the card is double clicked.