Angular LoadPanel - Resize and Relocate

Specify the height and width properties to change the LoadPanel's size:

  • <template>
  • <div>
  • <DxLoadPanel
  • :hide-on-outside-click="true"
  • v-model:visible="isLoadPanelVisible"
  • :height="300"
  • :width="500"
  • />
  • <DxButton
  • text="Show the Load Panel"
  • @click="handleClick"
  • />
  • </div>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxLoadPanel } from 'devextreme-vue/load-panel';
  • import { DxButton } from 'devextreme-vue/button';
  •  
  • export default {
  • components: {
  • DxLoadPanel,
  • DxButton
  • },
  • data() {
  • return {
  • isLoadPanelVisible: false
  • }
  • },
  • methods: {
  • handleClick() {
  • this.isLoadPanelVisible = true;
  • }
  • }
  • }
  • </script>

The container property specifies the LoadPanel's container. The container is shaded when the LoadPanel is visible; the LoadPanel inherits styles from the container and is scrolled with. To position the UI component relative to a specific element, use the position property:

  • <template>
  • <div>
  • <DxLoadPanel
  • :hide-on-outside-click="true"
  • v-model:visible="isLoadPanelVisible"
  • container="#container">
  • <DxPosition
  • my="left"
  • at="left"
  • of="#targetElement"/>
  • </DxLoadPanel>
  • <DxButton
  • text="Show the Load Panel"
  • @click="handleClick"
  • />
  • </div>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxLoadPanel, DxPosition } from 'devextreme-vue/load-panel';
  • import { DxButton } from 'devextreme-vue/button';
  •  
  • export default {
  • components: {
  • DxLoadPanel,
  • DxButton
  • },
  • data() {
  • return {
  • isLoadPanelVisible: false
  • }
  • },
  • methods: {
  • handleClick() {
  • this.isLoadPanelVisible = true;
  • }
  • }
  • }
  • </script>

This configuration of the position property reads as follows: "place my left side at the left of the "#targetElement".

See Also