Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfColorPicker

    Show / Hide Table of Contents

    Class SfColorPicker

    ColorPicker component is a user interface to select and adjust color values. It provides supports for various color specification like Red Green Blue, Hue Saturation Value and Hex codes.

    Inheritance
    System.Object
    SfBaseComponent
    SfColorPicker
    Inherited Members
    SfBaseComponent.Dispose()
    SfBaseComponent.Dispose(Boolean)
    SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)
    Namespace: Syncfusion.Blazor.Inputs
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class SfColorPicker : SfBaseComponent
    Examples

    In the below code example, showcases a basic ColorPicker component.

     
    <SfColorPicker> 
    </SfColorPicker> 

    Constructors

    SfColorPicker()

    Declaration
    public SfColorPicker()

    Properties

    ColorPickerEditContext

    Declaration
    protected EditContext ColorPickerEditContext { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.Forms.EditContext

    ColorPickerParent

    Parent component of ColorPicker.

    Declaration
    protected dynamic ColorPickerParent { get; set; }
    Property Value
    Type Description
    System.Object

    Columns

    Gets or sets a value that indicates the columns to be rendered in palette mode.

    Declaration
    public double Columns { get; set; }
    Property Value
    Type Description
    System.Double

    Accepts a double value. The default value is 10.

    Created

    Gets or sets an event callback that is raised when the SfColorPicker rendering is completed.

    Declaration
    public EventCallback<object> Created { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.Object>

    CssClass

    Gets or sets a value that indicates CSS class string to customize the appearance of color picker.

    Declaration
    public string CssClass { get; set; }
    Property Value
    Type Description
    System.String

    Accepts a CSS class string separated by space to customize the appearance of color picker. The default value is String.Empty.

    Disabled

    Gets or sets a value that indicates whether to enable or disable the color picker.

    Declaration
    public bool Disabled { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if the button component is disabled. The default value is false.

    EnableOpacity

    Gets or sets a value that indicates whether to enable or disable the opacity slider.

    Declaration
    public bool EnableOpacity { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if the opacity slider is enabled. The default value is true.

    EnablePersistence

    Gets or sets a value that indicates whether to persist component's state between page reloads. When set to true, the Value property is persisted.

    Declaration
    public bool EnablePersistence { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if the component's state persistence is enabled. The default value is false.

    Remarks

    Component's Value property will be stored in browser local storage to persist component's state when page reloads.

    EnableRtl

    Gets or sets a value that indicates whether to enable or disable the right to left direction.

    Declaration
    public bool EnableRtl { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if the right to left direction is enabled for the component. The default value is false.

    Inline

    Gets or sets a value that indicates whether to enable to disable the inlide mode color picker.

    Declaration
    public bool Inline { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if the color picker component is rendered as inline. The default value is false.

    Mode

    Gets or sets a value that indicates the mode of color picker to be rendered.

    Declaration
    public ColorPickerMode Mode { get; set; }
    Property Value
    Type Description
    ColorPickerMode

    One of the ColorPickerMode enumeration. The default value is Picker

    Remarks

    If the ColorPickerMode is Picker, the color picker is rendered as a picker. If the ColorPickerMode is Palette, the color picker is rendered as a palette.

    ModeSwitched

    Gets or sets an event callback that is raised when the SfColorPicker mode switch performed.

    Declaration
    public EventCallback<ModeSwitchEventArgs> ModeSwitched { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<ModeSwitchEventArgs>
    Remarks

    You can access the Color Picker item related values using ModeSwitchEventArgs.

    ModeSwitcher

    Gets or sets a value that indicates whether to enable or disable the mode switcher option.

    Declaration
    public bool ModeSwitcher { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if the mode switcher option is enabled. The default value is true.

    NoColor

    Gets or sets a value that indicates whether to enable or disable the no color option.

    Declaration
    public bool NoColor { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if the no color option is enabled. The default value is false.

    Remarks

    No color option is only available in palette mode.

    OnClose

    Gets or sets an event callback that is raised when the SfColorPicker popup is closing.

    Declaration
    public EventCallback<BeforeOpenCloseEventArgs> OnClose { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<BeforeOpenCloseEventArgs>
    Remarks

    You can access the color picker popup related values using BeforeOpenCloseEventArgs.

    OnModeSwitch

    Gets or sets an event callback that is raised before the SfColorPicker mode switching is performed.

    Declaration
    public EventCallback<ModeSwitchEventArgs> OnModeSwitch { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<ModeSwitchEventArgs>
    Remarks

    You can access the Color Picker item related values using ModeSwitchEventArgs.

    OnOpen

    Gets or sets an event callback that is raised when the SfColorPicker popup is opening.

    Declaration
    public EventCallback<BeforeOpenCloseEventArgs> OnOpen { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<BeforeOpenCloseEventArgs>
    Remarks

    you can access the ColorPicker popup related values using BeforeOpenCloseEventArgs.

    Examples
     
    <SfColorPicker OnOpen="@OnOpen"> 
    </SfColorPicker> 
    @code { 
        private void OnOpen(BeforeOpenCloseEventArgs args) { 
            // Write your code here. 
        } 
    } 

    OnTileRender

    Gets or sets an event callback that is raised when the SfColorPicker tile rendering is completed.

    Declaration
    public EventCallback<PaletteTileEventArgs> OnTileRender { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<PaletteTileEventArgs>
    Remarks

    You can customize the color picker tile rendering using PaletteTileEventArgs.

    Opened

    Gets or sets an event callback that is raised when the SfColorPicker popup is opened.

    Declaration
    public EventCallback<OpenEventArgs> Opened { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<OpenEventArgs>
    Remarks

    You can access the SplitButton popup related values using OpenEventArgs.

    Examples
     
    <SfColorPicker Opened="@Opened"> 
    </SfColorPicker> 
    @code { 
        private void Opened(OpenEventArgs args) { 
            // Write your code here. 
        } 
    } 

    PresetColors

    Gets or sets a value that indicates the collection of custom color values that will be rendered as color picker element.

    Declaration
    public Dictionary<string, string[]> PresetColors { get; set; }
    Property Value
    Type Description
    System.Collections.Generic.Dictionary<System.String, System.String[]>
    Remarks

    Preset colors option is only available in palette mode.

    Selected

    Gets or sets an event callback that is raised when the SfColorPicker palette or picker element is clicked.

    Declaration
    public EventCallback<ColorPickerEventArgs> Selected { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<ColorPickerEventArgs>
    Remarks

    You can access the Color Picker item related values using ColorPickerEventArgs.

    ShowButtons

    Gets or sets a value that indicates whether to enable or disable the apply/cancel buttons.

    Declaration
    public bool ShowButtons { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if the apply/cancel buttons were enabled. The default value is true.

    Value

    Gets or sets the color value for color picker. It should be specified as Hex code.

    Declaration
    public string Value { get; set; }
    Property Value
    Type Description
    System.String

    Accepts a string value. The default value is #008000ff.

    ValueChange

    Gets or sets an event callback that is raised while changing the colors.

    Declaration
    public EventCallback<ColorPickerEventArgs> ValueChange { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<ColorPickerEventArgs>
    Remarks

    It will be triggered based on the ShowButtons property. If the property is false, this event will be triggered while selecting the colors. If the property is true, this event will be triggered while apply the selected color.

    ValueChanged

    Gets or sets an event callback that is raised when the SfColorPicker color value changed.

    Declaration
    public EventCallback<string> ValueChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.String>
    Remarks

    You can access the Color Picker item related values using ColorPickerEventArgs.

    ValueExpression

    Specifies the expression for defining the value of the bound.

    Declaration
    public Expression<Func<string>> ValueExpression { get; set; }
    Property Value
    Type Description
    System.Linq.Expressions.Expression<System.Func<System.String>>

    Methods

    BuildRenderTree(RenderTreeBuilder)

    Declaration
    protected override void BuildRenderTree(RenderTreeBuilder __builder)
    Parameters
    Type Name Description
    Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

    FocusAsync()

    Focuses the color picker.

    Declaration
    public Task FocusAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    GetValue(String, ColorValueType)

    Gets color value in specified type.

    Declaration
    public string GetValue(string value = null, ColorValueType type)
    Parameters
    Type Name Description
    System.String value

    Specify the color value.

    ColorValueType type

    Specify the type to which the specified color needs to be converted.

    Returns
    Type Description
    System.String

    The color value in a specific type.

    OnAfterRenderAsync(Boolean)

    Declaration
    protected override Task OnAfterRenderAsync(bool firstRender)
    Parameters
    Type Name Description
    System.Boolean firstRender
    Returns
    Type Description
    System.Threading.Tasks.Task
    Overrides
    SfBaseComponent.OnAfterRenderAsync(Boolean)

    OnInitializedAsync()

    Declaration
    protected override Task OnInitializedAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task
    Overrides
    SfBaseComponent.OnInitializedAsync()

    OnParametersSetAsync()

    Declaration
    protected override Task OnParametersSetAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    Toggle()

    Show/hide color picker popup based on current state of the split button.

    Declaration
    public void Toggle()
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved