Skip to content 
ProgressTracker ⚠️ Experimental
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 model |
restarted | void | Emitted on value reset |
Parameters use
Check the documentation about how to use the parameters.
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
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.
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