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.
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
<MudHiddenBreakpoint="Breakpoint.Xxl"Invert="true"><MudCardClass="pa-5"><MudText>XXL</MudText></MudCard></MudHidden><MudHiddenBreakpoint="Breakpoint.Xl"Invert="true"><MudCardClass="pa-5"><MudText>XL</MudText></MudCard></MudHidden><MudHiddenBreakpoint="Breakpoint.Lg"Invert="true"><MudCardClass="pa-5"><MudText>LG</MudText></MudCard></MudHidden><MudHiddenBreakpoint="Breakpoint.Md"Invert="true"><MudCardClass="pa-5"><MudText>MD</MudText></MudCard></MudHidden><MudHiddenBreakpoint="Breakpoint.Sm"Invert="true"><MudCardClass="pa-5"><MudText>SM</MudText></MudCard></MudHidden><MudHiddenBreakpoint="Breakpoint.Xs"Invert="true"><MudCardClass="pa-5"><MudText>XS</MudText></MudCard></MudHidden><MudHiddenBreakpoint="Breakpoint.XlAndUp"Invert="true"><MudCardClass="pa-5"><MudText>XL and Up</MudText></MudCard></MudHidden><MudHiddenBreakpoint="Breakpoint.LgAndUp"Invert="true"><MudCardClass="pa-5"><MudText>LG and Up</MudText></MudCard></MudHidden><MudHiddenBreakpoint="Breakpoint.MdAndUp"Invert="true"><MudCardClass="pa-5"><MudText>MD and Up</MudText></MudCard></MudHidden><MudHiddenBreakpoint="Breakpoint.SmAndUp"Invert="true"><MudCardClass="pa-5"><MudText>SM and Up</MudText></MudCard></MudHidden><MudHiddenBreakpoint="Breakpoint.XlAndDown"Invert="true"><MudCardClass="pa-5"><MudText>XL and Down</MudText></MudCard></MudHidden><MudHiddenBreakpoint="Breakpoint.LgAndDown"Invert="true"><MudCardClass="pa-5"><MudText>LG and Down</MudText></MudCard></MudHidden><MudHiddenBreakpoint="Breakpoint.MdAndDown"Invert="true"><MudCardClass="pa-5"><MudText>MD and Down</MudText></MudCard></MudHidden><MudHiddenBreakpoint="Breakpoint.SmAndDown"Invert="true"><MudCardClass="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
<MudCardClass="pa-5"><MudText>
Resize the window and see width and height change:<br/>
Browser window is @(_width)x@(_height)px
</MudText></MudCard>