Angular Tabs - Getting Started

jQuery
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Angular
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Vue
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
React
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

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
index.js
index.html
$(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.10/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/23.2.10/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
app.component.html
app.module.ts
<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
App.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
App.js
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:

index.js
index.css
$(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:

app.component.html
app.component.css
<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:

App.vue
<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:

App.js
index.css
// ...
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
index.js
$(function() {
    $("#tabs").dxTabs({
        // ...
        selectedIndex: 2,
        selectionMode: 'multiple'
    });
});
Angular
app.component.html
<dx-tabs ...
    [selectedIndex]="2"
    selectionMode="multiple"
>
    <!-- ... -->
</dx-tabs>
Vue
App.vue
<template>
    <dxTabs
        :selected-index="2"
        selection-mode="multiple"
    >
        <!-- ... -->
    </dxTabs>
</template>

<script>
// ...
</script>

<style>
/* ... */
</style>
React
App.js
// ...

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
index.js
$(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
app.component.html
app.component.ts
<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
App.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
App.js
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;