Contact us Create app

Directory

← Back

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.

Author

Rating

Links

Popularity

<100

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

Compatibility

(Loading compatibility data...)

Last updated: 2017-11-01

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

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
Released
2017-11-01
Maturity
IMPORTED
License
Other

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

mtz-wizard - Vaadin Add-on Directory

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. mtz-wizard - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/MaritzSTL/mtz-wizard](https://github.com//MaritzSTL/mtz-wizard/blob/v0.3.0/README.md) on 2019-05-10 ]** [![Build Status](https://img.shields.io/travis/MaritzSTL/mtz-wizard/master.svg?style=flat-square)](https://travis-ci.org/MaritzSTL/mtz-wizard) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square)](https://www.webcomponents.org/element/MaritzSTL/mtz-wizard) # \ Generates a wizard flow from steps provided. Allows for validation across all steps. ```html Step 1 - Prebuilt step
Step 2 - Generic div using attribute w/ invalid styling applied
``` ## Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/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](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
Online