DevExtreme jQuery - Overview

The TabPanel is a widget consisting of the Tabs and MultiView widgets. It automatically synchronizes the selected tab with the currently displayed view and vice versa.

View Demo

The following code adds a simple TabPanel to your page.

<div id="tabPanelContainer"></div>

$(function() {
    $("#tabPanelContainer").dxTabPanel({
        items: [{
            title: 'Info',
            text: 'This is Info Tab'
        }, {
            title: 'Contacts',
            text: 'This is Contacts Tab'
        }, {
            title: 'Address',
            text: 'This is Address Tab'
        }]
    });
});

Note that all data source items in the code above follow the Default Item Template pattern. This provides a default appearance for tabs and views; that is, title goes to the tab, and text goes to the view. But more often, the data source object structure does not follow this pattern. For correct rendering in these cases, specify a custom template.

See Also

• Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• TabPanel - Customize Item Appearance
• TabPanel - Control the Behavior
• TabPanel API Reference