Free Trial Buy

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 property.

jQuery
JavaScript
$(function() {
    $("#loadPanelContainer").dxLoadPanel({
        hideOnOutsideClick: 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
    [hideOnOutsideClick]="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
    ],
    // ...
})
Vue
<template>
    <div>
        <DxLoadPanel
            :hide-on-outside-click="true"
            v-model:visible="isLoadPanelVisible"
            shading-color="rgba(0, 0, 0, 0.2)"
        />
        <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}
                    shadingColor="rgba(0, 0, 0, 0.2)"
                    visible={this.state.isLoadPanelVisible}
                    onHidden={this.handleHide}
                />
                <Button
                    text="Show the Load Panel"
                    onClick={this.handleClick}
                />
            </div>
        );
    }
}

export default App;
See Also