Your search did not match any results.
Load Panel

Load Panel

Documentation

The LoadPanel is an overlay widget notifying the viewer that loading is in progress.

Copy to CodeSandBox
Apply
Reset
<template> <div> <h1>John Heart</h1> <dx-button :on-click="showLoadPanel" text="Load Data" /> <div id="employee"> <p> Birth date: <b>{{ employeeInfo.Birth_Date }}</b> </p> <p class="address"> Address:<br> <b>{{ employeeInfo.City }}</b><br> <span>{{ employeeInfo.Zipcode }}</span> <span>{{ employeeInfo.Address }}</span> </p> <p> Phone: <b>{{ employeeInfo.Mobile_Phone }}</b><br> Email: <b>{{ employeeInfo.Email }}</b> </p> </div> <dx-load-panel :position="position" :visible.sync="loadingVisible" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :close-on-outside-click="closeOnOutsideClick" :on-shown="onShown" :on-hidden="onHidden" shading-color="rgba(0,0,0,0.4)" /> <div class="options"> <div class="caption">Options</div> <div class="option"> <dx-check-box :value.sync="showIndicator" text="With indicator" /> </div> <div class="option"> <dx-check-box :value.sync="shading" text="With overlay" /> </div> <div class="option"> <dx-check-box :value.sync="showPane" text="With pane" /> </div> <div class="option"> <dx-check-box :value.sync="closeOnOutsideClick" text="Close on outside click" /> </div> </div> </div> </template> <script> import { DxButton } from 'devextreme-vue/button'; import { DxCheckBox } from 'devextreme-vue/check-box'; import { DxLoadPanel } from 'devextreme-vue/load-panel'; import { employee } from './data.js'; export default { components: { DxButton, DxCheckBox, DxLoadPanel }, data() { return { employeeInfo: {}, loadingVisible: false, position: { of: '#employee' }, showIndicator: true, shading: true, showPane: true, closeOnOutsideClick: false }; }, methods: { showLoadPanel() { this.employeeInfo = {}; this.loadingVisible = true; }, onShown() { setTimeout(() => { this.loadingVisible = false; }, 3000); }, onHidden() { this.employeeInfo = employee; } } }; </script> <style> h1 { display: inline-block; vertical-align: middle; padding: 10px; margin: 0; } #employee { margin: 20px 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-top: 1px solid lightgray; border-bottom: 1px solid lightgray; } #employee > p { padding: 10px 20px; margin: 0; } .address { height: 60px; } .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/19.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.6/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 employee = { Full_Name: 'John Heart', Title: 'CEO', Birth_Date: '03/16/1964', Prefix: 'Mr.', Address: '351 S Hill St.', City: 'Los Angeles', Zipcode: 90013, Email: 'jheart@dx-email.com', Skype: 'jheart_DX_skype', Home_Phone: '(213) 555-9208', Mobile_Phone: '(213) 555-9392' };
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', '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 } });