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
Microsoft.AspNetCore.Components.Forms.EditContext

ColorPickerParent

Parent component of ColorPicker.

Declaration

protected dynamic ColorPickerParent { get; set; }

Property Value

Type
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>	An event callback function.

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
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>	An event callback function.

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>	An event callback function.

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>	An event callback function.

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>	An event callback function.

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>	An event callback function.

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
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>	An event callback function.

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.

ShowRecentColors

Specifies the list of colors that will be displayed on the recent colors section of the color picker user interface in palette mode.

Declaration

public bool ShowRecentColors { get; set; }

Property Value

Type	Description
System.Boolean	Accepts a bool values. The default value is false.

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>	An event callback function.

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>	An event callback function.

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
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
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
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Declaration

protected override Task OnInitializedAsync()

Returns

Type
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task

Toggle()

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

Declaration

public void Toggle()