Vue MultiView - Loop the Views
The MultiView UI component can display views in a loop. The loop mode enables an end user to swipe through the last view to the first and vice versa. To enable this mode, assign true to the loop property.
jQuery
JavaScript
HTML
$(function() { $('#multiViewContainer').dxMultiView({ dataSource: [ { text: 'Personal Data' }, { text: 'Contacts' } ], loop: true }); });
<div id="multiViewContainer"></div>
Angular
HTML
TypeScript
<dx-multi-view [dataSource]="multiViewItems" [loop]="true"> </dx-multi-view>
import { DxMultiViewModule } from 'devextreme-angular'; // ... export class AppComponent { multiViewItems = [ { text: 'Personal Data' }, { text: 'Contacts' } ]; } @NgModule({ imports: [ // ... DxMultiViewModule ], // ... })
Vue
App.vue
<template> <DxMultiView :data-source="multiViewItems" :loop="true" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxMultiView from 'devextreme-vue/multi-view'; export default { components: { DxMultiView }, data() { return { multiViewItems: [ { text: 'Personal Data' }, { text: 'Contacts' } ] }; } }; </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 { render() { return ( <MultiView dataSource={multiViewItems} loop={true} /> ); } } 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.