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 3.x. **

Versions (Polymer 3.x)

The master branch and all 3.x.x .

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-line-filling-color | The color of the of the line when is filled | #2db36f --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 | {} --timeu-wizard-list-item-label | Mixin applied to each item label | {} --timeu-wizard-list-item-right-label | Mixin applied to each item right label | {} --timeu-wizard-list-item-left-label | Mixin applied to each item left label | {}