Progress Stepper
Overview
A progress stepper displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
Installation
npm install @patternfly/elementsUsage
<pf-progress-stepper>
<pf-progress-step variant="success">Completed</pf-progress-step>
<pf-progress-step variant="warning">Issue</pf-progress-step>
<pf-progress-step variant="danger">Failure</pf-progress-step>
<pf-progress-step current 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
