Progress Stepper
A progress stepper displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
Installation
We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.
For more information on import maps and how to use them, see the import map reference on MDN Web Docs.
If you are using node and NPM, you can install this component using npm:
npm install @patternfly/elementsThen import this component into your project by using a bare module specifier:
import '@patternfly/elements/pf-progress-stepper/pf-progress-stepper.js';Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.
Overview
Installation
npm install @patternfly/elementsUsage
View HTML Source
<pf-progress-stepper>
<pf-progress-step variant="success">Completed</pf-progress-step>
<pf-progress-step current variant="warning">Issue</pf-progress-step>
<pf-progress-step variant="danger">Failure</pf-progress-step>
<pf-progress-step variant="info">Running</pf-progress-step>
<pf-progress-step>Last</pf-progress-step>
</pf-progress-stepper>
Slots
None
Slots on pf-progress-step
- Default Slot
-
Short description of the current step.
-
description -
Longer description of the current step.
-
icon -
Overrides the icon property
Attributes
vertical-
Whether to use the vertical layout
- DOM Property
vertical- Type
-
boolean - Default
-
false
center-
Whether to use the center alignment
- DOM Property
center- Type
-
boolean - Default
-
false
compact-
Whether to use the compact layout
- DOM Property
compact- Type
-
boolean - Default
-
false
Methods
None
Events
None
CSS Custom Properties
None
CSS Shadow Parts
None
