#### Keen - The Ultimate Multi-Demo Bootstrap Admin Theme

#### The most complete UI/UX template solution for today's web projects of any size

## Keen Wizard

### Overview

`KTWizard` is a Keen's custom plugin defined in `[root]/theme/default/src/theme/framework/components/base/wizard/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,
        manualStepForward: false
    };

Field | Type | Description
--- | --- | ---
`startStep` | `number` | The page number of step to start at the initial load
Sample
    startStep: 1
`manualStepForward` | `boolean` | Set enable/disable to manually step forward
Sample
    manualStepForward: false

### 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.

- Based On Bootstrap 4.x
- Multi-Demo Concept
- Enterprise Ready Architect
- Integrated Build Tools: Gulp, NPM, Yarn, SASS
- Full RTL Support
- Included Classic(without build tool) Version
- Enterprise Ready Core Framework
- Full SASS Support
- Re-Usable Component System
- And many more...

> We truly hope that our love and dedication to produce an incredibly powerful high level solution suits all your project needs. We will continue to deliver incredible enterprise ready solutions for Angular, React and VueJS to serve you better. We sincerely hope you enjoyed using Keen as much as we enjoyed building it.

> Sean, Keenthemes Co-Author