search

microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.78k stars 363 forks source link

feat: Add TopBar Component #2446

Open AathifMahir opened 2 months ago

AathifMahir commented 2 months ago

🙋 Feature Request

The Top Bar Component that Replaces the Top Black Bar on Fluent Blazor Demo Site aka AppBar Component that we can find on Mobile Apps.

💁 Possible Solution

Implementing a Root TopBar Component aka MainTopBar that Cascades the Values from Childrens TopBar Component,

For example, The Main layout Does Contains MainTopBar That Default has Prefix Content and Suffix Contents and flags to Show Hamburger and Back buttons, On the Page Level We can Add Normal Top Bar, Which Cascades Values to MainTopBar, In this case we have only one Global TopBar Which is MainTopBar, NormalTopBar Used to Set the Values for MainTopBar

🔦 Context

This feature would be super useful on Maui Blazor Hybrid Projects and Also on Web Projects as well. Mainly this would be super useful on Mobile Views, Where We have Back Button Enabled for Specific Views and Showing Hamburger Buttons and Additionally We can Provide Users With Suffix and Prefix Content as RenderFragment

💻 Examples

Screenshot_20240724_062632_Chrome.jpg

vnbaaij commented 2 months ago

Hi Aathif,

It is not exactly clear to me what the component should do. Can you add some more screenshots or links to similar components that are already out there.

AathifMahir commented 2 months ago

Hi Aathif,

It is not exactly clear to me what the component should do. Can you add some more screenshots or links to similar components that are already out there.

https://mudblazor.com/components/appbar

Most cases it works like the appbar with additional stuffs. Top Bar Can be Useful when the Hamburger Menu is Hidden or In Blazor Hybrid Projects where Back Button is not available on Desktop and Mobile Application, Having This Component Would be super useful,

In summary, What we going to do here is Have AppBar aka TopBar Component that Works on Desktop and Mobile

Feel free to let me know, I'm happy to work on POC for this.

What I have mind for implementation is, Have a MainTopBar Component that goes into Main Layout and Listenes for Values on ChildTopBar Component, The ChildTopBar Component Used for Setting the Value doesn't have Any UX,

For example, childTopBar Component Does does Take some Function for Whatever Back Button Should do and etc.. and Also Some Properties to Set the Title and Provides some RenderFragment for Customization and etc..

vnbaaij commented 2 months ago

If you want to work on this, sure. But we might conclude that it is not suited for us to take in. It might be something for the community extension library that is in incubation now. Let's see.

Just do not call it FluentAppBar as that one already exists.