md-steppers demo

md-steppers demo from https://github.com/ipiz/md-steppers/

by pankaj agrawal

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel="stylesheet" href="//ipiz.herokuapp.com/md-steppers.css">
<script src="//ipiz.herokuapp.com/md-steppers.js"></script>
<div ng-app="app">
  <md-card ng-init="step2.disabled = true; selected = 0">
    <md-steppers  md-selected="selected" md-stretch-steppers="always">
      <md-step label="Step 1" md-complete="step1.completed" ng-disabled="step1.disabled" md-complete="false">
        <md-content>
          <h1>
          Content Step 1
          </h1>
          <md-button class="md-raised md-primary" ng-click="step2.disabled = false">Enable Step 2</md-button>
          <md-button class="md-raised md-primary" ng-click="selected = 1">NEXT</md-button>
        </md-content>
      </md-step>
      <md-step label="Step 2" md-complete="step2.completed" ng-disabled="step2.disabled">
        <md-content>
          <h1>
          Content Step 2
          </h1>
          <md-button class="md-raised md-primary" ng-click="selected = 0">PREV</md-button>
          <md-button class="md-raised md-primary" ng-click="step1.completed = true">Complete Step 1</md-button>
          <md-button class="md-raised md-primary" ng-click="selected = 2">NEXT</md-button>
        </md-content>
      </md-step>
      <md-step label="Finish" md-complete="step3.completed" ng-disabled="step3.disabled">
        <md-content>
          <h1>
          Finish
          </h1>
        </md-content>
      </md-step>
   ...

CSS

md-content {
  text-align: center;
}

JavaScript

var app = angular.module('app', ['ngMaterial', 'md-steppers']);