DevExtreme React - 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.
The following code adds a simple TabPanel to your page.
jQuery
$(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' }] }); });
<div id="tabPanelContainer"></div>
Angular
<dx-tab-panel [items]="tabPanelItems"> </dx-tab-panel>
import { DxTabPanelModule } from 'devextreme-angular'; // ... export class AppComponent { tabPanelItems = [{ title: 'Info', text: 'This is Info Tab' }, { title: 'Contacts', text: 'This is Contacts Tab' }, { title: 'Address', text: 'This is Address Tab' }]; } @NgModule({ imports: [ // ... DxTabPanelModule ], // ... })
Vue
<template> <DxTabPanel :items="tabPanelItems" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxTabPanel from 'devextreme-vue/tab-panel'; export default { components: { DxTabPanel }, data() { return { tabPanelItems: [{ title: 'Info', text: 'This is Info Tab' }, { title: 'Contacts', text: 'This is Contacts Tab' }, { title: 'Address', text: 'This is Address Tab' }] }; } }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import TabPanel from 'devextreme-react/tab-panel'; const tabPanelItems = [{ title: 'Info', text: 'This is Info Tab' }, { title: 'Contacts', text: 'This is Contacts Tab' }, { title: 'Address', text: 'This is Address Tab' }]; class App extends React.Component { render() { return ( <TabPanel items={tabPanelItems} /> ); } } export default App;
Note that field names in these data source items are conventional. 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, data source objects have fields with different names. 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
If you have technical questions, please create a support ticket in the DevExpress Support Center.