Skip to content 
Progress tracker - Web Component
The ProgressTracker component can be used imported from:
Playground
Parameters
The Web component uses the <z-progress-tracker> tag:
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description | Slot | A11y |
|---|---|---|---|---|
steps | object[] | Steps of the progress tracker | ||
config | string | Configuration of the progress tracker | ||
model | number | Current step. Between 1 and 10 | ||
name | string | Name of the input |
Events
This component has events. Check the documentation about how to use the events.
| Name | Payload | Description |
|---|---|---|
change | number | Returns the new value of the "value" attribute |
restarted | void | Emitted on value reset |
Slots
This component has slots. Check the documentation about how to use the slots.
| Name | Tags | Description |
|---|
Parameters use
steps
The steps attribute receive an array of objects with the following properties:
text: Small description of the step.icon: Icon to be displayed on the step.disabled: explicitly disables the state.
Both properties are optional.
We can use <option> tags to define the values of steps
config
The config parameter is used to define the orientation and the size of the component.
direction
The first modifier defines de orientation of the component. The default value is horizontal. Possible values are: vertical or horizontal.
The vertical gap can be adjusted using the --z-progress-track-gap--vertical CSS token:
small
The second modifier defines the size of the component. By adding small value after the orientation, the component will be smaller.
model
The model 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.
Methods
reset()
We can all the reset() method of the WebComponent in order to reset the value. This will clean the internal states and emit the nullable value with the change event, plus a restarted event:
In this example, the button triggers the method:
Value:
1The reset is done to 1.
Browser support
Detected engine:
Chromium
Webkit
Gecko