DEV Community

loading...
Cover image for Vue3 TabView

Vue3 TabView

PrimeTek
PrimeTek is a world renowned vendor of popular UI Component suites including PrimeFaces, PrimeNG, PrimeReact and PrimeVue. For any inquires please use contact@primetek.com.tr to contact us.
・2 min read

Vue3 TabView is a container component to group content with tabs.
It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Active

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

 Header Template

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>
Enter fullscreen mode Exit fullscreen mode

Programmatic Control

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>
Enter fullscreen mode Exit fullscreen mode
export default {
    data() {
        return {
            active: 0
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Dynamic Tabs

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>
Enter fullscreen mode Exit fullscreen mode
export default {
    data() {
        return {
            tabs: [
                {title: 'Title 1', content: 'Content 1'},
                {title: 'Title 3', content: 'Content 2'},
                {title: 'Title 3', content: 'Content 3'}
            ]
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Theming

TabView supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue TabView showcase for demos and documentation.

Discussion (0)