mtz-wizard

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.

View larger

Close

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

<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.

Links

• Online Demo
• Documentation
• GitHub Homepage
• View on GitHub
• Issue tracker
• License

Compatibility