@belomx/timeu-wizard

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	{}