Wizard
Wizard represents a stepped workflow as a form of linear and mandatory progression through a defined process with several bullet points where the user need to interact with the content of each step during the workflow.
Name | Default | Description |
---|---|---|
mode: 'horizontal' | 'vertical' | 'horizontal' | The wizard can be showed in horizontal or vertical. |
defaultCurrentStep: number | Initially selected step, only when it is uncontrolled. | |
currentStep: number | 0 | Defines which step is marked as the current. The numeration starts at 0. If undefined, the component will be uncontrolled and the step will be managed internally by the component. |
onStepClick: function | This function will be called when the user clicks a step. The step number will be passed as a parameter. | |
steps: object[] | [] | An array of objects representing the steps. Each of them has the following properties:
|
margin: string | object | Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | |
tabIndex: number | 0 | Value of the tabindex attribute that is given to all the steps. |