material-wizard

material-wizard is an Angularjs wizard based on Angular Material
2 people use it
Author: 10440490?v=3 Matesign
Submitted by: 8038184?v=3 afrad

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 a form can be 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

Field 1 Item name is required Field 2 Item name is required Field 1 Item name is required Field 2 Item name is required Field 3 Item name is required

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

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)

comments powered by Disqus
This page was last updated about 2 years ago.