React TabPanel - Customize Item Appearance
An item in the TabPanel UI component includes a tab and a view. For a minor customization of TabPanel items, you can define specific fields in item data objects. For example, the following code generates three items: the first has a badge, the second is disabled, the third has an icon.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import TabPanel from 'devextreme-react/tab-panel';
- const tabPanelItems = [{
- title: 'Info',
- text: 'This is Info Tab',
- badge: 'New'
- }, {
- title: 'Contacts',
- text: 'This is Contacts Tab',
- disabled: true
- }, {
- title: 'Address',
- text: 'This is Address Tab',
- icon: 'home'
- }];
- class App extends React.Component {
- render() {
- return (
- <TabPanel
- items={tabPanelItems}
- />
- );
- }
- }
- export default App;
If you need a more flexible solution, define itemTemplate and itemTitleTemplate for views and tabs, respectively.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { TabPanel } from 'devextreme-react/tab-panel';
- const tabPanelItems = [{
- title: 'Info',
- data: { firstName: 'John', lastName: 'Smith', birthYear: 1986 }
- }, {
- title: 'Contacts',
- data: { phone: '(555)555-5555', email: 'John.Smith@example.com' }
- }];
- class App extends React.Component {
- render() {
- return (
- <TabPanel
- items={tabPanelItems}
- itemTitleRender={this.renderTitle}
- itemRender={this.renderItem}
- />
- );
- }
- renderTitle(data) {
- return (
- <div>
- <p>{data.title};</p>
- </div>
- );
- }
- renderItem(content) {
- return (
- <div style={{ margin: 25 }}>
- <h1>{content.title}</h1>
- <div style={{ textAlign: 'left' }}>
- {
- Object.keys(content.data).map(key => {
- return (
- <p key={key}>
- {key}: <b>{content.data[key]}</b>
- </p>
- )}
- )
- }
- </div>
- </div>
- );
- }
- }
- export default App;
You can also customize individual items. Declare them using the dxItem component.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { TabPanel, Item } from 'devextreme-react/tab-panel';
- class App extends React.Component {
- render() {
- return (
- <TabPanel>
- <Item title="Info">
- <p>This is Info Tab</p>
- </Item>
- <Item title="Contacts">
- <p>This is Contacts Tab</p>
- </Item>
- </TabPanel>
- );
- }
- }
- export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.