React LoadPanel - Resize and Relocate
Specify the height and width properties to change the LoadPanel's size:
- import React from 'react';
- 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
- hideOnOutsideClick={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:
- import React from 'react';
- 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
- hideOnOutsideClick={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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.