MudBlazor - Blazor Component Library

API

<MudOverlay>

AutoClose

The AutoClose property is used to let users close the overlay by clicking it.

@inject ISnackbar Snackbar
 
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="OpenOverlay">Show Overlay</MudButton>

<MudOverlay @bind-Visible="_visible" DarkBackground AutoClose="true" OnClosed="OnOverlayClosed" />

@code {
    private bool _visible;

    public void OpenOverlay()
    {
        _visible = true;
        StateHasChanged();
    }
    
    public void OnOverlayClosed()
    {
        Snackbar.Add("Random message", Severity.Normal);
    }
}

Absolute

The overlay can be contained inside its parent using the Absolute property and CSS Style="position: relative;".

<MudPaper Class="pa-8" Style="height: 300px; position: relative;">
    <MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="@(e => ToggleOverlay(true))">Show Overlay</MudButton>

    <MudOverlay Visible="visible" DarkBackground="true" Absolute="true">
        <MudButton Variant="Variant.Filled" Color="Color.Primary"  OnClick="@(e => ToggleOverlay(false))">Hide Overlay</MudButton>
    </MudOverlay>
</MudPaper>

@code {
    private bool visible;

    public void ToggleOverlay(bool value)
    {
        visible = value;
    }
}