React LoadPanel - Resize and Relocate
Specify the height and width properties to change the LoadPanel's size:
jQuery
$(function() { $("#loadPanelContainer").dxLoadPanel({ closeOnOutsideClick: true, height: 300, width: 500 }); $("#buttonContainer").dxButton({ text: "Show the Load Panel", onClick: function () { $("#loadPanelContainer").dxLoadPanel("show"); } }); });
Angular
<dx-load-panel [closeOnOutsideClick]="true" [(visible)]="isLoadPanelVisible" [height]="300" [width]="500"> </dx-load-panel> <dx-button text="Show the Load Panel" (onClick)="isLoadPanelVisible = true"> </dx-button>
import { DxLoadPanelModule, DxButtonModule } from "devextreme-angular"; // ... export class AppComponent { isLoadPanelVisible: boolean = false; } @NgModule({ imports: [ // ... DxLoadPanelModule, DxButtonModule ], // ... })
Vue
<template> <div> <DxLoadPanel :close-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.common.css'; 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>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { LoadPanel } from 'devextreme-react/load-panel'; import { Button } from 'devextreme-react/button'; class App extends React.Component { constructor(props) { super(props); this.state = { isLoadPanelVisible: false }; this.handleClick = this.handleClick.bind(this); this.handleHide = this.handleHide.bind(this); } handleClick() { this.setState({ isLoadPanelVisible: true }); } handleHide() { this.setState({ isLoadPanelVisible: false }); } render() { return ( <div> <LoadPanel closeOnOutsideClick={true} visible={this.state.isLoadPanelVisible} onHidden={this.handleHide} height={300} width={500} /> <Button text="Show the Load Panel" onClick={this.handleClick} /> </div> ); } } export default App;
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:
jQuery
$(function() { $("#loadPanelContainer").dxLoadPanel({ closeOnOutsideClick: true, container: "#container", position: { my: "left", at: "left", of: "#targetElement" } }); $("#buttonContainer").dxButton({ text: "Show the Load Panel", onClick: function () { $("#loadPanelContainer").dxLoadPanel("show"); } }); });
Angular
<dx-load-panel [closeOnOutsideClick]="true" container="#container" [(visible)]="isLoadPanelVisible"> <dxo-position my="left" at="left" of="#targetElement"> </dxo-position> </dx-load-panel> <dx-button text="Show the Load Panel" (onClick)="isLoadPanelVisible = true"> </dx-button>
import { DxLoadPanelModule, DxButtonModule } from "devextreme-angular"; // ... export class AppComponent { isLoadPanelVisible: boolean = false; } @NgModule({ imports: [ // ... DxLoadPanelModule, DxButtonModule ], // ... })
Vue
<template> <div> <DxLoadPanel :close-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.common.css'; 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>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { LoadPanel, Position } from 'devextreme-react/load-panel'; import { Button } from 'devextreme-react/button'; class App extends React.Component { constructor(props) { super(props); this.state = { isLoadPanelVisible: false }; this.handleClick = this.handleClick.bind(this); this.handleHide = this.handleHide.bind(this); } handleClick() { this.setState({ isLoadPanelVisible: true }); } handleHide() { this.setState({ isLoadPanelVisible: false }); } render() { return ( <div> <LoadPanel closeOnOutsideClick={true} visible={this.state.isLoadPanelVisible} inHidden={this.handleHide} container="#container"> <Position my="left" at="left" of="#targetElement"/> </LoadPanel> <Button text="Show the Load Panel" onClick={this.handleClick} /> </div> ); } } export default App;
This configuration of the position property reads as follows: "place my left side at the left of the "#targetElement".
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.