Your search did not match any results.
Tab Panel

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.

Copy to CodePen
Apply
Reset
window.onload = function() { var viewModel = function(){ var that = this; that.selectedIndex = ko.observable(0); that.animationEnabled = ko.observable(true); that.swipeEnabled = ko.observable(true); that.loop = ko.observable(false); that.itemCount = tabPanelItems.length; that.tabPanelOptions = { height: 260, dataSource: tabPanelItems, selectedIndex: that.selectedIndex, loop: that.loop, animationEnabled: that.animationEnabled, swipeEnabled: that.swipeEnabled, itemTitleTemplate: "title", itemTemplate: "customer", }; }; ko.applyBindings(new viewModel(), document.getElementById("tabpanel")); };
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/21.1.4/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="tabpanel"> <div data-bind="dxTabPanel: tabPanelOptions"> <div data-options="dxTemplate : { name: 'title' } "> <span data-bind="text: $data.CompanyName"></span> </div> <div data-options="dxTemplate : { name: 'customer' } "> <div class="tabpanel-item"> <div> <p> <b data-bind="text: $data.City"></b> (<span data-bind="text: $data.State"></span>) </p> <p> <span data-bind="text: $data.Zipcode"></span> <span data-bind="text: $data.Address"></span> </p> </div> <div> <p> Phone: <b data-bind="text: $data.Phone"></b> </p> <p> Fax: <b data-bind="text: $data.Fax"></b> </p> <p> Website: <a data-bind="attr: { href: $data.Website }, text: $data.Website" target="_blank"> </a> </p> </div> </div> </div> </div> <div class="item-box"> Item <span data-bind="text: (selectedIndex() + 1)"></span> of <span data-bind="text: itemCount"></span> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <div data-bind="dxCheckBox: { value: loop, text: 'Loop enabled' }"></div> </div> <div class="option"> <div data-bind="dxCheckBox: { value: animationEnabled, text: 'Animation enabled' }"></div> </div> <div class="option"> <div data-bind="dxCheckBox: { value: swipeEnabled, text: 'Swipe enabled' }"></div> </div> </div> </div> </div> </body> </html>
.tabpanel-item { height: 200px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; 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; }
var tabPanelItems = [{ "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" }];