Handle No Color Support in Blazor Color Picker Component

1 Dec 20254 minutes to read

The Color Picker supports a no color option. When the No color tile in the palette is selected, the chosen color is cleared (treated as no color/empty).

Default no color

Enable the built-in no color tile by setting the NoColor property to true. In the following example, the first palette tile is the No color tile. Selecting it clears the selection and applies no color.

@using Syncfusion.Blazor.Inputs

<div id="preview" style="@colorValue"></div>
<SfColorPicker NoColor="true" Mode="ColorPickerMode.Palette" ShowButtons="false" ModeSwitcher="false" ValueChange="@Changed"></SfColorPicker>

@code {
    private string colorValue = "background-color: #008000";
    private void Changed(ColorPickerEventArgs args)
    {
        colorValue = "background-color:" + args.CurrentValue.Hex;
    }
}

<style>
    #preview {
        border: 1px solid;
        height: 40px;
        margin-bottom: 10px;
        width: 300px;
    }
</style>

If the NoColor property is enabled, make sure to disable the ModeSwitcher property.

Custom no color

The following example demonstrates a custom no color option alongside a palette rendered inside a SplitButton. Selecting No color applies a transparent background.

@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.SplitButtons

<div id="preview" style="@colorValue"></div>
<SfSplitButton @ref="splitBtn" CssClass="color-picker">
    <ChildContent>
        @{
            var spanStyle = colorValue + "; display: block; height: 2px";
        }
        <span class="e-icons e-picker"></span>
        <span style="@spanStyle"></span>
    </ChildContent>
    <PopupContent>
        <ul class="e-dropdown-menu" tabindex="0">
            <li class="e-item e-palette-item">
                <SfColorPicker Columns="4" Inline="true" Mode="ColorPickerMode.Palette" PresetColors="@customColors" ShowButtons="false" ModeSwitcher="false" ValueChange="@Changed"></SfColorPicker>
            </li>
            <li class="e-item e-separator"></li>
            <li class="e-item" @onclick="@NoColorHandler" id="no-color" tabindex="-1">
                <span class="e-menu-icon e-nocolor"></span>
                No color
            </li>
        </ul>
    </PopupContent>
</SfSplitButton>

@code {
    private SfSplitButton splitBtn;
    private string colorValue = "background-color: #008000";
    private Dictionary<string, string[]> customColors = new Dictionary<string, string[]> {
        {
            "Custom", new string[] {"#f44336", "#e91e63", "#9c27b0", "#673ab7", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107"}
        }
    };
    private void Changed(ColorPickerEventArgs args)
    {
        colorValue = "background-color:" + args.CurrentValue.Hex;
        splitBtn.Toggle();
    }
    private void NoColorHandler()
    {
        colorValue = "background-color: transparent";
        splitBtn.Toggle();
    }
}

<style>
    .e-picker::before {
        content: '\e35c'
    }
    #preview {
        border: 1px solid;
        height: 40px;
        width: 300px;
        margin-bottom: 10px;
    }
    .color-picker.e-dropdown-popup ul {
        padding: 0;
    }
    .color-picker.e-dropdown-popup ul .e-container {
        box-shadow: none;
    }
    .color-picker.e-dropdown-popup .e-container .e-custom-palette .e-palette {
        padding-bottom: 2px;
    }
    .color-picker.e-dropdown-popup ul .e-item.e-palette-item {
        height: auto;
        padding: 0;
    }
    .color-picker.e-dropdown-popup ul .e-item .e-menu-icon.e-nocolor {
        height: 22px;
        margin-top: 8px;
        width: 22px;
        background: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');
    }
</style>