DevExtreme Angular - Color the Shading of the Background
When the LoadPanel is shown, the area beneath it can be shaded. The shading color is specified by the shadingColor option.
jQuery
JavaScript
$(function() {
$("#loadPanelContainer").dxLoadPanel({
closeOnOutsideClick: true,
shadingColor: "rgba(0, 0, 0, 0.2)"
});
$("#buttonContainer").dxButton({
text: "Show the Load Panel",
onClick: function () {
$("#loadPanelContainer").dxLoadPanel("show");
}
});
});Angular
HTML
TypeScript
<dx-load-panel
[closeOnOutsideClick]="true"
[(visible)]="isLoadPanelVisible"
shadingColor="rgba(0, 0, 0, 0.2)">
</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
],
// ...
})