Example of code for editable steps

editable-steps-code.html

<!-- style -->
<style>
.mdl-stepper > .mdl-step > .mdl-step__content {
  background-color: rgba(0,0,0,0.2);
}
</style>

<!-- markup -->
<ul class="mdl-stepper mdl-stepper--linear" id="demo-editable-steps">
  <li class="mdl-step mdl-step--editable">
    <span class="mdl-step__label">
      <span class="mdl-step__title">
        <span class="mdl-step__title-text">Title of step 1</span>
        <span class="mdl-step__title-message">You can edit this step after</span>
      </span>
    </span>
    <div class="mdl-step__content"></div>
    <div class="mdl-step__actions">
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
        Continue
      </button>
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
        Cancel
      </button>
    </div>
  </li>
  <li class="mdl-step">
    <span class="mdl-step__label">
      <span class="mdl-step__title">
        <span class="mdl-step__title-text">Title of step 2</span>
      </span>
    </span>
    <div class="mdl-step__content"></div>
    <div class="mdl-step__actions">
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
        Continue
      </button>
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
        Cancel
      </button>
    </div>
  </li>
  <li class="mdl-step">
    <span class="mdl-step__label">
      <span class="mdl-step__title">
        <span class="mdl-step__title-text">Title of step 3</span>
      </span>
    </span>
    <div class="mdl-step__content"></div>
    <div class="mdl-step__actions">
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
        Continue
      </button>
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
        Cancel
      </button>
    </div>
  </li>
</ul>

<!-- script -->
<script>  
  // Editable steps demonstration 
  var demoEditableSteps = function (e) {
    var element = document.querySelector('.mdl-stepper#demo-editable-steps');
    if (!element) return false;
    var stepper = element.MaterialStepper;
    var steps = element.querySelectorAll('.mdl-step');
    var step;
    for (var i = 0; i < steps.length; i++) {
      step = steps[i];
      step.addEventListener('onstepnext', function (e) {
        stepper.next();
      });
    }
    element.addEventListener('onsteppercomplete', function (e) {
      var toast = document.querySelector('#snackbar-stepper-complete');
      if (!toast) return false;
      toast.MaterialSnackbar.showSnackbar({
        message: 'Stepper with editable step are completed',
        timeout: 4000,
        actionText: 'Ok'
      });
    });
  };

  window.addEventListener('load', demoEditableSteps);
</script>