Your search did not match any results.
Tab Panel



The TabPanel is a UI component consisting of the Tabs and the MultiView components. It automatically synchronizes the selected tab with the currently displayed view and vice versa. In this demo, the appearance of views and tabs is defined by custom templates.

Copy to CodePen
$(function(){ DevExpress.setTemplateEngine("underscore"); var tabPanel = $("#tabpanel-container").dxTabPanel({ height: 260, dataSource: tabPanelItems, selectedIndex: 0, loop: false, animationEnabled: true, swipeEnabled: true, itemTitleTemplate: $("#title"), itemTemplate: $("#customer"), onSelectionChanged: function(e) { $(".selected-index") .text(e.component.option("selectedIndex") + 1); } }).dxTabPanel("instance"); $("#loop-enabled").dxCheckBox({ value: false, text: "Loop enabled", onValueChanged: function(e) { tabPanel.option("loop", e.value); } }); $("#animation-enabled").dxCheckBox({ value: true, text: "Animation enabled", onValueChanged: function(e) { tabPanel.option("animationEnabled", e.value); } }); $("#swipe-enabled").dxCheckBox({ value: true, text: "Swipe enabled", onValueChanged: function(e) { tabPanel.option("swipeEnabled", e.value); } }); $(".item-count").text(tabPanelItems.length); });
<!DOCTYPE html> <html xmlns=""> <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=""></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></script> <script src="js/underscore.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 id="tabpanel-container"> </div> <div class="item-box"> Item <span class="selected-index">1</span> of <span class="item-count"></span> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <div id="loop-enabled"></div> </div> <div class="option"> <div id="animation-enabled"></div> </div> <div class="option"> <div id="swipe-enabled"></div> </div> </div> </div> <script type="text/html" id="title"> <span><%= CompanyName%></span> </script> <script type="text/html" id="customer"> <div class="tabpanel-item"> <div> <p> <b><%= City%></b> (<span><%= State%></span>) </p> <p> <span><%= Zipcode%></span> <span><%= Address%></span> </p> </div> <div> <p> Phone: <b><%= Phone%></b> </p> <p> Fax: <b><%= Fax%></b> </p> <p> Website: <a href="<%= Website%>" target="_blank"> <%= Website%> </a> </p> </div> </div> </script> </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": "" }, { "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": "" }, { "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": "" }, { "ID": 4, "CompanyName": "Tom Club", "Address": "999 Lake Drive", "City": "Issaquah", "State": "Washington", "Zipcode": 98027, "Phone": "(800) 955-2292", "Fax": "(800) 955-2293", "Website": "" }];