JavaScript/jQuery Tabs - Customize Item Appearance
For a minor customization of tabs, you can define specific fields in item data objects. For example, the following code generates three tabs: the first has an icon, the second has a badge, the third is disabled.
jQuery
$(function() { $("#tabsContainer").dxTabs({ items: [ { text: "User", icon: 'user' }, { text: "Comment", badge: "New" }, { text: "Find", disabled: true } ] }); });
Angular
<dx-tabs [items]="tabs"> </dx-tabs>
import { DxTabsModule } from "devextreme-angular"; // ... export class AppComponent { tabs = [ { text: "User", icon: 'user' }, { text: "Comment", badge: "New" }, { text: "Find", disabled: true } ]; } @NgModule({ imports: [ // ... DxTabsModule ], // ... })
Vue
<template> <DxTabs :items="tabs" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTabs from "devextreme-vue/tabs"; export default { components: { DxTabs }, data() { return { tabs: [ { text: "User", icon: 'user' }, { text: "Comment", badge: "New" }, { text: "Find", disabled: true } ] }; } }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Tabs } from 'devextreme-react/tabs'; const tabs = [ { text: "User", icon: 'user' }, { text: "Comment", badge: "New" }, { text: "Find", disabled: true } ]; class App extends React.Component { render() { return ( <Tabs items={tabs} /> ); } } export default App;
If you need a more flexible solution, define an itemTemplate.
jQuery
$(function() { $("#tabsContainer").dxTabs({ items: [ { text: "User" }, { text: "Comment" }, { text: "Find" } ], itemTemplate: function (itemData, itemIndex, itemElement) { itemElement.append("<p style='color:#6600cc;'>" + itemData.text + "</p>"); } }); });
Angular
<dx-tabs [items]="tabs" itemTemplate="tabItem"> <div *dxTemplate="let itemData of 'tabItem'"> <p style="color:#6600cc;">{{itemData.text}}</p> </div> </dx-tabs>
import { DxTabsModule } from "devextreme-angular"; // ... export class AppComponent { tabs = [ { text: "User" }, { text: "Comment" }, { text: "Find" } ]; } @NgModule({ imports: [ // ... DxTabsModule ], // ... })
Vue
<template> <DxTabs :items="tabs" item-template="item"> <template #item="{ data }"> <p style="color: #6600cc;">{{data.text}}</p> </template> </DxTabs> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTabs from "devextreme-vue/tabs"; export default { components: { DxTabs }, data() { return { tabs: [ { text: "User" }, { text: "Comment" }, { text: "Find" } ] }; } }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Tabs } from 'devextreme-react/tabs'; const tabs = [ { text: "User" }, { text: "Comment" }, { text: "Find" } ]; const renderTabItem = (itemData) => { return ( <p style={{color: '#6600cc'}}>{itemData.text}</p> ); } class App extends React.Component { render() { return ( <Tabs items={tabs} itemRender={renderTabItem} /> ); } } export default App;
jQuery
You can also customize individual tabs. Declare them as scripts and reference them in the template property or assign a customization function straight to this property.
<div id="tabsContainer"></div> <script id="individualTabTemplate" type="text/html"> <span>Comment</span> </script>
$(function() { $("#tabsContainer").dxTabs({ items: [{ template: function() { return $("<span>").text("User"); } }, { template: $("#individualTabTemplate") }] }); });
Angular
You can also customize individual tabs. Declare them using the dxItem component.
<dx-tabs> <dxi-item> <span>User</span> </dxi-item> <dxi-item> <span>Comment</span> </dxi-item> </dx-tabs>
import { DxTabsModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxTabsModule ], // ... })
Vue
You can also customize individual tabs. Declare them using the dxItem component.
<template> <DxTabs> <DxItem> <template #default> <span>User</span> </template> </DxItem> <DxItem> <template #default> <span>Comment</span> </template> </DxItem> </DxTabs> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTabs, { DxItem } from "devextreme-vue/tabs"; export default { components: { DxTabs, DxItem } }; </script>
React
You can also customize individual tabs. Declare them using the dxItem component.
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Tabs, Item } from 'devextreme-react/tabs'; class App extends React.Component { render() { return ( <Tabs> <Item> <span>User</span> </Item> <Item> <span>Comment</span> </Item> </Tabs> ); } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.