pibi/material-wizard

material-wizard

material-wizard is an Angularjs wizard based on Angular Material inspired from angular wizard https://github.com/mgonto/angular-wizard Usually a form is be defined inside this step. But one form can being defined for all the steps. use the on onExit on mt-wz-step and the onFinish on the mt-wizard to control the data or api call submitted the server

A demo can be found under http://plnkr.co/edit/rp5qJykW2DD1A7EvaVZP?p=preview

Dependencies

material-wizard depends on Angular and angular material.

Installation

Bower

bower install material-wizard --save

Usage

First you need to add the module dependency

angular.module( 'app', ['ngMaterial','material.wizard'] );

and then add the html part

 <mt-wizard btn-progress-color="#D8D8D8"  btn-bg-color="#FAFAFA" active-btn-bg-color="#E9E9E9"  >
    <mt-wz-step title="Step 1" step-img="step1.svg"   >
        <form name="formStep1"  novalidate layout="column" layout-sm="column" layout-align="start start">
           <md-input-container >
             <label>Field 1</label>
             <input   name="field1" ng-model="field1"  type="text" required step-fill-percent="67"  step-index="0">
             <div ng-show="field1.$dirty " ng-messages="field1.$error">
               <div ng-message="required">Item name is required</div>
             </div>
           </md-input-container>
           <md-input-container >
             <label>Field 2</label>
             <input   name="field2" ng-model="field2"  type="text" required step-fill-percent="34"  step-index="0">
             <div ng-show="field2.$dirty " ng-messages="field2.$error">
               <div ng-message="required">Item name is required</div>
             </div>
           </md-input-container>
          </form>
    </mt-wz-step>
    <mt-wz-step title="Step 2" step-img="step2.svg" >
   <form name="formStep1"  novalidate layout="column" layout-sm="column" layout-align="start start">
           <md-input-container >
             <label>Field 1</label>
             <input   name="field1" ng-model="field1"  type="text" required step-fill-percent="67"  step-index="1">
             <div ng-show="field1.$dirty " ng-messages="field1.$error">
               <div ng-message="required">Item name is required</div>
             </div>
           </md-input-container>
           <md-input-container >
             <label>Field 2</label>
             <input   name="field2" ng-model="field2"  type="text" required step-fill-percent="35"  step-index="1">
             <div ng-show="field2.$dirty " ng-messages="field2.$error">
               <div ng-message="required">Item name is required</div>
             </div>
           </md-input-container>
           <md-input-container >
             <label>Field 3</label>
             <input   name="field3" ng-model="field3"  type="text" required step-fill-percent="35"  step-index="1">
             <div ng-show="field3.$dirty " ng-messages="field3.$error">
               <div ng-message="required">Item name is required</div>
             </div>
           </md-input-container>
          </form>
    </mt-wz-step>


  </mt-wizard>

Directive parameters:

mt-wizard

btn-progress-color: color of the circular progress that will be showed in the step circle

btn-bg-color: normal button progress color

active-btn-bg-color: selected button progress color

chevrons-always-visible: "true" if you want disable/enable the chevrons instead of hide/show them

mt-wz-step

title: Title of the step that will be displayed in the top left of wizard

step-img: An svg image that will displayed in the step circle

step-fill: Percent of the circular progress that will be showed in the step circle

onExit: function call on exit of the step, normally a form submit or server api call

step-fill-percent

step-fill-percent: how much the circular progress should be increased

step-index: mt-wz-step current index (starting with 0)