https://github.com/timeu/timeu-wizard
A Polymer element for displaying the progress in a multi-step wizard
https://github.com/timeu/timeu-wizard
Last synced: 6 months ago
JSON representation
A Polymer element for displaying the progress in a multi-step wizard
- Host: GitHub
- URL: https://github.com/timeu/timeu-wizard
- Owner: timeu
- License: mit
- Created: 2015-12-23T20:26:13.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-09-18T13:32:43.000Z (almost 9 years ago)
- Last Synced: 2025-01-26T14:03:33.063Z (over 1 year ago)
- Language: HTML
- Homepage: https://www.webcomponents.org/element/timeu/timeu-wizard
- Size: 26.4 KB
- Stars: 14
- Watchers: 2
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/timeu/timeu-wizard) [](https://www.webcomponents.org/element/timeu/timeu-wizard)
_[Demo and API Docs](https://www.webcomponents.org/element/timeu/timeu-wizard)_
## <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](https://github.com/timeu/timeu-wizard/tree/1.x).
## How to use
Simple example:
```html
```
By providing an `array` of `Objects` users can provide custom contents for the circles.
Example with custom circle content:
```html
```
It is also possible to display a vertical progress by adding the `vertical` attribute:
```html
```
### 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 | {}