# new WizardPanel(config)
Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:
Create the Web Component and call its init method:
const myWizardPanel = document.createElement("a-wizardpanel").init(config)
Or use the shorthand for it:
const myWizardPanel = createWizardPanel({
// Can have the same config properties as a panel
title: "Setup"
icon: "fas fa-wrench",
headerBackgroundColor: "#00aaee",
closable: true,
draggable: true,
modal: true,
display: "flex"
flexFlow: "column",
padding: "10px",
// Wizard pages
items: [
wizardPage1,
wizardPage2,
wizardPage3
],
actionText: "Proceed",
action: () => {
// Perform action
}
})
myWizardPanel.render()
Or directly declare the config inside a container component:
const myBlock = createBlock({
items: [
{
type: "wizardpanel",
title: "Foo",
items: [
wizardPage1,
wizardPage2,
wizardPage3
],
actionText: "Proceed",
action: () => {
// Perform action
}
}
]
})
myBlock.render()
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
config |
object
|
||
action |
object
|
Action triggered when the last page of the wizard is validated |
|
actionText |
object
|
<optional> |
Text of the action button of the last page, like "Done", "Proceed", "Let's go". Default = "OK" |
pageValidation |
boolean
|
<optional> |
If true, validate each page when navigating next/previous. Default = false |
this
Generated markup
<a-wizardpanel class="a-panel">
<div class="panel-header">
<span class="panel-icon"></span>
<span class="panel-title"></span>
<span class="panel-custom-buttons"></span>
<span class="panel-button-expand-collapse"></span>
<span class="panel-button-maximize"></span>
<span class="panel-button-close"></span>
</div>
<div class="panel-body">
<!-- Panel items are inserted here -->
</div>
</a-wizardpanel>
Methods
# next()
Navigate to the next wizard page
# previous()
Navigate to the previous wizard page
# validatePage(pageIndexopt)
Validates the form of a wizard page. Prevents from navigating to the next page if the form is not validated.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
pageIndex |
number
|
<optional> |
Optional wizard's page to validate. If not specified, tries to validate the current page. |