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.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',
- 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. In Angular and Vue, you can declare them in the markup. In React, you can use rendering functions (shown in the code below) or components.
- 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',
- 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;
If you use jQuery, use DOM manipulation methods to combine the HTML markup for TabPanel items. To apply this markup, use the itemTemplate and itemTitleTemplate callback functions as shown in the following code:
You can also customize individual items. In Angular, Vue, and React, declare them using the dxItem component. When using jQuery, you can declare the items as scripts and reference them in the template property or assign a customization function straight to this property.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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;
In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the 3rd-Party Template Engines article.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.