DxRibbonColorPaletteItem Class

A ribbon item that displays a color palette.

Assembly: DevExpress.Blazor.v24.2.dll

Declaration

public class DxRibbonColorPaletteItem :
    DxRibbonButtonBase<RibbonColorPaletteRender, RibbonColorPaletteClickEventArgs>

Remarks

The color palette item displays the color palette and allows users to select a color.

...
<DxRibbonColorPaletteItem @bind-Value="CurrentColor" />
...
@code {
    string CurrentColor = "";
}

Ribbon color palette

Use the Value property to specify the item’s value or to bind the value to a data source object. Handle the ValueChanged event to respond to the value change.

Custom Color Palette

Specify the Colors property to populate the drop-down palette with predefined or custom colors.

...
<DxRibbonColorPaletteItem @bind-Value="CurrentColor" 
                          Colors="@DxColorPalettePresets.GetPalette(ColorPalettePresetType.FluentThemeGradient)" />
...
@code {
    string CurrentColor = "";
}

Ribbon color palette

Multiple Color Groups

Populate the Groups property with DxRibbonColorGroup objects to add predefined and custom color groups to the palette.

...
<DxRibbonColorPaletteItem @bind-Value="CurrentColor">
    <Groups>
        <DxRibbonColorGroup Header="Pastel" Colors="@DxColorPalettePresets.GetPalette(ColorPalettePresetType.Pastel)" />
        <DxRibbonColorGroup Header="Aqua" Colors="@AquaColors" />
        <DxRibbonColorGroup Header="Pink" Colors="@PinkColors" />
    </Groups>
</DxRibbonColorPaletteItem>
...
@code {
    string CurrentColor = "";
    public List<string> AquaColors = new List<string> {
        "#184E77", "#1E6091", "#1A759F", "#1A759F", "#34A0A4", "#52B69A", "#76C893", "#99D98C", "#B5E48C", "#D9ED92"
    };
    public List<string> PinkColors = new List<string> {
        "#FF0A54", "#FF477E", "#FF5C8A", "#FF7096", "#FF85A1", "#FF99AC", "#FBB1BD", "#F9BEC7", "#F7CAD0", "#FAE0E4"
};

Ribbon color palette