Табы

TabView - это компонент для группировки содержимого с помощью вкладок.

С чего начать

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

import { TabViewModule } from 'primeng/tabview';

В .ts файле

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prime-tabview',
  templateUrl: './prime-tabview.component.html',
  styleUrls: ['./prime-tabview.component.scss']
})
export class PrimeTabviewComponent implements OnInit {
 
  activeIndex1: number = 0;
 
  activeIndex2: number = 0;
 
  scrollableTabs: any[] = Array.from({ length: 50 }, (_, i) => ({ title: `Tab ${i + 1}`, content: `Tab ${i + 1} Content` }));
 
  constructor() { }
 
  ngOnInit(): void {
  }
}

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

<p-tabView>
  <p-tabPanel header="Header 1">
     Content 1
  </p-tabPanel>
  <p-tabPanel header="Header 2">
      Content 2
  </p-tabPanel>
  <p-tabPanel header="Header 3">
      Content 3
  </p-tabPanel>
</p-tabView>

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

<p-tabView>
  <p-tabPanel header="Header I">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </p-tabPanel>
  <p-tabPanel header="Header II">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
      voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
  </p-tabPanel>
  <p-tabPanel header="Header III">
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
      cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
      Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
  </p-tabPanel>
</p-tabView>

Programmatic

Disabled

<p-tabView>
  <p-tabPanel header="Header I">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </p-tabPanel>
  <p-tabPanel header="Header II">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
      voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
  </p-tabPanel>
  <p-tabPanel header="Header III">
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
      cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
      Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
  </p-tabPanel>
  <p-tabPanel [disabled]="true" header="Header IV">
  </p-tabPanel>
</p-tabView>

Custom Headers

Header I

Header II

Header III

<p-tabView styleClass="tabview-custom">
  <p-tabPanel>
    <ng-template pTemplate="header">
      <i class="pi pi-calendar"></i>
      <span>Header I</span>
    </ng-template>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </p-tabPanel>
  <p-tabPanel header="Header II">
    <ng-template pTemplate="header">
      <i class="pi pi-user"></i>
      <span>Header II</span>
    </ng-template>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
      voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
  </p-tabPanel>
  <p-tabPanel header="Header III">
    <ng-template pTemplate="header">
      <i class="pi pi-search"></i>
      <span>Header III</span>
      <i class="pi pi-cog"></i>
    </ng-template>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
      cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
      Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
  </p-tabPanel>
</p-tabView>

Closable

<p-tabView id="closableTabView">
  <p-tabPanel header="Header I" [selected]="true">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </p-tabPanel>
  <p-tabPanel header="Header II" [closable]="true">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
      voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
  </p-tabPanel>
  <p-tabPanel header="Header III" [closable]="true">
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
      cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
      Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
  </p-tabPanel>
</p-tabView>

Scrollable

tab.content

Tooltips

<p-tabView>
  <p-tabPanel header="Header I" leftIcon="pi pi-calendar" tooltip="1972">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </p-tabPanel>
  <p-tabPanel header="Header II" rightIcon="pi pi-inbox" tooltip="1974">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
      voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
  </p-tabPanel>
  <p-tabPanel header="Header III" leftIcon="pi pi-user" rightIcon="pi pi-star-fill" tooltip="1990">
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
      cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
      Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
  </p-tabPanel>
</p-tabView>

Heads Fluid

<p-tabView styleClass="p-tabview-heads-fluid">
  <p-tabPanel header="Header I">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </p-tabPanel>
  <p-tabPanel header="Header II">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
      architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
      voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
  </p-tabPanel>
  <p-tabPanel header="Header III">
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
      cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
      Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
  </p-tabPanel>
</p-tabView>

Transparent

<div style="background-color: var(--q-extra-transparent-50); padding: 1rem">
  <p-tabView styleClass="p-tabview-transparent">
    <p-tabPanel header="Header I">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </p-tabPanel>
    <p-tabPanel header="Header II">
      <p>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur,
        adipisci velit, sed quia non numquam eius modi.
      </p>
    </p-tabPanel>
    <p-tabPanel header="Header III">
      <p>
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos
        dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
        cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
      </p>
    </p-tabPanel>
  </p-tabView>
</div>

Свойства TabView

Name	Type	Default	Description
activeIndex	number	null	Index of the active tab to change selected tab programmatically.
controlClose	boolean	false	Whether tab close is controlled at onClose event or not.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
scrollable	boolean	false	When enabled displays buttons at each side of the tab headers to scroll the tab list.

Свойства TabPanel

Name	Type	Default	Description
header	string	null	Title of the tabPanel.
selected	boolean	false	Defines if tab is active.
disabled	boolean	false	When true, tab cannot be activated.
closable	boolean	false	Defines if tab can be removed.
headerStyle	string	null	Inline style of the tab header.
headerStyleClass	string	null	Style class of the tab header.
cache	boolean	true	Whether a lazy loaded panel should avoid getting loaded again on reselection.
tooltip	any	null	Advisory information to display in a tooltip on hover.
tooltipStyleClass	string	null	Style class of the tooltip.
tooltipPosition	string	top	Position of the tooltip, valid values are right, left, top and bottom.
tooltipPositionStyle	string	absolute	Type of CSS position.

События

Name	Parameters	Description
onChange	event.originalEvent: Click event<br>event.index: Index of the selected tab	Callback to invoke on tab change.
onClose	event.originalEvent: Click event<br>event.index: Index of the closed tab<br>event.close: Callback to actually close the tab, only available if controlClose is enabled.	Callback to invoke on tab close.

Шаблоны

Name	Parameters
header	-
content	-

Стилизация

Name	Element
p-tabview	Container element
p-tabview-nav	Container of headers.
p-tabview-selected	Selected tab header.
p-tabview-panels	Container panels.
p-tabview-panel	Content of a tab.

Tabmenu Tag