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

Hidden

Hiding parts of the UI with MudHidden.

See Hidden API for parameter documentation.

All elements are rendered unless they are explicitly hidden. You can use MudBlazor's breakpoints combined with MudHidden to hide any content.

How it works

The following example shows all breakpoint options only if they match the screensize. Because it is more intuitive for this example, we inverted all the breakpoints so that you can see them only if they match.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@using MudBlazor.Services

<MudHidden Breakpoint="Breakpoint.Xl" Invert="true">
    <MudCard Class="pa-5">
        <MudText>XL</MudText>
    </MudCard>
</MudHidden>
<MudHidden Breakpoint="Breakpoint.Lg" Invert="true">
    <MudCard Class="pa-5">
        <MudText>LG</MudText>
    </MudCard>
</MudHidden>
<MudHidden Breakpoint="Breakpoint.Md" Invert="true">
    <MudCard Class="pa-5">
        <MudText>MD</MudText>
    </MudCard>
</MudHidden>
<MudHidden Breakpoint="Breakpoint.Sm" Invert="true">
    <MudCard Class="pa-5">
        <MudText>SM</MudText>
    </MudCard>
</MudHidden>
<MudHidden Breakpoint="Breakpoint.Xs" Invert="true">
    <MudCard Class="pa-5">
        <MudText>XS</MudText>
    </MudCard>
</MudHidden>
<MudHidden Breakpoint="Breakpoint.LgAndUp" Invert="true">
    <MudCard Class="pa-5">
        <MudText>LG and Up</MudText>
    </MudCard>
</MudHidden>
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
    <MudCard Class="pa-5">
        <MudText>MD and Up</MudText>
    </MudCard>
</MudHidden>
<MudHidden Breakpoint="Breakpoint.SmAndUp" Invert="true">
    <MudCard Class="pa-5">
        <MudText>SM and Up</MudText>
    </MudCard>
</MudHidden>
<MudHidden Breakpoint="Breakpoint.LgAndDown" Invert="true">
    <MudCard Class="pa-5">
        <MudText>LG and Down</MudText>
    </MudCard>
</MudHidden>
<MudHidden Breakpoint="Breakpoint.MdAndDown" Invert="true">
    <MudCard Class="pa-5">
        <MudText>MD and Down</MudText>
    </MudCard>
</MudHidden>
<MudHidden Breakpoint="Breakpoint.SmAndDown" Invert="true">
    <MudCard Class="pa-5">
        <MudText>SM and Down</MudText>
    </MudCard>
</MudHidden>

Listening to browser window resize events

Directly listening to the screen size change events is the most expensive way to adapt to a resizing browser window. Use this only if the other breakpoint methods don't work for you.

Resize the window and see width and height change:
Browser window is 0x0px

Hide code example
Edit on TryMudBlazor
Copy Code
@using MudBlazor.Services
@implements IDisposable

<MudCard Class="pa-5">
    <MudText>
        Resize the window and see width and height change:<br />
        Browser window is @(width)x@(height)px
    </MudText>
</MudCard>
@code
{
    [Inject] IResizeListenerService ResizeListener { get; set; }

    int width = 0;
    int height = 0;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            ResizeListener.OnResized += OnResized;

            var size = await ResizeListener.GetBrowserWindowSize();
            height = size.Height;
            width = size.Width;
            StateHasChanged();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    private void OnResized(object sender, BrowserWindowSize size)
    {
        width = size.Width;
        height = size.Height;
        InvokeAsync(StateHasChanged);
    }

    public void Dispose()
    {
        ResizeListener.OnResized -= OnResized;
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙