Skip to content 
Progress tracker - Web Component
The ProgressTracker component can be used imported from:
Playground
Parameters
...
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.
Attention!
If you hardcode this value, it will not be reactive and the selection won't change. Use a variable instead and, ideally, a closed loop.
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