Progress tracker - Web Component

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Parameters

The Web component uses the <z-progress-tracker> tag:

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description	Slot
steps	object[]	Steps of the progress tracker
config (optional)	string	Configuration of the progress tracker
value (optional)	number	Current step. Between 1 and 10
name (optional)	string	Name of the input

The events emitted from the component are:

Name	Payload	Description
onchange	number	Returns the new value of the "value" attribute
onrestarted	void	Emitted on value reset

steps

The steps attribute recieve an array of objects with the following properties:

• text: Small description of the step.
• icon: Icon to be displayed on the step.

Both properties are optional.

config

The config parameter is used to define the orientation and the size of the component.

vertical / horizontal

The first modifier defines de orientation of the component. The default value is vertical. Possible values are: vertical or horizontal.

small

The second modifier defines the size of the component. By adding small value after the orientation, the component will be smaller.

value

The value parameter is used to set the current step of the progress tracker.

name

The name parameter is used to set the name of the component.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.5.3/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.3/@zurich/web-components/progress-tracker.js"></script>

Code

<z-progress-tracker steps='[{"text":"Step 1"},{"text":"Step 2"},{"text":"Step 3"},{"text":"Step 4"}]' value="3"
  config="horizontal"></z-progress-tracker>