Steps Steps components is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.

Basic

Clickable

Custom Style

Import


import {StepsModule,MenuItem} from 'primeng/primeng';

MenuModel API

Steps uses the common menumodel api to define its items, visit MenuModel API for details.

Getting Started

Steps requires a collection of menuitems as its model.


<p-steps [model]="items"></p-steps>


export class MenuDemo {
    
    private items: MenuItem[];

    ngOnInit() {
        this.items = [
            {label: 'Step 1'},
            {label: 'Step 2'},
            {label: 'Step 3'}
        ];
    }
}

Readonly

Items are readonly by default, if you'd like to make them interactive then disable readonly.


<p-steps [model]="items" [readonly]="false"></p-steps>

Attributes

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.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-steps Container element.
ui-steps-item Menuitem element.
ui-steps-number Number of menuitem.
ui-steps-title Label of menuitem.

Dependencies

None.


<p-growl [value]="msgs"></p-growl>

<h3 class="first">Basic</h3>
<p-steps [model]="items" styleClass="steps-basic"></p-steps>

<h3>Clickable</h3>
<p-steps [model]="items" [(activeIndex)]="activeIndex" styleClass="steps-basic" [readonly]="false"></p-steps>

<h3>Custom Style</h3>
<p-steps [model]="items" styleClass="steps-custom"></p-steps>


@Component({
    templateUrl: 'showcase/demo/steps/stepsdemo.html',
    styles: [`
        .ui-steps .ui-steps-item {
            width: 25%;
        }
        
        .ui-steps.steps-custom {
            margin-bottom: 30px;
        }
         
        .ui-steps.steps-custom .ui-steps-item .ui-menuitem-link {
            height: 10px;
            padding: 0 1em;
        }
         
        .ui-steps.steps-custom .ui-steps-item .ui-steps-number {
            background-color: #0081c2;
            color: #FFFFFF;
            display: inline-block;
            width: 30px;
            border-radius: 50%;
            margin-top: -10px;
            margin-bottom: 10px;
        }
        
        .ui-steps.steps-custom .ui-steps-item .ui-steps-title {
            color: #555555;
        }
    `],
    encapsulation: ViewEncapsulation.None
})
export class StepsDemo implements OnInit {

    private items: MenuItem[];
    
    msgs: Message[] = [];
    
    activeIndex: number = 1;

    ngOnInit() {
        this.items = [{
                label: 'Personal',
                command: (event: any) => {
                    this.activeIndex = 0;
                    this.msgs.length = 0;
                    this.msgs.push({severity:'info', summary:'First Step', detail: event.item.label});
                }
            },
            {
                label: 'Seat',
                command: (event: any) => {
                    this.activeIndex = 1;
                    this.msgs.length = 0;
                    this.msgs.push({severity:'info', summary:'Seat Selection', detail: event.item.label});
                }
            },
            {
                label: 'Payment',
                command: (event: any) => {
                    this.activeIndex = 2;
                    this.msgs.length = 0;
                    this.msgs.push({severity:'info', summary:'Pay with CC', detail: event.item.label});
                }
            },
            {
                label: 'Confirmation',
                command: (event: any) => {
                    this.activeIndex = 3;
                    this.msgs.length = 0;
                    this.msgs.push({severity:'info', summary:'Last Step', detail: event.item.label});
                }
            }
        ];
    }
}