React LoadPanel - Hide the Pane
The pane is the element that lies under the loading indicator and text.
The pane is shown by default. To hide it, assign false to the showPane property.
- 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}
- showPane={false}
- visible={this.state.isLoadPanelVisible}
- onHidden={this.handleHide}
- />
- <Button
- text="Show the Load Panel"
- onClick={this.handleClick}
- />
- </div>
- );
- }
- }
- export default App;
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.