DxRibbon Class
A toolbar component that organizes command items into tabs and groups.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
Declaration
public class DxRibbon :
DxComponentBase,
INestedSettingsOwnerRemarks
The DevExpress Ribbon component for Blazor (<DxRibbon>) implements a tabbed toolbar UI metaphor (organizes command items into tabs and groups). This toolbar style simplifies user access to commands, helps you build compact page layouts, and improves overall user experience.
Important
The Ribbon component is currently available as a community technology preview (CTP).
Add a Ribbon to a Project
Follow the steps below to add a Ribbon component to an application:
- Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
- Add the following markup to a
.razorfile:<DxRibbon> <DxRibbonTab Text="Tab Text"> <DxRibbonGroup Text="Group Text"> <DxRibbonItem Text="Item Text" /> </DxRibbonGroup> </DxRibbonTab> </DxRibbon> - Extend initial markup to populate the ribbon with tabs, groups, and items. Specify their settings.
- Optional. Add an application tab to the ribbon.
- Handle item events to respond to user interactions with items.
.NET 8 and .NET 9 Specifics
Blazor Ribbon component does not support static render mode. Enable interactivity to use the component in your application. Refer to the following topic for more details: Enable Interactive Render Mode.
Tabs
The DxRibbonTab class implements the functionality of an individual tab displayed in the DxRibbon component. Use the Text property to specify the tab caption.
Contextual Tabs
Set a tab’s Contextual property to true to mark the tab as contextual. The DxRibbon component highlights contextual tabs and displays them after standard tabs.
Contextual tabs appear on demand. For example, you can display a tab when a user selects an image or a table. Use the Visible property to manage tab visibility.
<DxRibbon>
<DxRibbonTab Text="Picture Format" Contextual="true" Visible="@PictureFormatVisible">...</DxRibbonTab>
<DxRibbonTab Text="Table Design" Contextual="true" Visible="@TableDesignVisible">...</DxRibbonTab>
<DxRibbonTab Text="Table Layout" Contextual="true" Visible="@TableLayoutVisible">...</DxRibbonTab>
<DxRibbonTab Text="Home">...</DxRibbonTab>
<DxRibbonTab Text="Insert">...</DxRibbonTab>
...
</DxRibbon>
<img src="/images/picture.png" @onfocus="@pictureHasFocus" @onblur="@pictureLostFocus" width="50px" tabindex="0" />
<img src="/images/table.png" @onfocus="@tableHasFocus" @onblur="tableLostFocus" width="50px" tabindex="0" />
@code {
bool PictureFormatVisible { get; set; } = false;
bool TableDesignVisible { get; set; } = false;
bool TableLayoutVisible { get; set; } = false;
public void pictureHasFocus(FocusEventArgs args) {
PictureFormatVisible = true;
}
public void pictureLostFocus(FocusEventArgs args) {
PictureFormatVisible = false;
}
public void tableHasFocus() {
TableDesignVisible = true;
TableLayoutVisible = true;
}
public void tableLostFocus(FocusEventArgs args) {
TableDesignVisible = false;
TableLayoutVisible = false;
}
}
Application Tab
The DxRibbon component can contain an application tab that appears first. Commands associated with this tab appear in a dropdown menu. You can override this default behavior and write custom code that runs when a user clicks the tab.
The DxRibbonApplicationTab class implements the functionality of the ribbon application tab. Use Text, IconCssClass, and IconUrl properties to specify the tab appearance. Handle the Click event to perform custom actions when a user clicks the tab.
<DxRibbon >
<DxRibbonApplicationTab Text="File" Click="@(() => IsFileMenuOpen = true)" />
<DxRibbonTab Text="Home">...</DxRibbonTab>
<DxRibbonTab Text="Insert">...</DxRibbonTab>
</DxRibbon>
@code {
bool IsFileMenuOpen { get; set; } = false;
}
Populate the application tab’s child content with DxRibbonApplicationTabItem objects to display a drop-down menu when a user clicks the tab.
<DxRibbon>
<DxRibbonApplicationTab Text="File">
<DxRibbonApplicationTabItem Text="New"
IconCssClass="rb-icon rb-icon-document-blank"
Click="@(() => ClickItem("New tab item"))" />
<DxRibbonApplicationTabItem Text="Open"
IconCssClass="rb-icon rb-icon-folder-open"
Click="@(() => ClickItem("Open tab item"))" />
<DxRibbonApplicationTabItem Text="Save as"
IconCssClass="rb-icon rb-icon-save"
Click="@(() => ClickItem("Save as tab item"))">
<DxRibbonApplicationTabItem Text="Text file"
Click="@(() => ClickItem("Text file tab item"))"/>
<DxRibbonApplicationTabItem Text="Word document"
Click="@(() => ClickItem("Word document tab item"))"/>
<DxRibbonApplicationTabItem Text="Pdf file"
Click="@(() => ClickItem("Pdf file tab item"))"/>
</DxRibbonApplicationTabItem>
<DxRibbonApplicationTabItem Text="Share"
IconCssClass="rb-icon rb-icon-share"
Click="@(() => ClickItem("Share tab item"))" />
<DxRibbonApplicationTabItem Text="Print"
IconCssClass="rb-icon rb-icon-print"
Click="@(() => ClickItem("Print tab item"))" />
</DxRibbonApplicationTab>
<DxRibbonTab Text="Home">...</DxRibbonTab>
<DxRibbonTab Text="Insert">...</DxRibbonTab>
</DxRibbon>
Groups
The DxRibbonGroup class implements the functionality of an individual item group displayed within a tab.
When the ribbon’s width decreases, the component hides group items in a group drop-down menu. Once all items are hidden, Ribbon displays the group as a drop-down button. Use Text and IconCssClass properties to define the button’s text and icon.
...
<DxRibbonGroup Text="Font Decoration">
<DxRibbonColorPickerItem Text="Font color" @bind-Value="color">
<IconTemplate>...</IconTemplate>
</DxRibbonColorPickerItem>
<DxRibbonItem IconCssClass="rb-icon rb-icon-bold" />
<DxRibbonItem IconCssClass="rb-icon rb-icon-italic" />
<DxRibbonItem IconCssClass="rb-icon rb-icon-underline" />
</DxRibbonGroup>
...
Items
The DxRibbon component can display the following items:
- Button, Split Button (DxRibbonItem)
- Spin Edit (DxRibbonSpinEditItem<TValue>)
- Color Picker (DxRibbonColorPaletteItem)
- ComboBox (DxRibbonComboBoxItem<TData, TValue>)
Adaptivity
The DxRibbon component supports adaptivity. Use the following properties to control the Ribbon’s response when the container width changes:
- AdaptivityAutoCollapseItemsToGroups
- Specifies whether the Ribbon collapses its items into groups when component width changes.
- AdaptivityAutoCollapseItemsToIcons
- Specifies whether the Ribbon hides item text and displays only icons when component width changes.
- AdaptivityAutoHideRootItems
- Specifies whether the Ribbon hides items when component width changes.
Troubleshooting
If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.