All of the elements required to implement a stepper controlled series of forms that support lazy-loading steps upon activation as well as validation and bulk submission tasks.

[ This description is mirrored from README.md at github.com/MaritzSTL/mtz-wizard on 2019-05-10 ]

Build Status Published on webcomponents.org

<mtz-wizard>

Generates a wizard flow from steps provided. Allows for validation across all steps.

<mtz-wizard-stepper steps="[[steps]]" selected="{{selected}}"></mtz-wizard-stepper>
<mtz-wizard id="wizard" steps="{{steps}}" selected="{{selected}}">
  <mtz-wizard-step name="step-1" label="Select campaign settings">
    Step 1 - Prebuilt step
  </mtz-wizard-step>
  <div wizard-step name="step-2" label="Create ad" invalid>
    Step 2 - Generic div using attribute w/ invalid styling applied
  </div>
  <mtz-wizard-step name="step-3" label="Preview ad" optional>
    <iron-form wizard-form>
      <form>
        <label>
          Age:
          <input required type="number" name="age" />
        </label>
      </form>
    </iron-form>
  </mtz-wizard-step>
</mtz-wizard>

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer install --variants to install all dependencies for both 1.x and 2.x (mainline)

Viewing Your Element

$ polymer serve

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.

Install

Link to this version
ImportedReleased 01 November 2017Other
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
Release notes - Version 0.3.0

Dependencies

Polymer/polymer#^1.9 || ^2.0

  • PolymerElements/iron-form#^2.0
  • PolymerElements/iron-icon#^1.0 || ^2.0
  • PolymerElements/iron-icons#^1.0 || ^2.0
  • PolymerElements/iron-pages#^1.0 || ^2.0
  • PolymerElements/paper-ripple#^1.0 || ^2.0