Improve responsive design for smaller screen sizes with a breakpoint provider component?

[PascalVorwerk]

Hi! I was wondering if there is any interest to enhance the development for smaller screen sizes in Fluent UI through things like break point providers or css utility classes. Some other providers of components offer these things:

Mudblazor: https://mudblazor.com/components/breakpointprovider#api
Syncfusion: https://blazor.syncfusion.com/documentation/media-query/break-points

(And probably a few more)

I think it would be interesting to build one of these approaches into this library to enhance the capabilities of developers to improve their UI for smaller screens. I know there already is a Grid component that allows you to do this, but this is more about making it easier to 'change UI depening on screen sizes'. For example, it might make it easier to collapse a navmenu depending on breakpoints.

[dvoituron]

Like you said, you already have the FluentGrid and nothing else is planned at this moment.

What do you want and what is not possible with the FluentGrid, because you have xs, sm, ... attributes but also the HiddenWhen attribute which seems similar to the features included in your links. Your have also OnBreakpointEnter to detect when the break point changes.

[PascalVorwerk]

Well for certain things it would be nice to be able to query the media, which ofcourse you could do through javascript interop on its own, but i just see these ways of getting the current 'Breakpoint' in other libraries, which I imagine could be handy?

Like i said: The collapsible toggle on a navmenu would be easier to implement based on current window size / breakpoint if there was some kind of provider right? Or is there a way to do this with simply the grid that I failed to understand?

[dvoituron]

You can do this with the FluentGrid:

1. Use the HiddenWhen attribute to hide some DIV when you want (if you have DIV to show/hide in your menu)
2. Use the OnBreakpointEnter to catch the media size in a local variable. And use it with your NavMenu.

[PascalVorwerk]

Right, but to me it does kinda seem like the Grid then becomes a 'breakpoint' provider instead of a grid system. Let's say i wrap my navmenu in a grid and i simply would want to toggle the menu to collapse when screen size is <md, the grid component would only be there for me to listen to those changes and set the boolean value to true/false depending on those changes?

Could that be the reason why for example mudblazor provides both a breakpoint provider AND a grid system like we have here?

[dvoituron]

Yes. For us, this component manages the both 🙂