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

Steps - 图1

Documentation

Import

  2. import {StepsModule} from 'primeng/steps';
  3. import {MenuItem} from 'primeng/api';
  4.  

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.

  2. <p-steps [model]="items"></p-steps>
  3.  
  2. export class MenuDemo {
  4.     items: MenuItem[];
  6.     ngOnInit() {
  7.         this.items = [
  8.             {label: 'Step 1'},
  9.             {label: 'Step 2'},
  10.             {label: 'Step 3'}
  11.         ];
  12.     }
  13. }
  14.  

Readonly

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

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

Properties

NameTypeDefaultDescription
modelarraynullAn array of menuitems.
activeIndexnumber0Index of the active item.
readonlybooleantrueWhether the items are clickable or not.
stylestringnullInline style of the component.
styleClassstringnullStyle class of the component.

Events

NameParametersDescription
activeIndexChangeindex: Index of the active step itemCallback to invoke when the new step is selected.

Styling

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

NameElement
ui-stepsContainer element.
ui-steps-itemMenuitem element.
ui-steps-currentActive item.
ui-steps-incompleteInactive item.
ui-steps-completeCompleted item.
ui-steps-numberNumber of menuitem.
ui-steps-titleLabel of menuitem.

Dependencies

None.

Source

View on GitHub

  2. <p-toast [style]="{marginTop: '80px'}"></p-toast>
  4. <h3 class="first">Basic</h3>
  5. <p-steps [model]="items"></p-steps>
  7. <h3>Clickable</h3>
  8. <p-steps [model]="items" [(activeIndex)]="activeIndex" [readonly]="false"></p-steps>
  10. <h3>Custom Style</h3>
  11. <p-steps [model]="items" styleClass="steps-custom"></p-steps>
  12.  
  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.             height: 10px;
  16.             padding: 0 1em;
  17.         }
  19.         .ui-steps.steps-custom .ui-steps-item .ui-steps-number {
  20.             background-color: #0081c2;
  21.             color: #FFFFFF;
  22.             display: inline-block;
  23.             width: 36px;
  24.             border-radius: 50%;
  25.             margin-top: -14px;
  26.             margin-bottom: 10px;
  27.         }
  29.         .ui-steps.steps-custom .ui-steps-item .ui-steps-title {
  30.             color: #555555;
  31.         }
  32.     `],
  33.     encapsulation: ViewEncapsulation.None
  34. })
  35. export class StepsDemo implements OnInit {
  37.     items: MenuItem[];
  39.     activeIndex: number = 1;
  41.     constructor(private messageService: MessageService) {}
  43.     ngOnInit() {
  44.         this.items = [{
  45.                 label: 'Personal',
  46.                 command: (event: any) => {
  47.                     this.activeIndex = 0;
  48.                     this.messageService.add({severity:'info', summary:'First Step', detail: event.item.label});
  49.                 }
  50.             },
  51.             {
  52.                 label: 'Seat',
  53.                 command: (event: any) => {
  54.                     this.activeIndex = 1;
  55.                     this.messageService.add({severity:'info', summary:'Seat Selection', detail: event.item.label});
  56.                 }
  57.             },
  58.             {
  59.                 label: 'Payment',
  60.                 command: (event: any) => {
  61.                     this.activeIndex = 2;
  62.                     this.messageService.add({severity:'info', summary:'Pay with CC', detail: event.item.label});
  63.                 }
  64.             },
  65.             {
  66.                 label: 'Confirmation',
  67.                 command: (event: any) => {
  68.                     this.activeIndex = 3;
  69.                     this.messageService.add({severity:'info', summary:'Last Step', detail: event.item.label});
  70.                 }
  71.             }
  72.         ];
  73.     }
  74. }
  75.