Code
Props
children
(WizardStep)
className
string
commland
boolean
title
string
type
string (Initial, Edit)
confirmationValidation
boolean
confirmationStepTitle
string
confirmationContentTitle
string
confirmationContentDescription
string
confirmationButton
string
nextButton
string
previousButton
string
cancelButton
string
onCancel
Function Event
onConfirm
Function Event
commland prop is used to adjust the Alert component to the Commland UI-Shell automatically.
Where to Insert This Component?
This component should overlay all the content inside an application. Knowing that it can be inserted wherever the developer wants, it should not be affected by the rest of content structure.
To keep a better order, we recommend inserting this component either at the beginning or at the end of a component component.
At inserting it inside a Commland app, it should be placed outside/next to the AppPage component. If it is inserted inside the AppPageContent component, the modal is not going to render correctly.
Type
By default, the type prop is set on 'Initial', forcing the Wizard to start on the first step to follow a specific order. In the case
onCancel and onConfirm
These actions are going to be executed only at clicking the cancel and confirmation buttons respectively. A difference between the Mini Wizard and the Modal component, is that by default the Mini Wizard is locked and it cannoty be exited in other ways but clicking the cancel button.
Children
To generate the structure required for the component, the developer is able to insert the following components as children elements:
WizardStep
children
WizardStepActions (Opcional)
WizardStepContent, WizardStepReview
className
string
stepTitle
string
validation
boolean (This should be connected to a state on the developers side)
WizardStepActions
children
Any
type
string (Actions)
className
string
WizardStepContent
children
Any
type
string (Content)
className
string
WizardStepReview
children
Any
type
string (Review)
className
string
Example
Components Dependency
For this component elaboration there were used the following internal components:
Live Demo
For detailed code usage documentation, see the Storybooks for each framework below.
React
Last updated