Skip to content
Versions v3 v2 v1

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

Then 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

Completed Issue Failure Running Last

Installation

npm install @patternfly/elements

Usage

Completed Issue Failure Running Last
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

© 2018-2024 Red Hat, Inc. Deploys by Netlify