Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.
import { StepsModule } from 'primeng/steps';
Steps requires a collection of menuitems as its model.
<p-steps [model]="items" [readonly]="true"></p-steps>
In order to add interactivity to the component, disable readonly and use a binding to activeIndex along with activeIndexChange to control the Steps.
<p-toast></p-toast>
<p-steps [model]="items" [readonly]="false" [activeIndex]="activeIndex" (activeIndexChange)="onActiveIndexChange($event)"></p-steps>
Example below uses nested routes with Steps.
<div class="card">
<p-toast></p-toast>
<p-steps [model]="items" [readonly]="false"></p-steps>
</div>
<router-outlet></router-outlet>
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
p-steps | Container element. |
p-steps-item | Menuitem element. |
p-steps-number | Number of menuitem. |
p-steps-title | Label of menuitem. |
Steps component uses the nav element and since any attribute is passed to the root implicitly aria-labelledby or aria-label can be used to describe the component. Inside an ordered list is used where the current step item defines aria-current as "step".
Key | Function |
---|---|
tab | Adds focus to the active step when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence. |
enter | Activates the focused step if readonly is not enabled. |
space | Activates the focused step if readonly is not enabled. |
right arrow | Moves focus to the next step if readonly is not enabled. |
left arrow | Moves focus to the previous step if readonly is not enabled. |
home | Moves focus to the first step if readonly is not enabled. |
end | Moves focus to the last step if readonly is not enabled. |
API defines helper props, events and others for the PrimeNG Steps module.
Name | Type | Default | Description |
---|---|---|---|
model | array | null | An array of menuitems. |
activeIndex | number | 0 | Index of the active item. |
readonly | boolean | true | Whether the items are clickable or not. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
Name | Parameters | Description |
---|---|---|
toggle | event: browser event | Toggles the visibility of the popup menu. |
show | event: browser event | Displays the popup menu. |
hide | - | Hides the popup menu. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Parameters | Description |
---|---|---|
activeIndexChange | index: Index of the active step item | Callback to invoke when the new step is selected. |
MenuItem provides the following properties. Note that not all of them may be utilized by the steps component.
Name | Type | Default | Description |
---|---|---|---|
id | string | null | Identifier of the element. |
label | string | null | Text of the item. |
icon | string | null | Icon of the item. |
iconStyle | object | null | Inline style of the item's icon. |
command | function | null | Callback to execute when item is clicked. |
url | string | null | External link to navigate when item is clicked. |
routerLink | array | null | RouterLink definition for internal navigation. |
routerLinkActiveOptions | object | null | Configuration for active router link. |
queryParams | object | null | Query parameters for internal navigation via routerLink. |
fragment | string | null | Sets the hash fragment for the URL. |
queryParamsHandling | QueryParamsHandling | null | How to handle query parameters in the router link for the next navigation. One of: merge : Merge new with current parameters. preserve : Preserve current parameters.k. |
preserveFragment | boolean | false | When true, preserves the URL fragment for the next navigation. |
skipLocationChange | boolean | null | When true, navigates without pushing a new state into history. |
replaceUrl | boolean | null | When true, navigates while replacing the current state in history. |
state | object | null | Developer-defined state that can be passed to any navigation. |
items | array | null | An array of children menuitems. |
expanded | boolean | false | Visibility of submenu. |
disabled | boolean | false | When set as true, disables the menuitem. |
visible | boolean | true | Whether the dom element of menuitem is created or not. |
target | string | null | Specifies where to open the linked document. |
escape | boolean | true | Whether to escape the label or not. Set to false to display html content. |
separator | boolean | false | Defines the item as a separator. |
style | object | null | Inline style of the menuitem. |
styleClass | string | null | Style class of the menuitem. |
badge | string | null | Value of the badge. |
badgeStyleClass | string | null | Style class of the badge. |
title | string | null | Tooltip text of the item. |
automationId | any | null | Value of HTML data-* attribute. |
tabindex | string | 0 | Specifies tab order of the item. |
tooltipOptions | TooltipOptions | - | Options of the item's tooltip. |