KTWizard
is a Metronic's custom plugin defined in [metronic]/theme/html/[demo]/src/js/components/wizard.js
.
This is Metronic 7 documentation!
To use most of the Metronic build tools, Node.js LTS version is required. Version 14.x LTS is recommended. Some of the plugins and framework in Metronic v7 does not support the latest Node.js version. https://nodejs.org/en/
Wizard
Overview
Initialization
First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.
wizard = new KTWizard('kt_wizard_v1', {
startStep: 1, // Initial active step number
clickableSteps: true, // Allow step clicking
});
wizard.goTo(2); // Change to a step by step number
alert(wizard.getStep()); // Get current step number. For more info see the full API functions list in the below table.
Options
var options = {
startStep: 1, // Initial active step number
clickableSteps: true, // Allow step clicking
};
Field | Type | Description | ||
---|---|---|---|---|
startStep |
number |
The page number of step to start at the initial load.
|
||
clickableSteps |
boolean |
Enable/disable wizard step click on the wizard navigation bar.
|
||
navigation |
boolean |
Enable/disable wizard previouse and next navigation default handlers to allow attaching custom navgiation handlers that allows implementing custom form validaiton flow.
|
Attributes
Atrribute | Description | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
data-wizard-state |
Set the initial KTWizard initial state. The state value will be changed based on interaction to the wizard.
|
||||||||||||||
data-wizard-type |
|
||||||||||||||
data-wizard-clickable |
|
API Methods
Method | Description |
---|---|
setDefaults(options) |
Set default options. |
goNext() |
Go to the next step. |
goPrev() |
Go to the prev step. |
goLast() |
Go to the last step. |
goFirst() |
Go to the first step. |
goTo(number) |
Go to a step. |
stop() |
Stop wizard. |
resume() |
Resume wizard. |
getStep() |
Get current step number. |
getNewStep() |
Get new step number. |
setNewStep(number) |
Set new step number. |
isLastStep() |
Check last step. |
isFirstStep() |
Check first step. |
on(name, handler) |
Attach event("change", "changed", "submit"). |
one(name, handler) |
Attach event that will be fired once. |