logo

Keen Admin

Bootstrap 4 Admin Dashboard Framework

Keen Wizard

Overview

KTWizard is a Keen's custom plugin defined in [keen]/theme/src/assets/js/theme/core/base/wizard.js.

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

Sample
startStep: 1
clickableSteps boolean

Enable/disable manually clicking step titles

Sample
clickableSteps: true

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">
				<a class="kt-wizard-v1__nav-item" href="#" data-ktwizard-type="step" data-ktwizard-state="current">
					<span>1</span>
				</a>
				<a class="kt-wizard-v1__nav-item" href="#" data-ktwizard-type="step">
					<span>2</span>
				</a>
				<a class="kt-wizard-v1__nav-item" href="#" data-ktwizard-type="step">
					<span>3</span>
				</a>
				<a class="kt-wizard-v1__nav-item" href="#" data-ktwizard-type="step">
					<span>4</span>
				</a>
			</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.

Name Description
current

Current wizard step

done

All the previous wizard page step

pending

All the next wizard page step

data-ktwizard-type

Name Description
step

Define element as a step number button

step-info

Define element as a step info

step-content

Define element as a step content

action-submit

Define element as action submit button

action-next

Define element as action button to the next step

action-prev

Define element as action button to the previous step

action-last

Define element as action button to the last step

action-first

Define element as action button to the first step

API Methods

Method Description
setDefaults(options)

Set default options

Input Parameters
Name Type Description
options object

A new options object for the menu

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

Input Parameters
Name Type Description
number number

Number of step to jump

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

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

one(name, handler)

Register event to be run once

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

Keen’s Key Features

Keen empowers your project with virtually limitless array of options
to create endless unique 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