ProgressIndicator

The ProgressIndicator component can be used to improve the user experience of a multi-step process or form by visually indicating the progress and providing a clear sense of direction to the user.

Import

React

// with @dhl-official/react-library:
import { DhlProgressIndicator } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlProgressIndicator } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-progress-indicator></dhl-progress-indicator>

Vue.js

// with @dhl-official/vue-library:
import { DhlProgressIndicator } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlProgressIndicator } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlProgressIndicator items={items}></DhlProgressIndicator>

Angular

<dhl-progress-indicator [items]="items"></dhl-progress-indicator>

Vue.js

<dhl-progress-indicator  :items="items"></dhl-progress-indicator >

Interactive Demo

Migrating from DUIL 1.0

• Rename onClickHandler to clickEvent

Readme

Properties

Property	Attribute	Description	Type	Default
clickEvent	--	An optional onClick callback handler.	(index: number) => void	undefined
connectorType	connector-type	An optional prop for the connector type on the component	"arrow" \| "empty" \| "line"	DHL_PROGRESS_INDICATOR.CONNECTOR_TYPE.EMPTY
dataClassName	data-class-name	An optional prop for the class of the root element.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-progress-indicator-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	"IndicatorStep"
items (required)	--	An REQUIRED prop for the items. Items Example: [ { number: "1", text: "Finished", state?: ProgressIndicator.STEP_STATES.FINISHED }, ] number and text are required too.	StepItem[]	undefined
size	size	An optional size prop for the component.	"md" \| "sm"	DHL_PROGRESS_INDICATOR.SIZE.MD
type	type	An optional type prop used to set the type	"horizontal" \| "vertical"	DHL_PROGRESS_INDICATOR.TYPE.HORIZONTAL

Dependencies

Depends on

• dhl-indicator-step

Graph

---

Built by DHL User Interface Library Team!