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.