jQuery Tabs - Getting Started
jQuery
Angular
Vue
React
The Tabs component allows you to create a tabbed UI to navigate between pages or views.
This tutorial shows how to add a Tabs component to your application and configure its core features.
Each section in this tutorial describes a single configuration step. You can also find the full code in the following GitHub repository: getting-started-with-tabs.
Create Predefined Tabs
You can create tab items in the items array, or populate tab items from a dataSource. This tutorial uses the first technique. To see how to use the dataSource, refer to the following demo: Tabs Overview Demo.
You can use predefined item features to customize the items. The code below creates a Tabs component with a fixed width and populates it with three items. The first item has a badge. The second item uses text and is disabled. The third item has an icon.
jQuery
$(function() {
$("#tabs").dxTabs({
width: 300,
items: [
{
badge: 'First'
},
{
text: 'Second',
disabled: true
},
{
icon: 'favorites',
text: 'Third'
}
]
});
});
<html>
<head>
<!-- ... -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css">
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/23.2.5/js/dx.all.js"></script>
<script type="text/javascript" src="index.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="tabs"></div>
</body>
</html>Angular
<dx-tabs
[width]="300"
>
<dxi-item
badge="First"
>
</dxi-item>
<dxi-item
text="Second"
[disabled]="true"
>
</dxi-item>
<dxi-item
text="Third"
icon="favorites"
>
</dxi-item>
</dx-tabs>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxTabsModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxTabsModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }Vue
<template>
<dxTabs
:width="300"
>
<dxItem
badge="First"
>
</dxItem>
<dxItem
text="Second"
:disabled="true"
>
</dxItem>
<dxItem
text="Third"
icon="favorites"
>
</dxItem>
</dxTabs>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxTabs, { DxItem } from 'devextreme-vue/tabs';
export default {
components: {
DxTabs
DxItem
},
data() {
return {
}
},
methods: {
}
}
</script>React
import React from 'react';
import Tabs, { Item } from 'devextreme-react/tabs';
import 'devextreme/dist/css/dx.light.css';
function App() {
return (
<Tabs
width={300}
>
<Item
badge="First"
>
</Item>
<Item
text="Second"
disabled={true}
>
</Item>
<Item
text="Third"
icon="favorites"
>
</Item>
</Tabs>
);
}
export default App;Create Custom Tabs
jQuery
Use an itemTemplate to apply customization to all items. To customize an individual item, specify the template property of the item.
The following code adds a fourth custom tab:
$(function() {
$("#tabs").dxTabs({
items: [
// ...
{
template: '<div id="fourth">Fourth</div>'
},
]
});
});
#fourth {
text-align: center;
font-style: italic;
color: #F05B41;
}Angular
Use an itemTemplate to apply customization to all items. To customize an individual item, specify a custom template.
The following code adds a fourth custom tab:
<dx-tabs>
<!-- ... -->
<dxi-item>
<div *dxTemplate>
<div id="fourth">Fourth</div>
</div>
</dxi-item>
</dx-tabs>
#fourth {
text-align: center;
font-style: italic;
color: #F05B41;
}Vue
Use an itemTemplate to apply customization to all items. To customize an individual item, specify a custom template.
The following code adds a fourth custom tab:
<template>
<DxTabs>
<!-- ... -->
<dxItem>
<div id="fourth">Fourth</div>
</dxItem>
</DxTabs>
</template>
<script>
// ...
</script>
<style>
#fourth {
text-align: center;
font-style: italic;
color: #F05B41;
}
</style>React
Use an itemRender to apply customization to all items. To customize an individual item, specify the render property of the item.
The following code adds a fourth custom tab:
// ...
const renderFourth = () => {
return <div id="fourth">Fourth</div>;
}
function App() {
return (
<Tabs>
<!-- ... -->
<Item
render={renderFourth}
>
</Item>
</Tabs>
);
}
export default App;
#fourth {
text-align: center;
font-style: italic;
color: #F05B41;
}Specify Selection Mode
Users can select Tabs component items in two different modes: 'single' (default) or 'multiple'. You can use the selectionMode property to change the mode. To preselect or to select an item programmatically, pass its index in the data source array to the selectedIndex property. As an alternative, you can use the selectedItem (for 'single' selection mode) or selectedItems (for 'multiple' selection mode) properties.
The following code sets the selectionMode to 'multiple' and preselects the third tab:
jQuery
$(function() {
$("#tabs").dxTabs({
// ...
selectedIndex: 2,
selectionMode: 'multiple'
});
});Angular
<dx-tabs ...
[selectedIndex]="2"
selectionMode="multiple"
>
<!-- ... -->
</dx-tabs>Vue
<template>
<dxTabs
:selected-index="2"
selection-mode="multiple"
>
<!-- ... -->
</dxTabs>
</template>
<script>
// ...
</script>
<style>
/* ... */
</style>React
// ...
function App() {
return (
<Tabs
selectedIndex={2}
selectionMode="multiple"
>
<!-- ... -->
</Tabs>
);
}
export default App;Handle Tab Click
Use the onItemClick function to process clicks on tabs.
jQuery
$(function() {
function showMessage(id) {
DevExpress.ui.notify(
{
message: `Tab ${id} has been clicked!`,
width: 250
},
'info',
500
);
};
$("#tabs").dxTabs({
onItemClick(e) {
showMessage(e.itemIndex + 1);
}
});
});Angular
<dx-tabs
(onItemClick)="onItemClick($event)"
>
<!-- ... -->
</dx-tabs>
import { Component } from '@angular/core';
import notify from 'devextreme/ui/notify';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
onItemClick(e: any) {
showMessage(e.itemIndex + 1);
}
}
function showMessage(id: number) {
notify(
{
message: `Tab ${id} has been clicked!`,
width: 250
},
'info',
500
);
};Vue
<template>
<dxTabs
@item-click="onItemClick"
>
<!-- ... -->
</dxTabs>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxTabs, { DxItem } from 'devextreme-vue/tabs';
import notify from "devextreme/ui/notify";
export default {
components: {
DxTabs
DxItem
},
data() {
return {
}
},
methods: {
showMessage(id) {
notify(
{
message: `Tab ${id} has been clicked!`,
width: 250
},
'info',
500
);
},
onItemClick(e) {
this.showMessage(e.itemIndex + 1);
}
}
}
</script>React
import React from 'react';
import Tabs, { Item } from 'devextreme-react/tabs';
import notify from 'devextreme/ui/notify';
import 'devextreme/dist/css/dx.light.css';
const showMessage = (id) => {
notify(
{
message: `Tab ${id} has been clicked!`,
width: 250
},
'info',
500
);
}
const onItemClick = (e) => {
showMessage(e.itemIndex + 1);
}
function App() {
return (
<Tabs
onItemClick={onItemClick}
>
<!-- ... -->
</Tabs>
);
}
export default App;