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/elements
Usage
<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