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.
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.
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:
Defines whether to switch between views with a swipe gesture.
Specifies whether to loop views.
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.