import {TabMenuModule,MenuItem} from 'primeng/primeng';
TabMenu uses the common menumodel api to define its items, visit MenuModel API for details.
TabMenu requires a collection of menuitems as its model.
<p-tabMenu [model]="items"></p-tabMenu>
export class TabMenuDemo {
private items: MenuItem[];
ngOnInit() {
this.items = [
{label: 'Stats', icon: 'fa-bar-chart'},
{label: 'Calendar', icon: 'fa-calendar'},
{label: 'Documentation', icon: 'fa-book'},
{label: 'Support', icon: 'fa-support'},
{label: 'Social', icon: 'fa-twitter'}
];
}
}
By default, first item is activated, use activeItem property to choose the initial active item.
<p-tabMenu [model]="items" [activeItem]="activeItem"></p-tabMenu>
export class TabMenuDemo {
private items: MenuItem[];
private activeItem: MenuItem;
ngOnInit() {
this.items = [
{label: 'Stats', icon: 'fa-bar-chart'},
{label: 'Calendar', icon: 'fa-calendar'},
{label: 'Documentation', icon: 'fa-book'},
{label: 'Support', icon: 'fa-support'},
{label: 'Social', icon: 'fa-twitter'}
];
this.activeItem = this.items[2];
}
}
Name | Type | Default | Description |
---|---|---|---|
model | array | null | An array of menuitems. |
activeItem | MenuElement | null | Defines the default active menuitem |
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-tabmenu | Container element. |
ui-tabmenu-nav | List element of headers. |
ui-tabmenuitem | Menuitem element. |
ui-menuitem-link | Link inside a menuitem. |
ui-menuitem-text | Label of a menuitem. |
ui-menuitem-icon | Icon of a menuitem. |
Native component that requires the css of PrimeUI TabMenu.
<p-tabMenu [model]="items"></p-tabMenu>
export class TabMenuDemo {
private items: MenuItem[];
ngOnInit() {
this.items = [
{label: 'Stats', icon: 'fa-bar-chart'},
{label: 'Calendar', icon: 'fa-calendar'},
{label: 'Documentation', icon: 'fa-book'},
{label: 'Support', icon: 'fa-support'},
{label: 'Social', icon: 'fa-twitter'}
];
}
}