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.
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>
You can switch the views from code by changing the selectedIndex or selectedItem property.
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>
By default, the MultiView UI component animates switching between views. You can disable animation by setting the animationEnabled property to false.
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>
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.