MenuModel API

    Steps requires a collection of menuitems as its model.

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

    Readonly

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

    Events

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

    Dependencies

    Source

    View on GitHub

    2. @Component({
    3.     templateUrl: 'showcase/demo/steps/stepsdemo.html',
    4.     providers: [MessageService],
    5.     styles: [`
    6.         .ui-steps .ui-steps-item {
    7.             width: 25%;
    8.         }
    10.         .ui-steps.steps-custom {
    11.             margin-bottom: 30px;
    12.         }
    14.         .ui-steps.steps-custom .ui-steps-item .ui-menuitem-link {
    15.             padding: 0 1em;
    16.         }
    18.         .ui-steps.steps-custom .ui-steps-item .ui-steps-number {
    19.             background-color: #0081c2;
    20.             color: #FFFFFF;
    21.             display: inline-block;
    23.             border-radius: 50%;
    24.             margin-top: -14px;
    25.             margin-bottom: 10px;
    26.         }
    28.         .ui-steps.steps-custom .ui-steps-item .ui-steps-title {
    29.             color: #555555;
    30.         }
    31.     `],
    32.     encapsulation: ViewEncapsulation.None
    33. })
    34. export class StepsDemo implements OnInit {
    36.     items: MenuItem[];
    38.     activeIndex: number = 1;
    40.     constructor(private messageService: MessageService) {}
    42.     ngOnInit() {
    43.         this.items = [{
    44.                 command: (event: any) => {
    45.                     this.activeIndex = 0;
    46.                     this.messageService.add({severity:'info', summary:'First Step', detail: event.item.label});
    48.             },
    49.             {
    50.                 label: 'Seat',
    51.                 command: (event: any) => {
    52.                     this.activeIndex = 1;
    53.                     this.messageService.add({severity:'info', summary:'Seat Selection', detail: event.item.label});
    54.                 }
    55.             },
    56.             {
    57.                 label: 'Payment',
    58.                 command: (event: any) => {
    59.                     this.activeIndex = 2;
    60.                     this.messageService.add({severity:'info', summary:'Pay with CC', detail: event.item.label});
    61.                 }
    62.             },
    63.             {
    64.                 label: 'Confirmation',
    65.                 command: (event: any) => {
    66.                     this.activeIndex = 3;
    67.                     this.messageService.add({severity:'info', summary:'Last Step', detail: event.item.label});
    68.                 }
    69.             }
    70.         ];
    71.     }
    72. }