Code
Props
children
(WizardStep)
className
string
commland
boolean
show
boolean
title
string
type
string (Initial, Edit)
confirmationLoading
boolean
confirmationValidation
boolean
confirmationStepTitle
string
confirmationContentTitle
string
confirmationContentDescription
string
confirmationButton
string
confirmationError
boolean
confirmationErrorTitle
boolean
confirmationErrorMessage
boolean
confirmationDismissAction
Function
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 in Comm.land?
This component should overlay all the content inside the application. To keep a better order and avoiding problems with UI Shell, it is recommended inserting this component outside and next to the AppPage component. If it is inserted inside the AppPageContent component, the modal is not going to render correctly.
For a general usage, outside Comm.land and the UI Shell, the Alert component is recommended to be inserted either at the beginning or at the end of the react component where it is going to be used.
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.
Last updated