Меню Вкладок

Меню вкладок - это компонент навигации, который отображает элементы в виде заголовков вкладок.

С чего начать

Подключите модуль

import { TabMenuModule } from 'primeng/tabmenu';

В .ts файле

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
 
@Component({
  selector: 'app-prime-tabmenu',
  templateUrl: './prime-tabmenu.component.html',
  styleUrls: ['./prime-tabmenu.component.scss']
})
export class PrimeTabmenuComponent implements OnInit {
 
  items: MenuItem[] = [];
  activeItem = this.items[0];
 
  constructor() { }
 
  ngOnInit(): void {
    this.items = [
      { label: 'Home', icon: 'pi pi-fw pi-home' },
      { label: 'Calendar', icon: 'pi pi-fw pi-calendar' },
      { label: 'Edit', icon: 'pi pi-fw pi-pencil' },
      { label: 'Documentation', icon: 'pi pi-fw pi-file' },
      { label: 'Settings', icon: 'pi pi-fw pi-cog' }
    ];
  }
}

Встройте компонент с помощью тэга p-tabMenu.

<p-tabMenu [model]="items" [activeItem]="activeItem"></p-tabMenu>

TabMenu

<p-tabMenu [model]="items" [activeItem]="activeItem"></p-tabMenu>

Свойства

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.

Шаблоны TabPanel

Name	Parameters
item	$implicit: Data of the menu item<br>index: Index of the option

Стилизация

Name	Element
p-tabmenu	Container element.
p-tabmenu-nav	List element of headers.
p-tabmenuitem	Menuitem element.
p-menuitem-link	Link inside a menuitem.
p-menuitem-text	Label of a menuitem.
p-menuitem-icon	Icon of a menuitem.

Crud Tabview