import {StepsModule,MenuItem} from 'primeng/primeng';
Steps uses the common menumodel api to define its items, visit MenuModel API for details.
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'}
];
}
}
Items are readonly by default, if you'd like to make them interactive then disable readonly.
<p-steps [model]="items" [readonly]="false"></p-steps>
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. |
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. |
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});
}
}
];
}
}