import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/tabview/tabview.min.js"></script>
<script src="https://unpkg.com/primevue@^3/tabpanel/tabpanel.min.js"></script>
Tabview element consists of one or more TabPanel elements. Header of the tab is defined using header attribute.
<TabView>
<TabPanel header="Header I">
Content I
</TabPanel>
<TabPanel header="Header II">
Content II
</TabPanel>
<TabPanel header="Header III">
Content III
</TabPanel>
</TabView>
Visibility of the content is specified with the activeIndex property that supports one or two-way binding.
<TabView :activeIndex="activeIndex">
<TabPanel header="Header I">
Content I
</TabPanel>
<TabPanel header="Header II">
Content II
</TabPanel>
<TabPanel header="Header III">
Content III
</TabPanel>
</TabView>
Two-way binding requires v-model.
<TabView v-model:activeIndex="activeIndex">
<TabPanel header="Header I">
Content I
</TabPanel>
<TabPanel header="Header II">
Content II
</TabPanel>
<TabPanel header="Header III"">
Content III
</TabPanel>
</TabView>
A tab can be disabled to prevent the content to be displayed by setting the disabled property on a panel.
<TabView>
<TabPanel header="Header I">
Content I
</TabPanel>
<TabPanel header="Header II">
Content II
</TabPanel>
<TabPanel header="Header III" :disabled="true">
Content III
</TabPanel>
</TabView>
Custom content for the title section of a panel is defined using the header template.
<TabView>
<TabPanel>
<template #header>
<i class="pi pi-calendar"></i>
<span>Header I</span>
</template>
Content I
</TabPanel>
<TabPanel>
<template #header>
<span>Header II</span>
<i class="pi pi-user"></i>
</template>
Content II
</TabPanel>
</TabView>
Tabs can be controlled programmatically using activeIndex property.
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
<Button @click="active = 1" class="p-button-text" label="Activate 2nd" />
<Button @click="active = 2" class="p-button-text" label="Activate 3rd" />
<TabView v-model:activeIndex="active">
<TabPanel header="Header I">
Content I
</TabPanel>
<TabPanel header="Header II">
Content II
</TabPanel>
<TabPanel header="Header III">
Content III
</TabPanel>
</TabView>
export default {
data() {
return {
active: 0
}
}
}
Tabs can be generated dynamically using the standard v-for directive.
<TabView>
<TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
<p>{{tab.content}}</p>
</TabPanel>
</TabView>
export default {
data() {
return {
tabs: [
{title: 'Title 1', content: 'Content 1'},
{title: 'Title 3', content: 'Content 2'},
{title: 'Title 3', content: 'Content 3'}
]
}
}
}
All tabs are rendered when mounted and inactive tabs are hidden with CSS. Enabling lazy option activates the dynamic mode where a tab is only rendered at DOM when it is active. This option is useful to speed up the initial rendering performance if there are many tabs.
<TabView lazy>
<TabPanel header="Header I">
Content I
</TabPanel>
<TabPanel header="Header II">
Content II
</TabPanel>
<TabPanel header="Header III">
Content III
</TabPanel>
</TabView>
Enable scrollable property to display buttons at each side of the tab headers that scrolls the tab list.
<TabView scrollable>
<TabPanel header="Header I">
Content I
</TabPanel>
<TabPanel header="Header II">
Content II
</TabPanel>
<TabPanel header="Header III">
Content III
</TabPanel>
</TabView>
| Name | Type | Default | Description |
|---|---|---|---|
| header | string | null | Orientation of tab headers. |
| headerStyle | string | null | Inline style of the tab header. |
| headerClass | string | null | Style class of the tab header. |
| headerProps | object | null | Uses to pass all properties of the HTMLLiElement to the tab header. |
| headerActionProps | object | null | Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header. |
| contentStyle | string | null | Inline style of the tab content. |
| contentClass | string | null | Style class of the tab content. |
| contentProps | object | null | Uses to pass all properties of the HTMLDivElement to the tab content. |
| disabled | boolean | null | Whether the tab is disabled. |
Any additional properties like style and class are passed to the main container element.
| Name | Type | Default | Description |
|---|---|---|---|
| activeIndex | number | 0 | Index of the active tab. |
| lazy | boolean | false | When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css. |
| scrollable | boolean | false | When enabled displays buttons at each side of the tab headers to scroll the tab list. |
| tabindex | number | 0 | Index of the element in tabbing order. |
| selectOnFocus | boolean | false | When enabled, the focused tab is activated. |
| previousButtonProps | object | null | Uses to pass all properties of the HTMLButtonElement to the previous button. |
| nextButtonProps | object | null | Uses to pass all properties of the HTMLButtonElement to the next button. |
| Name | Parameters | Description |
|---|---|---|
| tab-change |
event.originalEvent: Browser event event.index: Index of the selected tab |
Callback to invoke when an active tab is changed. |
| tab-click |
event.originalEvent: Browser event event.index: Index of the clicked tab |
Callback to invoke when an active tab is clicked. |
Following is the list of structural style classes, for theming classes visit
| 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. |
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 the aria-controls of the header and aria-labelledby reference to the header as the accessible name.
| 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. If focus is on the last header, moves focus to the first header. |
| left arrow | Moves focus to the previous header. If focus is on the first header, moves focus to the last header. |
| home | Moves focus to the last header. |
| end | Moves focus to the first header. |
| pageUp | Moves scroll position to first header. |
| pageDown | Moves scroll position to last header. |
None.