A Polymer element for displaying the progress in a multi-step wizard

[ This description is mirrored from README.md at github.com/timeu/timeu-wizard on 2019-05-22 ]

Build Status Published on webcomponents.org

Demo and API Docs

<timeu-wizard>

The timeu-wizard element displaying the progress of a wizard as a series of connected circles. By default the step number is displayed inside the circle and if provided a label below. The available steps are provided by either as an array of Objects or an array of Strings.

This branch (master) works only with Polymer 2.x. For a Polymer 1.x version check out the 1.x branch

Versions (Polymer 2.x vs Polymer 1.x)

The master branch and all 2.x.x releases require Polymer 2.x. For Polymer 1.x support use 1.x.x releases and the 1.x branch.

How to use

Simple example:

<timeu-wizard steps='["Step1","Step2","Step3"]' step="2"></timeu-wizard>

By providing an array of Objects users can provide custom contents for the circles.

Example with custom circle content:

<timeu-wizard steps='[{"label:Step1","content":"A"},{label:"Step2","content":"B"}]'></timeu-wizard>

It is also possible to display a vertical progress by adding the vertical attribute:

<timeu-wizard vertical steps='["Step1","Step2","Step3"]' step="2"></timeu-wizard>

Styling

The following custom properties and mixins are also available for styling:

Custom property Description Default
--timeu-wizard-line-color The color of the line #dfdfdf
--timeu-wizard-line-size The thickness of the line 1px
--timeu-wizard-circle-size The size of the circle 40px
--timeu-wizard-filling-color The collor of the filling of the line #2db36f
--timeu-wizard-anim-speed The animation speed for the circles and lines 0.5s
--timeu-wizard-active-color The color of finished steps and the current active step #2db36f
--timeu-wizard-label-font-size The font-size of the labels 13px
--timeu-wizard-step-font-size The font-size of the steps inside of the circle 25px
--timeu-wizard-circle-border-size The thickness of the circle border 1px
--timeu-wizard Mixin applied to element host {}
--timeu-wizard-container Mixin applied to container div {}
--timeu-wizard-list Mixin applied to steps list {}
--timeu-wizard-list-item Mixin applied to each step {}
--timeu-wizard-list-item-active Mixin applied to each active step {}
--timeu-wizard-list-item-done Mixin applied to each done step {}
--timeu-wizard-list-item-icon Mixin applied to each step icon {}
--timeu-wizard-list-item-checkicon Mixin applied to each done step icon {}

Install

Link to this version
ImportedReleased 25 May 2017MIT License
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (1.1.0)
Browser Compatibility
Install with
bower install --save timeu/timeu-wizard"#2.0.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.0.0

Dependencies

  • polymer#Polymer/polymer#^2.0.0