search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.24k stars 32.11k forks source link

Microsoft Ribbon Style #43273

Closed drunkwcodes closed 3 weeks ago

drunkwcodes commented 1 month ago

Summary

As a developer and designer, I've always admired the efficiency and intuitive design of the Microsoft Ribbon UI. It's a feature that has revolutionized the way users interact with complex software, making advanced functionalities accessible with ease. However, when working with Material UI, I've found that creating a similar Ribbon UI experience requires extensive custom development. This gap limits the ability of developers to offer a rich, organized interface that is both user-friendly and powerful.

Describe the solution you'd like I propose the introduction of a Ribbon UI component within Material UI, inspired by the Microsoft Ribbon. This component would allow developers to easily create tabbed toolbars, segmented by categories, with quick access to key features. The Ribbon UI should be flexible, customizable, and adhere to Material Design principles while maintaining the functional essence of the original Ribbon.

Examples

I've explored various third-party libraries and even attempted to build a Ribbon UI from scratch using Material UI components. However, these approaches either fall short in terms of flexibility and integration or require a significant amount of redundant coding. For reference, I've looked into the RibbonUI repository, which offers a starting point but lacks the robustness and seamless integration needed for a comprehensive solution in Material UI.

Motivation

Incorporating a Ribbon UI into Material UI could significantly enhance the framework's capability to support more complex and feature-rich applications. Whether it's for productivity software, design tools, or enterprise applications, the Ribbon UI has proven its worth as an interface that balances simplicity with advanced functionality. Adding this to Material UI would not only make it easier for developers to implement such an interface but would also set a new standard for UI/UX design within the Material ecosystem.

I'm confident that the Material UI community would greatly benefit from this addition, and I'm eager to see what could be achieved with this powerful UI pattern as part of the Material UI toolkit.

Thank you for considering this request!

Search keywords: ribbon ui

aarongarciah commented 4 weeks ago

@drunkwcodes can you provide some screenshots and go into more detail of what this Ribbon component would include and how it would behave?

drunkwcodes commented 4 weeks ago

Hi, @aarongarciah. Please watch this screenshot.

It is Music Jotter. A sheet music comping editor on the cloud!

And this is which music jotter made of: jQuery-UI

We can revamp that and make much better for music jotter. And Use this to get a copy of music jotter, or even persuade him to let it be open-source!

The sheet music comping project has a lot of work to do, not only AI music, major to minor etc. , but also text to song lyrics, ai vocal and band-in-a-box things.

And I hope the material design works the best for this app, hope the UI come true. I will be glad to work with Music Jotter and Material UI!

aarongarciah commented 3 weeks ago

Thanks for expanding and the suggestion @drunkwcodes. It's not in our plans to work on any ribbon-like component, it's way out side of the scope of Material UI, so I'm closing this issue. I suggest creating your own custom component.