Blazor
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Handle No Color Support in Blazor ColorPicker component

28 Jul 2021 / 2 minutes to read

The Color Picker component supports no color functionality. By clicking the no color tile from palette, the selected color becomes empty and considered as no color has been selected from Color Picker.

Default no color

To achieve this, set NoColor property as true.

In the following sample, the first tile of the color palette represents the no color tile. By clicking the no color tile you can achieve the above functionalities.

Copied to clipboard
@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>

Output be like color-picker

Custom No Color

The following sample show the color palette with custom no color option.

Copied to clipboard
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.SplitButtons

<div id="preview" style="@colorValue"></div>
<SfSplitButton @ref="splitBtn" IconCss="e-icons e-picker" CssClass="color-picker">
    <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>

Output be like color-picker

Previous
Next