Your search did not match any results.
Multi View

Multi View

Documentation

The MultiView widget contains several views and allows an end user to switch between them. In this demo, all views are defined using a custom template. You can navigate through the views by swiping them in the horizontal direction.

Copy to CodeSandBox
Apply
Reset
<template> <div id="multiview"> <div> Item <span>{{ selectedIndex + 1 }}</span> of <span>{{ companies.length }}</span> </div> <dx-multi-view :height="300" :data-source="companies" :selected-index.sync="selectedIndex" :loop="loop" :animation-enabled="animationEnabled" > <div slot="item" slot-scope="company" > <div class="multiview-item"> <h1>{{ company.CompanyName }}</h1> <div> <p> <b>{{ company.City }}</b> (<span>{{ company.State }}</span>) </p> <p> <span>{{ company.Zipcode }}</span> <span>{{ company.Address }}</span> </p> </div> <div> <p> Phone: <b>{{ company.Phone }}</b> </p> <p> Fax: <b>{{ company.Fax }}</b> </p> <p> Website: <a :href="company.Website" target="_blank" > {{ company.Website }} </a> </p> </div> </div> </div> </dx-multi-view> <div class="options"> <div class="caption">Options</div> <div class="option"> <dx-check-box v-model="loop" text="Loop enabled" /> </div> <div class="option"> <dx-check-box v-model="animationEnabled" text="Animation enabled" /> </div> </div> </div> </template> <script> import DxCheckBox from 'devextreme-vue/check-box'; import DxMultiView from 'devextreme-vue/multi-view'; import { multiViewItems } from './data.js'; export default { components: { DxCheckBox, DxMultiView }, data() { return { selectedIndex: 0, loop: false, animationEnabled: true, companies: multiViewItems }; } }; </script> <style> #multiview { margin-top: 25px; } .multiview-item { margin:25px; user-select: none; border-top: 1px solid lightgray; border-bottom: 1px solid lightgray; padding: 20px 0 30px; } .multiview-item > div { padding-top: 20px; } #multiview > div:first-child { padding-left: 25px; } #multiview p, #multiview h1 { margin: 0; } #multiview h1 { font-size: 34px; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
export const multiViewItems = [{ 'ID': 1, 'CompanyName': 'SuprMart', 'Address': '702 SW 8th Street', 'City': 'Bentonville', 'State': 'Arkansas', 'Zipcode': 72716, 'Phone': '(800) 555-2797', 'Fax': '(800) 555-2171', 'Website': 'http://www.nowebsitesupermart.com' }, { 'ID': 2, 'CompanyName': "El'Depot", 'Address': '2455 Paces Ferry Road NW', 'City': 'Atlanta', 'State': 'Georgia', 'Zipcode': 30339, 'Phone': '(800) 595-3232', 'Fax': '(800) 595-3231', 'Website': 'http://www.nowebsitedepot.com' }, { 'ID': 3, 'CompanyName': 'K&S Music', 'Address': '1000 Nicllet Mall', 'City': 'Minneapolis', 'State': 'Minnesota', 'Zipcode': 55403, 'Phone': '(612) 304-6073', 'Fax': '(612) 304-6074', 'Website': 'http://www.nowebsitemusic.com' }, { 'ID': 4, 'CompanyName': 'Tom Club', 'Address': '999 Lake Drive', 'City': 'Issaquah', 'State': 'Washington', 'Zipcode': 98027, 'Phone': '(800) 955-2292', 'Fax': '(800) 955-2293', 'Website': 'http://www.nowebsitetomsclub.com' }];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.5.16/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@18.2', 'devextreme-vue': 'npm:devextreme-vue@18.2', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });