MudBlazor - Blazor Component Library

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;
    }
}

Color

The overlay is transparent by default but can be changed with DarkBackground or LightBackground.

Det var en gång en spindel, som hette laban. Laban tyckte om kebab pizza, men det gjorde inte hans kompis åke. Åke och Laban skulle en dag ut och fiska. På vägen dit skrek Laban till, faaan du åke!!! det luktar kebab!!!

Light Overlay

Det var en gång en spindel, som hette laban. Laban tyckte om kebab pizza, men det gjorde inte hans kompis åke. Åke och Laban skulle en dag ut och fiska. På vägen dit skrek Laban till, faaan du åke!!! det luktar kebab!!!

Dark Overlay

<MudGrid>
    <MudItem xs="12" sm="6">
        <MudPaper Class="pa-4 my-2" Style="position:relative;">
            <MudOverlay Visible="lightVisible" LightBackground="true" Absolute="true" />
            <MudText>
                Det var en gång en spindel, som hette laban. Laban tyckte om kebab pizza, men det gjorde inte hans kompis åke.
                Åke och Laban skulle en dag ut och fiska. På vägen dit skrek Laban till, faaan du åke!!! det luktar kebab!!!
            </MudText>
            <MudButton Variant="Variant.Filled" Class="mt-2">Action</MudButton>
        </MudPaper>
        <MudSwitch @bind-Value="lightVisible" Label="Light Overlay" Color="Color.Primary"/>
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudPaper Class="pa-4 my-2" Style="position:relative;">
            <MudOverlay Visible="darkVisible" DarkBackground="true" Absolute="true" />
            <MudText>
                Det var en gång en spindel, som hette laban. Laban tyckte om kebab pizza, men det gjorde inte hans kompis åke.
                Åke och Laban skulle en dag ut och fiska. På vägen dit skrek Laban till, faaan du åke!!! det luktar kebab!!!
            </MudText>
            <MudButton Variant="Variant.Filled" Class="mt-2">Action</MudButton>
        </MudPaper>
        <MudSwitch @bind-Value="darkVisible" Label="Dark Overlay" Color="Color.Secondary" />
    </MudItem>
</MudGrid>

@code {
    private bool lightVisible;
    private bool darkVisible;
}

Z-index

With the ZIndex property you can control the stack order of the component.

<MudButton Variant="Variant.Filled" Color="Color.Tertiary" OnClick="OpenOverlay">Show Overlay</MudButton>

<MudOverlay @bind-Visible="visible" DarkBackground="true" ZIndex="9999" AutoClose="true"/>

@code {
    private bool visible;

    public void OpenOverlay()
    {
        visible = true;
        StateHasChanged();
    }
}