Overview

The TabPanel UI component consists of Tabs and MultiView components. The TabPanel automatically synchronizes the selected tab with the currently displayed view and vice versa.

Generate Similar Tabs Based on a Data Source

To generate similar tabs and views, bind the TabPanel to data. Use the items[] or dataSource property to do this. Both these properties can work with local arrays, but dataSource also accepts a DataSource object. You can use this object if you need to process the local array or fetch the array from a remote data source. In this demo, the dataSource property is set to a local array.

Each object in the items[] or dataSource array can contain predefined fields, such as title or icon (see the items[] section for the full list). The TabPanel automatically recognizes these fields and creates the default tab and view appearance based on them. However, if your data objects contain custom fields, you need to specify the itemTitleTemplate and itemTemplate that define how to display the fields in tabs and views. This demo illustrates the latter use case.

Create Individual Tabs

If you want each tab and view to have differently structured content, define individual templates. To do this, assign an array of objects to the items[] or dataSource property and specify the tabTemplate and template properties in each object. This use case is illustrated in the following tutorial: Getting Started with TabPanel.

Switch Between Tabs

To switch between tabs programmatically, use the selectedIndex property. It accepts the index of a tab in the dataSource or items[] array. The onSelectionChanged function allows you to perform the desired actions when the selected tab changes.

Use the following properties to configure user navigation between tabs:

swipeEnabled
Defines whether to switch between views with a swipe gesture.
loop
Specifies whether to loop views.
animationEnabled
Specifies whether to animate transition between views.

You can switch the checkboxes below the TabPanel to change the loop, animationEnabled, and swipeEnabled property values.

To get started with the DevExtreme TabPanel component, refer to the following tutorial for step-by-step instructions: Getting Started with TabPanel.

Prev Demo

Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<template> <div> <DxTabPanel :height="260" :data-source="companies" v-model:selected-index="selectedIndex" :loop="loop" :animation-enabled="animationEnabled" :swipe-enabled="swipeEnabled" > <template #title="{ data: company }"> <span>{{ company.CompanyName }}</span> </template> <template #item="{ data: company }"> <div class="tabpanel-item"> <div> <p> <b>{{ company.City }}</b> (<span>{{ company.State }}</span>) </p> <p> <span>{{ company.Zipcode }} </span> <span>{{ company.Address }}</span> </p> </div> <div> <p> Phone: <b>{{ company.Phone }}</b> </p> <p> Fax: <b>{{ company.Fax }}</b> </p> <p> Website: <a :href="company.Website" target="_blank" > {{ company.Website }} </a> </p> </div> </div> </template> </DxTabPanel> <div class="item-box"> Item <span>{{ selectedIndex + 1 }}</span> of <span>{{ companies.length }}</span> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <DxCheckBox v-model:value="loop" text="Loop enabled" /> </div> <div class="option"> <DxCheckBox v-model:value="animationEnabled" text="Animation enabled" /> </div> <div class="option"> <DxCheckBox v-model:value="swipeEnabled" text="Swipe enabled" /> </div> </div> </div> </template> <script> import DxCheckBox from 'devextreme-vue/check-box'; import DxTabPanel from 'devextreme-vue/tab-panel'; import { multiViewItems } from './data.js'; export default { components: { DxCheckBox, DxTabPanel, }, data() { return { selectedIndex: 0, loop: false, animationEnabled: true, swipeEnabled: true, companies: multiViewItems, }; }, }; </script> <style> .tabpanel-item { height: 200px; user-select: none; padding-left: 25px; padding-top: 55px; } .mobile .tabpanel-item { padding-top: 10px; } .tabpanel-item > div { float: left; padding: 0 85px 10px 10px; } .tabpanel-item p { font-size: 16px; margin: 0; } .item-box { font-size: 16px; margin: 15px 0 45px 10px; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; } </style>

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

export const multiViewItems = [{ ID: 1, CompanyName: 'SuprMart', Address: '702 SW 8th Street', City: 'Bentonville', State: 'Arkansas', Zipcode: 72716, Phone: '(800) 555-2797', Fax: '(800) 555-2171', Website: 'http://www.nowebsitesupermart.com', }, { ID: 2, CompanyName: "El'Depot", Address: '2455 Paces Ferry Road NW', City: 'Atlanta', State: 'Georgia', Zipcode: 30339, Phone: '(800) 595-3232', Fax: '(800) 595-3231', Website: 'http://www.nowebsitedepot.com', }, { ID: 3, CompanyName: 'K&S Music', Address: '1000 Nicllet Mall', City: 'Minneapolis', State: 'Minnesota', Zipcode: 55403, Phone: '(612) 304-6073', Fax: '(612) 304-6074', Website: 'http://www.nowebsitemusic.com', }, { ID: 4, CompanyName: 'Tom Club', Address: '999 Lake Drive', City: 'Issaquah', State: 'Washington', Zipcode: 98027, Phone: '(800) 955-2292', Fax: '(800) 955-2293', Website: 'http://www.nowebsitetomsclub.com', }];