MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Overlay

Provides a window which can have an arbitrary number of overlay views that will sit above the root view of the window.

See Overlay API for parameter documentation.

Usage

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="OpenOverlay">Show Overlay</MudButton>

<MudOverlay @bind-Visible="isVisible" DarkBackground="true" AutoClose="true"/>
@code {
    private bool isVisible;

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

Absolute

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

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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="isVisible" DarkBackground="true" Absolute="true">
        <MudButton Variant="Variant.Filled" Color="Color.Primary"  OnClick="@(e => ToggleOverlay(false))">Hide Overlay</MudButton>
    </MudOverlay>
</MudPaper>
@code {
    private bool isVisible;

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

Z Index

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

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudButton Variant="Variant.Filled" Color="Color.Tertiary" OnClick="OpenOverlay">Show Overlay</MudButton>

<MudOverlay @bind-Visible="isVisible" DarkBackground="true" ZIndex="9999" AutoClose="true"/>
@code {
    private bool isVisible;

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

On Click

The component has an onclick handler that can be used for various purposes.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@inject ISnackbar Snackbar


<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="ToggleOverlay" Class="mx-1">On Click Alert</MudButton>

<MudOverlay Visible="isVisible" OnClick="ShowSnackbar" DarkBackground="true" ZIndex="9999" />
@code {
    private bool isVisible;

    public void ToggleOverlay()
    {
        isVisible = true;
    }

    public void ShowSnackbar()
    {
        Snackbar.Add("Random message", Severity.Normal);
        isVisible = false;
    }
}

Colors

By default, the overlay is transparent but can be changed with DarkBackground and 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!!!

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!!!

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="6">
        <MudPaper Class="pa-4 my-2" Style="position:relative;">
            <MudOverlay Visible="lightIsVisible" 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-Checked="@lightIsVisible" Label="Light Overlay" Color="Color.Primary"/>
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudPaper Class="pa-4 my-2" Style="position:relative;">
            <MudOverlay Visible="darkIsVisible" 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-Checked="@darkIsVisible" Label="Dark Overlay" Color="Color.Secondary" />
    </MudItem>
</MudGrid>
@code {
    private bool lightIsVisible;
    private bool darkIsVisible;
}

Loader

The Overlay component can take any childitem but here, for example, we are using it to display loading or progress time.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudCard Class="my-2" Style="position:relative;">
    @if (!dataLoaded)
    {
        <MudSkeleton SkeletonType="SkeletonType.Rectangle" Height="200px" />
        <MudCardContent>
            <MudSkeleton Width="30%" Height="42px;" />
            <MudSkeleton Width="80%" />
            <MudSkeleton Width="100%" />
        </MudCardContent>
        <MudCardActions>
            <MudSkeleton Width="64px" Height="40px" Class="ml-2" />
            <MudSkeleton Width="105px" Height="40px" Class="ml-3" />
        </MudCardActions>
        <MudOverlay Visible="isVisible" DarkBackground="true" Absolute="true">
            <MudProgressCircular Color="Color.Secondary" Indeterminate="true" />
        </MudOverlay>
    }
    else
    {
        <MudCardMedia Image="_content/MudBlazor.Docs/images/content-template-door.png" Height="200" />
        <MudCardContent>
            <MudText Typo="Typo.h5">Old Paint</MudText>
            <MudText Typo="Typo.body2">Old paint found on a stone house door.</MudText>
            <MudText Typo="Typo.body2">This photo was taken in a small village in Istra Croatia.</MudText>
        </MudCardContent>
        <MudCardActions>
            <MudButton Variant="Variant.Text" Color="Color.Primary">Share</MudButton>
            <MudButton Variant="Variant.Text" Color="Color.Primary">Learn More</MudButton>
        </MudCardActions>
    }
</MudCard>

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="OpenOverlay" EndIcon="@Icons.Material.Filled.Refresh">Refresh Data</MudButton>
<MudButton Variant="Variant.Filled" OnClick="ResetExample">Reset Example</MudButton>
@code { 
    private bool isVisible;
    private bool dataLoaded;

    public async void OpenOverlay()
    {
        isVisible = true;
        await Task.Delay(3000);
        isVisible = false;
        dataLoaded = true;
        StateHasChanged();
    }

    public void ResetExample()
    {
        dataLoaded = false;
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙