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 similar to the Default Item Template. The following code adds the MultiView to your page.

jQuery
HTML
JavaScript
<div id="multiViewContainer">
var multiViewItems = [
    { text: "Personal Data" },
    { text: "Contacts" },
    { text: "Address" }
];

$(function() {
    $("#multiViewContainer").dxMultiView({
        dataSource: multiViewItems
    });
});
Angular
HTML
TypeScript
<dx-multi-view>
    <dxi-item text="Personal Data"></dxi-item>
    <dxi-item text="Contacts"></dxi-item>
    <dxi-item text="Address"></dxi-item>
</dx-multi-view>
import { DxMultiViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxMultiViewModule
    ],
    // ...
})

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

See Also