KTWizard is a Metronic's custom plugin defined in [metronic]/theme/default/[demo]/src/assets/js/global/components/base/wizard.js.
The World’s #1 Bootstrap 4 HTML, Angular 8, React & VueJS
Admin Dashboard Theme Framework
Wizard
Overview
Initialization
First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.
var wizard = new KTWizard('kt_wizard',options);Options
var options = {
startStep: 1,
clickableSteps: true
};| Field | Type | Description | ||
|---|---|---|---|---|
startStep |
number |
The page number of step to start at the initial load
|
||
clickableSteps |
boolean |
Enable/disable manually clicking step titles
|
Attributes
<div class="kt-grid kt-grid--desktop-xl kt-grid--ver-desktop-xl kt-wizard-v1 kt-wizard-v1--extend" id="k_wizard_v4" data-ktwizard-state="step-first">
<div class="kt-grid__item kt-wizard-v1__aside">
<!--begin: Form Wizard Nav -->
<div class="kt-wizard-v1__nav">
<div class="kt-wizard-v1__nav-items">
<div class="kt-wizard-v1__nav-item" data-ktwizard-type="step" data-ktwizard-state="current">
<span>1</span>
</div>
<div class="kt-wizard-v1__nav-item" data-ktwizard-type="step">
<span>2</span>
</div>
<div class="kt-wizard-v1__nav-item" data-ktwizard-type="step">
<span>3</span>
</div>
<div class="kt-wizard-v1__nav-item" data-ktwizard-type="step">
<span>4</span>
</div>
</div>
<div class="kt-wizard-v1__nav-details">
<div class="kt-wizard-v1__nav-item-wrapper" data-ktwizard-type="step-info" data-ktwizard-state="current">
<!-- step content info here -->
</div>
<div class="kt-wizard-v1__nav-item-wrapper" data-ktwizard-type="step-info">
<!-- step content info here -->
</div>
<div class="kt-wizard-v1__nav-item-wrapper" data-ktwizard-type="step-info">
<!-- step content info here -->
</div>
<div class="kt-wizard-v1__nav-item-wrapper" data-ktwizard-type="step-info">
<!-- step content info here -->
</div>
</div>
</div>
<!--end: Form Wizard Nav -->
</div>
<div class="kt-grid__item kt-grid__item--fluid kt-wizard-v1__wrapper">
<!--begin: Form Wizard Form-->
<form class="kt-form" id="k_form">
<!--begin: Form Wizard Step 1-->
<div class="kt-wizard-v1__content" data-ktwizard-type="step-content" data-ktwizard-state="current">
<!-- content here -->
</div>
<!--end: Form Wizard Step 1-->
<!--begin: Form Wizard Step 2-->
<div class="kt-wizard-v1__content" data-ktwizard-type="step-content">
<!-- content here -->
</div>
<!--end: Form Wizard Step 2-->
<!--begin: Form Wizard Step 3-->
<div class="kt-wizard-v1__content" data-ktwizard-type="step-content">
<!-- content here -->
</div>
<!--end: Form Wizard Step 3-->
<!--begin: Form Wizard Step 4-->
<div class="kt-wizard-v1__content" data-ktwizard-type="step-content">
<!-- content here -->
</div>
<!--end: Form Wizard Step 4-->
<!--begin: Form Actions -->
<div class="kt-form__actions">
<div class="btn btn-secondary btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u" data-ktwizard-type="action-prev">
<span>
<span>Previous</span>
</span>
</div>
<div class="btn btn-success btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u" data-ktwizard-type="action-submit">
<span>
<span>Submit</span>
</span>
</div>
<div class="btn btn-info btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u" data-ktwizard-type="action-next">
<span>
<span>Next Step</span>
</span>
</div>
</div>
<!--end: Form Actions -->
</form>
<!--end: Form Wizard Form-->
</div>
</div>
| Atrribute | Description | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
data-ktwizard-state |
Set the initial KTWizard initial state. The state value will be changed based on interaction to the wizard.
|
||||||||||||||||||
data-ktwizard-type |
|
API Methods
| Method | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
setDefaults(options) |
Set default options
|
||||||||||||
goNext() |
Go to the next step |
||||||||||||
goPrev() |
Go to the previous step |
||||||||||||
goLast() |
Go to the last step |
||||||||||||
stop() |
Cancel step |
||||||||||||
start() |
Resume step |
||||||||||||
goFirst() |
Go to the first step |
||||||||||||
goTo(number) |
Jump the step page into the specified step number
|
||||||||||||
getStep() |
Get current step page number |
||||||||||||
isLastStep() |
Check if the current step number is the last step |
||||||||||||
isFirstStep() |
Check if the current step number is the first step |
||||||||||||
on(name, handler) |
Register event
|
||||||||||||
one(name, handler) |
Register event to be run once
|
||||||||||||
I run a team of 20 product managers, developers, QA and UX resources. Previously we designed everything ourselves. For our newest platform we tried out Metronic. I cannot overestimate the impact Metronic has had. It's accelerated development 3x and reduced QA issues by 50%. If you add up the reduced need for design time/resources, the increase in dev speed and the reduction in QA, it's probably saved us $100,000 on this project alone, and I plan to use it for all platforms moving forward.
The flexibility of the design has also allowed us to put out a better looking & working platform and reduced my headaches by 90%. Thank you KeenThemes!
Powerful Framework
Everything within Metronic is customizable globally to provide limitless unique styled projects
Multi Demo
Choose a perfect design for your next project among hundreds of demos
Limitless Components
A huge collection of components to power your application with the latest UI/UX trands
Angular 8 & React Support
Enterprise ready Angular and React integration with built-in authentication module and many more
Bootstrap 4
Metronic deeply customizes Bootstrap with native look and feel
Exclusive Datatable Plugin
Our super sleek and intuitive Datatable comes packed with all advanced CRUD features
75,000+ Strong
Metronic is the only theme trusted by over 70,000 developers world wide
Continuous Updates
Lifetime updates with new demos and features is guaranteed
Quality Code
Metronic is written with a code structure that all developers will be able to pick up easily and fall in love