PatternFly Element | Progress stepper element
A component that gives the user a visual representation of the current state of their progress through an application (typically a multistep form).
Usage
Describe how best to use this web component along with best practices.
<pfe-progress-steps>
<pfe-progress-steps-item state="active" current>
<div slot="title">Current</div>
<a slot="link" href="#">View current step</a>
</pfe-progress-steps-item>
<pfe-progress-steps-item>
<div slot="title">Next</div>
<a slot="link" href="#">View next step</a>
</pfe-progress-steps-item>
<pfe-progress-steps-item>
<div slot="title">Last</div>
<a slot="link" href="#">View last step</a>
</pfe-progress-steps-item>
</pfe-progress-steps>Slots
pfe-progress-steps-item
-
title: The item's short descriptive title. -
description: A short description of what the item represents.
Attributes
pfe-progress-steps
-
vertical: Describe each available attribute and what function is serves.
pfe-progress-steps-item
-
current: Indicates if this item is the current active item. -
state: Describes the state of the current item; allows "inactive", "done", or "error".
Variable hooks
Available hooks for styling:
| Variable name | Default value | Region |
|---|---|---|
--pfe-progress-steps__item--Width |
var(--pfe-theme--ui--element--size--lg, 75px) | item |
--pfe-progress-steps__circle--Size |
var(--pfe-theme--ui--element--size--md, 32px) | circle |
--pfe-progress-steps__progress-bar--Color |
var(--pfe-theme--color--ui--border--lighter, #d2d2d2) | progress |
--pfe-progress-steps__progress-bar--Fill |
var(--pfe-theme--color--ui-accent, #06c) | progress |
--pfe-progress-steps__progress-bar--Width |
var(--pfe-theme--ui--border-width--md, 2px) | progress |
| --- | --- | --- |
--pfe-progress-steps-item--Width |
auto | |
--pfe-progress-steps-item--MinHeight--vertical |
var(--pfe-progress-steps__item--Width, var(--pfe-theme--ui--element--size--lg, 75px)) | |
--pfe-progress-steps-item__circle--Size |
var(--pfe-theme--ui--element--size--md, 32px) | circle |
--pfe-progress-steps-item__circle--Color |
var(--pfe-theme--color--feedback--info, #06c) | circle |
--pfe-progress-steps-item__circle--Color--hover |
var(--pfe-theme--color--feedback--info, #06c) | circle |
--pfe-progress-steps-item__circle--Color--focus |
var(--pfe-theme--color--feedback--info, #06c) | circle |
--pfe-progress-steps-item__circle--Background |
radial-gradient(circle, white 60%, rgba(255, 255, 255, 0) 61%) | circle |
--pfe-progress-steps-item__circle--Width |
var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px)) | circle |
--pfe-progress-steps-item__circle--Height |
var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px)) | circle |
--pfe-progress-steps-item__circle-wrapper--Width |
var(--pfe-progress-steps-item__circle--Width, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) | circle |
--pfe-progress-steps-item__circle-wrapper--Height |
var(--pfe-progress-steps-item__circle--Height, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) | circle |
--pfe-progress-steps-item__title--Color |
var(--pfe-theme--color--text, #151515) | title |
--pfe-progress-steps-item__title--Color--active |
var(--pfe-theme--color--feedback--info, #06c) | title |
--pfe-progress-steps-item__title--Color--error |
var(--pfe-theme--color--feedback--critical--lighter, #c9190b) | title |
--pfe-progress-steps-item__title--MarginTop--vertical |
calc( var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px)) / 6) | title |
--pfe-progress-steps-item__description--Color |
var(--pfe-theme--color--text--muted, #6a6e73) | description |
--pfe-progress-steps-item__description--Color--error |
var(--pfe-theme--color--feedback--critical--lighter, #c9190b) | description |
--pfe-progress-steps-item--spacer |
var(--pfe-theme--content-spacer--body--sm, 0.5rem) | |
--pfe-progress-steps-item__circle-inner--Width |
calc( var(--pfe-progress-steps-item__circle--Width, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) / 2.2) | circle |
--pfe-progress-steps-item__circle-inner--Height |
calc( var(--pfe-progress-steps-item__circle--Height, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) / 2.2) | circle |
--pfe-progress-steps-item__circle-outer--Width |
var(--pfe-progress-steps-item__circle--Width, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) | circle |
--pfe-progress-steps-item__circle-outer--Height |
var(--pfe-progress-steps-item__circle--Height, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) | circle |
Dev
npm start
Test
npm run test
Build
npm run build
Demo
From the PFElements root directory, run:
npm run demo
Code style
Progress stepper (and all PFElements) use Prettier to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can integrate your editor with Prettier to have the style rules applied on every save.