TabView

TabView is a container component to group content with tabs.

Import #


import { TabViewModule } from 'primeng/tabview';

Basic #

TabView consists of one or more TabPanel elements.

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-tabView>
    <p-tabPanel header="Header I">
        <p>
            Lorem ipsum dolor sit amet...
        </p>
    </p-tabPanel>
    <p-tabPanel header="Header II">
        <p>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
        </p>
    </p-tabPanel>
    <p-tabPanel header="Header III">
        <p>
            At vero eos et accusamus et iusto odio dignissimos...
        </p>
    </p-tabPanel>
</p-tabView>

Dynamic #

Tabs can be generated dynamically using the standard ngFor directive.

Tab 1 Content


<p-tabView>
    <p-tabPanel *ngFor="let tab of tabs" [header]="tab.title">
        <p>
            {{ tab.content }}
        </p>
    </p-tabPanel>
</p-tabView>

Controlled #

TabView can be controlled programmatically using a binding to activeIndex update the active index.


<div class="flex mb-2 gap-2 justify-content-end">
    <p-button 
        (onClick)="activeIndex = 0" 
        rounded="true" 
        styleClass="w-2rem h-2rem p-0" 
        [outlined]="activeIndex !== 0" 
        label="1" />
    <p-button 
        (onClick)="activeIndex = 1" 
        rounded="true" 
        styleClass="w-2rem h-2rem p-0" 
        [outlined]="activeIndex !== 1" 
        label="2" />
    <p-button 
        (onClick)="activeIndex = 2" 
        rounded="true"
        styleClass="w-2rem h-2rem p-0" 
        [outlined]="activeIndex !== 2" 
        label="3" />
</div>
    <p-tabView [(activeIndex)]="activeIndex">
        <p-tabPanel header="Header I">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit...
            </p>
        </p-tabPanel>
        <p-tabPanel header="Header II">
            <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
            </p>
        </p-tabPanel>
        <p-tabPanel header="Header III">
            <p>
                At vero eos et accusamus et iusto odio dignissimos...
            </p>
        </p-tabPanel>
</p-tabView>

Disabled #

Setting disabled property to true of a TabPanel prevents user interaction.


<p-tabView>
    <p-tabPanel header="Header I">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </p>
    </p-tabPanel>
    <p-tabPanel header="Header II">
        <p>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
        </p>
    </p-tabPanel>
    <p-tabPanel header="Header III">
        <p>
            At vero eos et accusamus et iusto odio dignissimos...
        </p>
    </p-tabPanel>
    <p-tabPanel [disabled]="true" header="Header IV" />
</p-tabView>

Template #

Header of a tab supports templating to place custom html content instead of strings as well.


<p-tabView styleClass="tabview-custom">
    <p-tabPanel>
        <ng-template pTemplate="header">
            <div class="flex align-items-center gap-2">
                <p-avatar 
                    image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" 
                    shape="circle" />
                <span class="font-bold white-space-nowrap m-0">
                    Amy Elsner
                </span>
            </div>
        </ng-template>
        <p>
            Lorem ipsum dolor sit amet...
        </p>
    </p-tabPanel>
    <p-tabPanel header="Header II">
        <ng-template pTemplate="header">
            <div class="flex align-items-center gap-2">
                <p-avatar 
                    image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" 
                    shape="circle" />
                <span class="font-bold white-space-nowrap m-0">
                    Onyama Limba
                </span>
            </div>
        </ng-template>
        <p>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
        </p>
    </p-tabPanel>
    <p-tabPanel header="Header III">
        <ng-template pTemplate="header">
            <div class="flex align-items-center gap-2">
                <p-avatar 
                    image="https://primefaces.org/cdn/primeng/images/demo/avatar/ionibowcher.png" 
                    shape="circle" />
                <span class="font-bold white-space-nowrap m-0">
                    Ioni Bowcher
                </span>
                <p-badge value="2" />
            </div>
        </ng-template>
        <p>
            At vero eos et accusamus et iusto odio dignissimos...
        </p>
    </p-tabPanel>
</p-tabView>

Closable #

When closable is enabled, a close icon is displayed to hide the tab.


<p-tabView id="closableTabView">
    <p-tabPanel header="Header I" [selected]="true">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </p>
    </p-tabPanel>
    <p-tabPanel header="Header II" [closable]="true">
        <p>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
        </p>
    </p-tabPanel>
    <p-tabPanel header="Header III" [closable]="true">
        <p>
            At vero eos et accusamus et iusto odio dignissimos...
        </p>
    </p-tabPanel>
</p-tabView>

Scrollable #

Adding scrollable property displays navigational buttons at each side to scroll between tabs.

Tab 1 Content


<p-tabView [(activeIndex)]="activeIndex" [scrollable]="true">
    <p-tabPanel *ngFor="let tab of scrollableTabs" [header]="tab.title">
        <p>{{ tab.content }}</p>
    </p-tabPanel>
</p-tabView>

Lazy #

Lazy loading helps initial load performance by only initializing the active tab, inactive tabs are not initialized until they get selected. A lazy loaded tabpanel contents are cached by default so that upon reselection, they are not created again. You may use cache property on TabPanel to configure this behavior. A TabPanel is specified as lazy when there is a ngTemplate with pTemplate="content" in it.

Content 1


<p-tabView>
    <p-tabPanel header="Header 1"> Content 1 </p-tabPanel>
    <p-tabPanel header="Header 2">
        <ng-template pTemplate="content"> Complex Content to Lazy Load </ng-template>
    </p-tabPanel>
    <p-tabPanel header="Header 3">
        <ng-template pTemplate="content"> Complex Content to Lazy Load </ng-template>
    </p-tabPanel>
</p-tabView>

Style #

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

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.

Accessibility #

Screen Reader

TabView container is defined with the tablist role, as any attribute is passed to the container element aria-labelledby can be optionally used to specify an element to describe the TabView. Each tab header has a tab role along with aria-selected state attribute and aria-controls to refer to the corresponding tab content element. The content element of each tab has tabpanel role, an id to match thearia-controls of the header and aria-labelledby reference to the header as the accessible name.

Tab Header Keyboard Support

Key	Function
tab	Moves focus through the header.
enter	Activates the focused tab header.
space	Activates the focused tab header.
right arrow	Moves focus to the next header.
left arrow	Moves focus to the previous header.
home	Moves focus to the last header.
end	Moves focus to the first header.

TabView API

API defines helper props, events and others for the PrimeNG TabView module.

TabView #

TabView is a container component to group content with tabs.

Properties #

Defines the input properties of the component.

name	type	default	description
style	Object	null	Inline style of the component.
styleClass	string	null	Style class of the component.
controlClose	boolean	false	Whether tab close is controlled at onClose event or not.
scrollable	boolean	false	When enabled displays buttons at each side of the tab headers to scroll the tab list.
activeIndex	number	null	Index of the active tab to change selected tab programmatically.
selectOnFocus	boolean	false	When enabled, the focused tab is activated.
nextButtonAriaLabel	string	null	Used to define a string aria label attribute the forward navigation button.
prevButtonAriaLabel	string	null	Used to define a string aria label attribute the backward navigation button.
autoHideButtons	boolean	true	When activated, navigation buttons will automatically hide or show based on the available space within the container.
tabindex	number	0	Index of the element in tabbing order.

Emitters #

Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.

name	parameters	description
onChange	event : TabViewChangeEvent	Callback to invoke on tab change.
onClose	event : TabViewCloseEvent	Callback to invoke on tab close.
activeIndexChange	value : number	Callback to invoke on the active tab change.

Templates #

Defines the templates used by the component.

name	parameters	description
previousicon		Previous button icon template for the scrollable component.
nexticon		Next button icon template for the scrollable component.

Events #

Defines the custom events used by the component's emitters.

TabViewChangeEvent #

Custom tab change event.

name	type	description
originalEvent	Event	Browser event
index	number	Index of the selected tab

TabViewCloseEvent #

Custom tab close event.

name	type	description
originalEvent	Event	Browser event
index	number	Index of the closed tab
close	-