Vue MultiView - Switch Between Views
By default, an end user can switch between views by swiping. Assign false to the swipeEnabled property to disable this feature.
jQuery
JavaScript
HTML
$(function() { $('#multiViewContainer').dxMultiView({ // ... swipeEnabled: false }); });
<div id="multiViewContainer"></div>
Angular
HTML
TypeScript
<dx-multi-view [swipeEnabled]="false"> </dx-multi-view>
import { DxMultiViewModule } from 'devextreme-angular'; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxMultiViewModule ], // ... })
Vue
App.vue
<template> <DxMultiView :swipe-enabled="false" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxMultiView from 'devextreme-vue/multi-view'; export default { components: { DxMultiView } }; </script>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { MultiView } from 'devextreme-react/multi-view'; class App extends React.Component { render() { return ( <MultiView swipeEnabled={false} /> ); } } export default App;
You can switch the views from code by changing the selectedIndex or selectedItem property.
jQuery
JavaScript
HTML
$(function() { $("#multiViewContainer").dxMultiView("option", "selectedIndex", 1); });
<div id="multiViewContainer"></div>
Angular
HTML
TypeScript
<dx-multi-view [dataSource]="multiViewItems" [(selectedIndex)]="selectedIndex"> </dx-multi-view>
import { DxMultiViewModule } from 'devextreme-angular'; // ... export class AppComponent { selectedIndex: number; constructor() { this.selectedIndex = 1; } changeSelectedIndex(itemIndex) { this.selectedIndex = itemIndex; } multiViewItems = [ { text: 'Personal Data' }, { text: 'Contacts' } ]; } @NgModule({ imports: [ // ... DxMultiViewModule ], // ... })
Vue
App.vue
<template> <DxMultiView :data-source="multiViewItems" v-model:selected-index="selectedIndex" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxMultiView from 'devextreme-vue/multi-view'; export default { components: { DxMultiView }, data() { return { selectedIndex: 1, multiViewItems: [ { text: 'Personal Data' }, { text: 'Contacts' } ] }; }, methods: { changeSelectedIndex(itemIndex) { this.selectedIndex = itemIndex; } } }; </script>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { MultiView } from 'devextreme-react/multi-view'; const multiViewItems = [ { text: 'Personal Data' }, { text: 'Contacts' } ]; class App extends React.Component { constructor(props) { super(props); this.state = { selectedIndex: 1 } } handleOptionChange = (e) => { if(e.fullName === 'selectedIndex') { this.changeSelectedIndex(e.value); } } changeSelectedIndex = (itemIndex) => { this.setState({ selectedIndex: itemIndex }); } render() { return ( <MultiView dataSource={multiViewItems} selectedIndex={this.state.selectedIndex} onOptionChanged={this.handleOptionChange} /> ); } } export default App;
By default, the MultiView UI component animates switching between views. You can disable animation by setting the animationEnabled property to false.
jQuery
JavaScript
HTML
$(function() { $('#multiViewContainer').dxMultiView({ // ... animationEnabled: false }); });
<div id="multiViewContainer"></div>
Angular
HTML
TypeScript
<dx-multi-view [animationEnabled]="false"> </dx-multi-view>
import { DxMultiViewModule } from 'devextreme-angular'; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxMultiViewModule ], // ... })
Vue
App.vue
<template> <DxMultiView :animation-enabled="false" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxMultiView from 'devextreme-vue/multi-view'; export default { components: { DxMultiView } }; </script>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { MultiView } from 'devextreme-react/multi-view'; class App extends React.Component { render() { return ( <MultiView animationEnabled={false} /> ); } } export default App;
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.