Hidden

Make UI responsive by conditionally rendering different UI on certain display sizes.

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

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.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>
@code {
}
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 IAsyncDisposable

<MudAlert Severity=Severity.Warning>
	MudBlazor 5.2 introduced new implementations for handling browser resize events.
	The <strong>IResizeListenerService</strong> can still be used but we strongly encourage you to move to the 
	<strong>IResizeService </strong>
</MudAlert>

<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] IResizeService ResizeService { get; set; }

    int width = 0;
    int height = 0;

	private Guid _subscriptionId;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
			_subscriptionId = await ResizeService.Subscribe((size) =>
			{
				width = size.Width;
				height = size.Height;
				InvokeAsync(StateHasChanged);
			}, new ResizeOptions
			{
				ReportRate = 50,
				NotifyOnBreakpointOnly = false,
			});

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

        await base.OnAfterRenderAsync(firstRender);
    }

    public async ValueTask DisposeAsync() => await ResizeService.Unsubscribe(_subscriptionId);
}
An unhandled error has occurred. Reload 🗙