Progress tracker - Web Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
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 |
|---|---|---|---|
steps | object[] | Steps of the progress tracker | |
config | string | Configuration of the progress tracker | |
value | number | Current step. Between 1 and 10 | |
name | string | Name of the input |
The events emitted from the component are:
| Name | Payload | Description |
|---|---|---|
change | number | Returns the new value of the "value" attribute |
restarted | 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.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.
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.