TabMenuMenu is a navigation/command component that displays items as tab headers.

TabMenu - 图1

Documentation

Import

  1. import {TabMenuModule} from 'primeng/tabmenu';
  2. import {MenuItem} from 'primeng/api';
  3.  

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.

  1. <p-tabMenu [model]="items"></p-tabMenu>
  2.  
  1. export class TabMenuDemo {
  2. items: MenuItem[];
  3. ngOnInit() {
  4. this.items = [
  5. {label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
  6. {label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
  7. {label: 'Documentation', icon: 'fa fa-fw fa-book'},
  8. {label: 'Support', icon: 'fa fa-fw fa-support'},
  9. {label: 'Social', icon: 'fa fa-fw fa-twitter'}
  10. ];
  11. }
  12. }
  13.  

ActiveItem

By default item that matches the active route is highlighted, alternatively activeItem property can be used choose the initial active item.

  1. <p-tabMenu [model]="items" [activeItem]="items[0]"></p-tabMenu>
  2.  
  1. export class TabMenuDemo {
  2. items: MenuItem[];
  3. activeItem: MenuItem;
  4. ngOnInit() {
  5. this.items = [
  6. {label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
  7. {label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
  8. {label: 'Documentation', icon: 'fa fa-fw fa-book'},
  9. {label: 'Support', icon: 'fa fa-fw fa-support'},
  10. {label: 'Social', icon: 'fa fa-fw fa-twitter'}
  11. ];
  12. this.activeItem = this.items[2];
  13. }
  14. }
  15.  

Templating

Menuitem content supports templating via the "item" template which gets the menuitem instance and the index.

  1. <p-tabMenu [model]="items">
  2. <ng-template pTemplate="item" let-item let-i="index">
  3. //item content
  4. </ng-template>
  5. </p-tabMenu>
  6.  

Properties

NameTypeDefaultDescription
modelarraynullAn array of menuitems.
activeItemMenuItemnullDefines the default active menuitem
stylestringnullInline style of the component.
styleClassstringnullStyle class of the component.

Styling

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

NameElement
ui-tabmenuContainer element.
ui-tabmenu-navList element of headers.
ui-tabmenuitemMenuitem element.
ui-menuitem-linkLink inside a menuitem.
ui-menuitem-textLabel of a menuitem.
ui-menuitem-iconIcon of a menuitem.

Dependencies

None.

Source

View on GitHub

  1. <h3 class="first">Default</h3>
  2. <p-tabMenu [model]="items1" [activeItem]="items1[0]"></p-tabMenu>
  3. <h3>Templating</h3>
  4. <p-tabMenu [model]="items2" [activeItem]="activeItem">
  5. <ng-template pTemplate="item" let-item let-i="index">
  6. <div style="position: relative; text-align: center; min-width: 10em">
  7. <div class="ui-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon" style="font-size: 2em"></div>
  8. <div class="ui-menuitem-text">
  9. {{item.label}}
  10. </div>
  11. <a tabindex="0" class="ui-menuitem-icon" (click)="closeItem($event, i)" style="position: absolute; right: -1em; top: -.5em; padding: 0" *ngIf="i !== 0">
  12. <span class="pi pi-times"></span>
  13. </a>
  14. </div>
  15. </ng-template>
  16. </p-tabMenu>
  17.  
  1. export class TabMenuDemo {
  2. items1: MenuItem[];
  3. items2: MenuItem[];
  4. activeItem: MenuItem;
  5. ngOnInit() {
  6. this.items1 = [
  7. {label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
  8. {label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
  9. {label: 'Documentation', icon: 'fa fa-fw fa-book'},
  10. {label: 'Support', icon: 'fa fa-fw fa-support'},
  11. {label: 'Social', icon: 'fa fa-fw fa-twitter'}
  12. ];
  13. this.items2 = [
  14. {label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
  15. {label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
  16. {label: 'Documentation', icon: 'fa fa-fw fa-book'},
  17. {label: 'Support', icon: 'fa fa-fw fa-support'},
  18. {label: 'Social', icon: 'fa fa-fw fa-twitter'}
  19. ];
  20. this.activeItem = this.items2[0];
  21. }
  22. closeItem(event, index) {
  23. this.items2 = this.items2.filter((item, i) => i !== index);
  24. event.preventDefault();
  25. }
  26. }
  27.