MudBlazor

Breakpoint Provider

Exposing the current breakpoint to multiple components.

How it works

The breakpoint provider offers a cascading parameter that exposes the window's current breakpoint (xs,sm,md,lg,xl). These features improve the performance if your layout heavily relies on such features or if you don't want to use the BreakpointListenerService directly in your own components.

If a MudHidden is used within a MudBreakpointProvider, it will use the provided value instead of relying on the IBreakpointListenerService. That would reduce the number of render cycles if a change of the browser size occurred.

LG and Up

MD and Up

SM and Up

LG and Up

MD and Up

SM and Up

LG and Up

MD and Up

SM and Up

LG and Up

MD and Up

SM and Up

LG and Up

MD and Up

SM and Up

LG and Up

MD and Up

SM and Up

LG and Up

MD and Up

SM and Up

LG and Up

MD and Up

SM and Up

LG and Up

MD and Up

SM and Up

LG and Up

MD and Up

SM and Up

Rows: 10

@using MudBlazor.Services

<MudBreakpointProvider>
	@for (int i = 0; i < _amountOfRows; i++)
	{
		<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>
	}
</MudBreakpointProvider>

<MudSlider @bind-Value="_amountOfRows" Min="1" Max="100"></MudSlider>
<MudText>Rows: @_amountOfRows</MudText>
@code {
	private int _amountOfRows = 10;

}

Listening to browser window breakpoint changes

The IBreakpointListenerService is the service that powers the MudBreakpoint Provider. It can be used in own components

Size started with Xs

@using MudBlazor.Services
@implements IAsyncDisposable


<MudCard Class="pa-5">
	<MudText>Size started with @_start</MudText>
	@if (_breakpointHistory.Count > 0)
	{
		<MudText>And continued with: </MudText>
		<MudList Dense="_breakpointHistory.Count > 10">
			@foreach (var item in _breakpointHistory)
			{
				<MudListItem Text="@item.ToString()"></MudListItem>
			}
		</MudList>
	}
</MudCard>
@code
{
	[Inject] IBreakpointService BreakpointListener { get; set; }

	private List<Breakpoint> _breakpointHistory = new();

	private Guid _subscriptionId;
	private Breakpoint _start;

	protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		if (firstRender)
		{
			var subscriptionResult = await BreakpointListener.Subscribe((breakpoint) =>
			{
				_breakpointHistory.Add(breakpoint);
				InvokeAsync(StateHasChanged);
			}, new ResizeOptions
			{
				ReportRate = 250,
				NotifyOnBreakpointOnly = true,
			});

			_start = subscriptionResult.Breakpoint;
			_subscriptionId = subscriptionResult.SubscriptionId;
			StateHasChanged();
		}

		await base.OnAfterRenderAsync(firstRender);
	}

	public async ValueTask DisposeAsync() => await BreakpointListener.Unsubscribe(_subscriptionId);
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙