DxRibbonGroup Class

Defines a group in the DxRibbon component.

Assembly: DevExpress.Blazor.v24.2.dll

Declaration

public class DxRibbonGroup :
    ComponentBase,
    INestedSettingsOwner,
    IDisposable

The following members return DxRibbonGroup objects:

Remarks

The DxRibbonGroup class implements the functionality of an individual item group displayed in the DxRibbon component. You can add the following items to a group:

Button, Split Button (DxRibbonItem)
Spin Edit (DxRibbonSpinEditItem<TValue>)
Color Picker (DxRibbonColorPaletteItem)
ComboBox (DxRibbonComboBoxItem<TData, TValue>)

Ribbon item types

<DxRibbon>
    <DxRibbonApplicationTab Text="File" />
    <DxRibbonTab Text="Home">
        <DxRibbonGroup Text="Clipboard">
            <DxRibbonItem Text="Undo" IconCssClass="rb-icon rb-icon-undo" SplitDropDownButton="true">
                <DxRibbonItem Text="Redo" />
            </DxRibbonItem>
            <DxRibbonItem Text="Paste" IconCssClass="rb-icon rb-icon-paste" SplitDropDownButton="true">
                <DxRibbonItem Text="Copy" />
                <DxRibbonItem Text="Cut" />
            </DxRibbonItem>
        </DxRibbonGroup>
        <DxRibbonGroup Text="Font Settings">
            <DxRibbonComboBoxItem Data="Fonts" @bind-Value="CurrentFont" TextFieldName="@nameof(FontInfo.Name)" Width="120px" />
            <DxRibbonSpinEditItem @bind-Value="CurrentFontSize" Increment="1" MinValue="6" MaxValue="24" />
        </DxRibbonGroup>
        <DxRibbonGroup Text="Font Decoration">
            <DxRibbonColorPickerItem Text="Font color" @bind-Value="color">
                <IconTemplate>
                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.4642 2.3143C10.3883 2.12448 10.2045 2 10 2C9.79556 2 9.6117 2.12448 9.53577 2.3143L6.53577 9.8143C6.43322 10.0707 6.55792 10.3617 6.81432 10.4642C7.07071 10.5668 7.36169 10.4421 7.46425 10.1857L8.53707 7.50364H11.4629L12.5358 10.1857C12.6383 10.4421 12.9293 10.5668 13.1857 10.4642C13.4421 10.3617 13.5668 10.0707 13.4642 9.8143L10.4642 2.3143ZM10 3.84629L11.0629 6.50364H8.93707L10 3.84629Z" />
                        <path fill="@color" d="M4.5 12C3.67157 12 3 12.6716 3 13.5V16.5C3 17.3284 3.67157 18 4.5 18H15.5C16.3284 18 17 17.3284 17 16.5V13.5C17 12.6716 16.3284 12 15.5 12H4.5" />
                    </svg>
                </IconTemplate>
            </DxRibbonColorPickerItem>
            <DxRibbonItem IconCssClass="rb-icon rb-icon-bold" />
            <DxRibbonItem IconCssClass="rb-icon rb-icon-italic" />
            <DxRibbonItem IconCssClass="rb-icon rb-icon-underline" />
        </DxRibbonGroup>
    </DxRibbonTab>
    ...
</DxRibbon>

@code {
    string color = "";
    private FontInfo CurrentFont { get; set; } = FontInfo.DefaultFonts[0];
    private IEnumerable<FontInfo> Fonts => FontInfo.DefaultFonts;
    private int CurrentFontSize { get; set; } = 8;
}

Adaptivity Settings

When the ribbon’s width decreases, the component hides group items from right to left 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.

Ribbon with Adaptive Groups

Enable the CollapseInGlobalGroup property to collapse group items into a global drop-down menu.

The Ribbon collapses groups starting from the right-most group. Use the AdaptivePriority property to specify the order in which groups are collapsed (higher values are collapsed first).

Run Demo