Vue TabPanel - Control the Behavior

An end user can switch the views by swiping them or selecting tabs. Note that tab navigation is always enabled, while swiping is active only on touch devices by default. To enable it on all types of devices, assign true to the swipeEnabled property. Otherwise, assign false.

jQuery
JavaScript
HTML
$(function() {
    $('#tabPanelContainer').dxTabPanel({
        // ...
        swipeEnabled: false
    });
});
<div id="tabPanelContainer"></div>
Angular
HTML
TypeScript
<dx-tab-panel
    [swipeEnabled]="false">
</dx-tab-panel>
import { DxTabPanelModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTabPanelModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxTabPanel
        :swipe-enabled="false"
    />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxTabPanel from 'devextreme-vue/tab-panel';

export default {
    components: {
        DxTabPanel
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TabPanel } from 'devextreme-react/tab-panel';

class App extends React.Component {
    render() {
        return (
            <TabPanel
                swipeEnabled={false}
            />
        );
    }
}

export default App;

You can switch the views progrmmatically using the selectedIndex or selectedItem property.

jQuery
JavaScript
HTML
$(function() {
    $('#tabPanelContainer').dxTabPanel({
        // ...
        selectedIndex: 1
    });
});
<div id="tabPanelContainer"></div>
Angular
HTML
TypeScript
<dx-tab-panel
    [(selectedIndex)]="selectedIndex">
</dx-tab-panel>
import { DxTabPanelModule } from 'devextreme-angular';
// ...
export class AppComponent {
    selectedIndex: number;

    constructor() {
        this.selectedIndex = 1;
    }
}
@NgModule({
    imports: [
        // ...
        DxTabPanelModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxTabPanel
        v-model:selected-index="selectedIndex"
    />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxTabPanel from 'devextreme-vue/tab-panel';

export default {
    components: {
        DxTabPanel
    },
    data() {
        return {
            selectedIndex: 1
        }
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TabPanel } from 'devextreme-react/tab-panel';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedIndex: 1
        }
    }

    handleOptionChange = (e) => {
        if(e.fullName === 'selectedIndex') {
            this.setState({
                selectedIndex: e.value
            });
        }
    }

    render() {
        return (
            <TabPanel
                selectedIndex={this.state.selectedIndex}
                onOptionChanged={this.handleOptionChange}
            />
        );
    }
}

export default App;

The TabPanel can loop the views, which enables an end user to swipe through the last view to the first and vice versa. To enable this behavior, set the loop property to true.

jQuery
JavaScript
HTML
$(function() {
    $('#tabPanelContainer').dxTabPanel({
        // ...
        loop: false
    });
});
<div id="tabPanelContainer"></div>
Angular
HTML
TypeScript
<dx-tab-panel
    [loop]="false">
</dx-tab-panel>
import { DxTabPanelModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTabPanelModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxTabPanel
        :loop="false"
    />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxTabPanel from 'devextreme-vue/tab-panel';

export default {
    components: {
        DxTabPanel
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TabPanel } from 'devextreme-react/tab-panel';

class App extends React.Component {
    render() {
        return (
            <TabPanel
                loop={false}
            />
        );
    }
}

export default App;

To specify whether or not to animate switching between views, use the animationEnabled property.

jQuery
JavaScript
HTML
$(function() {
    $('#tabPanelContainer').dxTabPanel({
        // ...
        animationEnabled: true
    });
});
<div id="tabPanelContainer"></div>
Angular
HTML
TypeScript
<dx-tab-panel
    [animationEnabled]="true">
</dx-tab-panel>
import { DxTabPanelModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTabPanelModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxTabPanel
        :animation-enabled="true"
    />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxTabPanel from 'devextreme-vue/tab-panel';

export default {
    components: {
        DxTabPanel
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TabPanel } from 'devextreme-react/tab-panel';

class App extends React.Component {
    render() {
        return (
            <TabPanel
                animationEnabled={true}
            />
        );
    }
}

export default App;
See Also