TabMenuMenu is a navigation/command component that displays items as tab headers.
Documentation
Import
import {TabMenuModule} from 'primeng/tabmenu';
import {MenuItem} from 'primeng/api';
MenuModel API
TabMenu uses the common menumodel api to define its items, visit MenuModel API for details.
Getting Started
TabMenu requires a collection of menuitems as its model.
<p-tabMenu [model]="items"></p-tabMenu>
export class TabMenuDemo {
items: MenuItem[];
ngOnInit() {
this.items = [
{label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
{label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
{label: 'Documentation', icon: 'fa fa-fw fa-book'},
{label: 'Support', icon: 'fa fa-fw fa-support'},
{label: 'Social', icon: 'fa fa-fw fa-twitter'}
];
}
}
ActiveItem
By default item that matches the active route is highlighted, alternatively activeItem property can be used choose the initial active item.
<p-tabMenu [model]="items" [activeItem]="items[0]"></p-tabMenu>
export class TabMenuDemo {
items: MenuItem[];
activeItem: MenuItem;
ngOnInit() {
this.items = [
{label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
{label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
{label: 'Documentation', icon: 'fa fa-fw fa-book'},
{label: 'Support', icon: 'fa fa-fw fa-support'},
{label: 'Social', icon: 'fa fa-fw fa-twitter'}
];
this.activeItem = this.items[2];
}
}
Templating
Menuitem content supports templating via the "item" template which gets the menuitem instance and the index.
<p-tabMenu [model]="items">
<ng-template pTemplate="item" let-item let-i="index">
//item content
</ng-template>
</p-tabMenu>
Properties
Name | Type | Default | Description |
---|---|---|---|
model | array | null | An array of menuitems. |
activeItem | MenuItem | null | Defines the default active menuitem |
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-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. |
Dependencies
None.
Source
<h3 class="first">Default</h3>
<p-tabMenu [model]="items1" [activeItem]="items1[0]"></p-tabMenu>
<h3>Templating</h3>
<p-tabMenu [model]="items2" [activeItem]="activeItem">
<ng-template pTemplate="item" let-item let-i="index">
<div style="position: relative; text-align: center; min-width: 10em">
<div class="ui-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon" style="font-size: 2em"></div>
<div class="ui-menuitem-text">
{{item.label}}
</div>
<a tabindex="0" class="ui-menuitem-icon" (click)="closeItem($event, i)" style="position: absolute; right: -1em; top: -.5em; padding: 0" *ngIf="i !== 0">
<span class="pi pi-times"></span>
</a>
</div>
</ng-template>
</p-tabMenu>
export class TabMenuDemo {
items1: MenuItem[];
items2: MenuItem[];
activeItem: MenuItem;
ngOnInit() {
this.items1 = [
{label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
{label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
{label: 'Documentation', icon: 'fa fa-fw fa-book'},
{label: 'Support', icon: 'fa fa-fw fa-support'},
{label: 'Social', icon: 'fa fa-fw fa-twitter'}
];
this.items2 = [
{label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
{label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
{label: 'Documentation', icon: 'fa fa-fw fa-book'},
{label: 'Support', icon: 'fa fa-fw fa-support'},
{label: 'Social', icon: 'fa fa-fw fa-twitter'}
];
this.activeItem = this.items2[0];
}
closeItem(event, index) {
this.items2 = this.items2.filter((item, i) => i !== index);
event.preventDefault();
}
}