MudBlazor - Blazor Component Library

<MudHidden> is configured with a breakpoint which tells it under which screen size to refrain from rendering its content. So if the breakpoint is for instance set to Breakpoint.Lg it means the content is rendered on smaller screens (XS, SM and MD) but hidden on LG XL and bigger. You can test <MudHidden>'s behavior by resizing the browser window or by using a developer browser extension which allows you to simulate different screen sizes.

Note: MudHidden uses JavaScript under the hood to listen for browser window size changes. If you want a pure CSS solution please look at the responsive display classes

When to use <MudHidden> and when to use CSS instead?
The rule of thumb is to use the responsive display classes because they are cleaner and don't require you to wrap your content in an extra container. But if you have multiple complex UI trees for different screen sizes it could make your page slow because the content needs to be rendered multiple times even if most is rendered with display:none. In this case you'd want to use <MudHidden> instead because it will not render its content at all when the breakpoint is reached.

How it works

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

@using MudBlazor.Services

<MudHidden Breakpoint="Breakpoint.Xxl" Invert="true">
    <MudCard Class="pa-5">
        <MudText>XXL</MudText>
    </MudCard>
</MudHidden>
<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.XlAndUp" Invert="true">
    <MudCard Class="pa-5">
        <MudText>XL and Up</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.XlAndDown" Invert="true">
    <MudCard Class="pa-5">
        <MudText>XL and Down</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

@using MudBlazor.Services
@implements IBrowserViewportObserver
@implements IAsyncDisposable

<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]
    private IBrowserViewportService BrowserViewportService { get; set; }

    private int _width = 0;
    private int _height = 0;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await BrowserViewportService.SubscribeAsync(this, fireImmediately: true);
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    public async ValueTask DisposeAsync() => await BrowserViewportService.UnsubscribeAsync(this);

    Guid IBrowserViewportObserver.Id { get; } = Guid.NewGuid();

    ResizeOptions IBrowserViewportObserver.ResizeOptions { get; } = new()
    {
        ReportRate = 50,
        NotifyOnBreakpointOnly = false
    };

    Task IBrowserViewportObserver.NotifyBrowserViewportChangeAsync(BrowserViewportEventArgs browserViewportEventArgs)
    {
        _width = browserViewportEventArgs.BrowserWindowSize.Width;
        _height = browserViewportEventArgs.BrowserWindowSize.Height;

        return InvokeAsync(StateHasChanged);
    }
}