DevExtreme Vue - Overview

The MultiView is a widget that contains several views. An end user navigates through the views by swiping them in the horizontal direction. The widget is often used along with the Tabs widget.

View Demo

In the most simple case, the MultiView widget requires only the dataSource option to be configured. Note that in such a case, data source items should have a structure described in the dataSource section. The following code adds the MultiView to your page.

jQuery
JavaScript
HTML
var multiViewItems = [
    { text: "Personal Data" },
    { text: "Contacts" },
    { text: "Address" }
];

$(function() {
    $("#multiViewContainer").dxMultiView({
        dataSource: multiViewItems
    });
});
<div id="multiViewContainer">
Angular
HTML
TypeScript
<x-multi-view
    [dataSource]="multiViewItems">
</dx-multi-view>
import { DxMultiViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    multiViewItems = [
        { text: 'Personal Data' },
        { text: 'Contacts' },
        { text: 'Address' }
    ];
}
@NgModule({
    imports: [
        // ...
        DxMultiViewModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxMultiView
        :data-source="multiViewItems"
    />
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
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' },
                { text: 'Address' }
            ]
        };
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { MultiView } from 'devextreme-react/multi-view';

const multiViewItems = [
    { text: 'Personal Data' },
    { text: 'Contacts' },
    { text: 'Address' }
];

class App extends React.Component {
    render() {
        return (
            <MultiView
                dataSource={multiViewItems}
            />
        );
    }
}

export default App;

More often, structure of the data source item differs from the default. For correct rendering of views, specify a custom template.

See Also