MudBlazor

Hidden

Hiding parts of the UI with MudHidden.

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.

@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 error has occurred. This application may no longer respond until reloaded. Reload 🗙