+ Import
+
+import {TabView, TabPanel} from 'primevue/tabview';
+
+
+ Getting Started
+ 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>
+
+
+ Programmatic Control
+ Tabs can be controlled programmatically using active property that defines the active tab.
+
+<div>
+ <Button icon="pi pi-chevron-left" @click="prev"/>
+ <Button icon="pi pi-chevron-right" @click="next"/>
+</div>
+
+<TabView>
+ <TabPanel header="Header I" :active="activeIndex === 0">
+ Content I
+ </TabPanel>
+ <TabPanel header="Header II" :active="activeIndex === 1">
+ Content II
+ </TabPanel>
+ <TabPanel header="Header III" :active="activeIndex === 2">
+ Content III
+ </TabPanel>
+</TabView>
+
+
+
+export default {
+ data() {
+ return {
+ activeIndex: 0
+ }
+ },
+ methods: {
+ next() {
+ this.activeIndex = this.activeIndex === 2 ? 0 : this.activeIndex + 1;
+ },
+ prev() {
+ this.activeIndex = this.activeIndex === 0 ? 2 : this.activeIndex - 1;
+ }
+ }
+}
+
+
+ Disabled
+ 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>
+
+
+ Header Template
+ Header of a tab supports templating to place custom html content instead of strings as well.
+
+<TabView class="tabview-custom">
+ <TabPanel>
+ <template slot="header">
+ <i class="pi pi-calendar"></i>
+ <span>Header I</span>
+ </template>
+ Content I
+ </TabPanel>
+ <TabPanel>
+ <template slot="header">
+ <span>Header II</span>
+ <i class="pi pi-user"></i>
+ </template>
+ Content II
+ </TabPanel>
+</TabView>
+
+
+ Properties For TabPanel
+
+
+
+
+ Name |
+ Type |
+ Default |
+ Description |
+
+
+
+
+ header |
+ string |
+ null |
+ Orientation of tab headers. |
+
+
+ active |
+ boolean |
+ null |
+ Visibility of the content. |
+
+
+ disabled |
+ boolean |
+ null |
+ Whether the tab is disabled. |
+
+
+
+
+
+ Events
+
+
+
+
+ Name |
+ Parameters |
+ Description |
+
+
+
+
+ tabchange |
+ event.originalEvent: Browser event
+ event.tab: Selected tab
+ |
+ Callback to invoke when an active tab is changed. |
+
+
+
+
+
+ Styling
+ 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. |
+
+
+
+
+
+ Dependencies
+ None.
+
+
+