DxRibbonColorPaletteItem.ShowNoColorTile Property

Specifies whether the color palette item shows the No Color tile.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public bool ShowNoColorTile { get; set; }

Property Value

Type	Description
Boolean	true to display the No Color tile; false to hide the tile.

Remarks

Set the ShowNoColorTile property to true to display the No Color tile. Users can click the tile to reset the selected color.

<style>
    .palette-style {
        background: #FDF2F4;
    }
</style>
...
<DxRibbonColorPaletteItem @bind-Value="color" 
                          PaletteCssClass="palette-style" 
                          Colors="@Colors" 
                          ShowNoColorTile="true">
    <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>
</DxRibbonColorPaletteItem>
...

@code {
    string color = "";

    public List<string> Colors = new List<string> {
        "#2B0000", "#4F0000", "#740000", "#980000", "#B50000", "#D30000", "#EB1D1D", "#F50F0F", "#FF0000", "#FF0000",
        "#9C191B", "#AC1C1E", "#BD1F21", "#D02224", "#DD2C2F", "#E35053", "#E66063", "#EC8385", "#F1A7A9", "#F6CACC",
        "#FF0A54", "#FF477E", "#FF5C8A", "#FF7096", "#FF85A1", "#FF99AC", "#FBB1BD", "#F9BEC7", "#F7CAD0", "#FAE0E4"
    };
}