Angular 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.
jQuery
JavaScript
$(function() { $("#loadPanelContainer").dxLoadPanel({ hideOnOutsideClick: true, showPane: false }); $("#buttonContainer").dxButton({ text: "Show the Load Panel", onClick: function () { $("#loadPanelContainer").dxLoadPanel("show"); } }); });
Angular
HTML
TypeScript
<dx-load-panel [hideOnOutsideClick]="true" [(visible)]="isLoadPanelVisible" [showPane]="false"> </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 :hide-on-outside-click="true" v-model:visible="isLoadPanelVisible" :show-pane="false" /> <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>
React
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.