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
ngModelChange	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

Step 1Step 2Step 3Last step

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.

Step 1Step 2Step 3Last step

The vertical gap can be adjusted using the --z-progress-track-gap--vertical CSS token:

Step 1Step 2Step 3Last step

small

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

ngModel

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.

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

CodeSandbox example

Sorry, not available yet ☹️