-
HomeHome
-
EditEdit
-
InsertInsert
The DevExpress Blazor Ribbon component leverages a tabbed toolbar UI metaphor to organize command items across different tabs. This component simplifies access to functions built to improve Ribbon organization and the overall user experience.
Our Blazor Ribbon ships with the following capabilities:
Application Button Like the Microsoft Office Ribbon, our Ribbon includes an Application Button, providing quick access to common functions in a dropdown.
Support for Multiple Built-in Editors The Ribbon supports various editor types, such as buttons, text boxes, combo boxes, color pickers, and spin editors. This improves code structure and efficiency.
Advanced Adaptivity The Ribbon features flexible adaptivity. Each group has an ellipsis button and can collapse into a compressed state.
Contextual Tabs The Ribbon includes contextual tabs that appear dynamically based on the user's actions or selection. These tabs display relevant commands and tools tailored to the current task or content, enhancing user experience and streamlining workflow.
-
HomeHome
Our Blazor Ribbon is adaptive by design. Use the following properties to control Ribbon behavior when container width changes:
- AdaptivityAutoCollapseItemsToGroups — Set this property to
trueto hide groups text (only display icons when changes are made to browser window width). Manage hidden text order within groups using the DxRibbonGroup.AdaptivePriority property. - AdaptivityAutoCollapseItemsToIcons — Set this property to
trueto hide items text (only display icons when changes are made to browser window width). - AdaptivityAutoHideRootItems — Set this property to
trueto combine root items into the root submenu (when changes are made to browser window width).
-
HomeHome
To enhance the user experience in applications with limited screen space, the DevExpress Blazor Ribbon can be transformed into a compact, toolbar-like control. Disable the ShowTabs property to hide tab captions. All UI elements within the active tab will remain visible and interactive. You gain a rich collection of Blazor Ribbon commands and advanced adaptivity in a layout that resembles a traditional toolbar.
You can still define multiple tabs and programmatically switch between them using the ActiveTabIndex property.
-
FormatFormat
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Penatibus et magnis dis parturient. Eget dolor morbi non arcu risus. Tristique magna sit amet purus gravida quis blandit. Auctor urna nunc id cursus metus aliquam eleifend mi in. Tellus orci ac auctor augue mauris augue neque gravida. Nullam vehicula ipsum a arcu. Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Cursus in hac habitasse platea dictumst. Egestas dui id ornare arcu. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim.
Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Neque volutpat ac tincidunt vitae semper quis lectus. Sed sed risus pretium quam vulputate dignissim suspendisse in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Amet cursus sit amet dictum sit amet justo donec enim. Vestibulum rhoncus est pellentesque elit ullamcorper. Id aliquet risus feugiat in ante metus dictum at.
With our Blazor Ribbon, you can create a flexible alternative to a Ribbon Application tab menu. Unlike a standard menu, DevExpress Blazor Drawer can incorporate a variety of UI controls (such as data editors, an accordion, charts, and other DevExpress Blazor components).
Add the Drawer component and handle the ApplicationTabClick event to programmatically open and close the Drawer panel. To prevent the Ribbon's application tab menu from opening, remove all items from DxRibbonApplicationTab or set Cancel to true in the ApplicationTabClick event handler.