Class RadzenColorPicker

A color picker component that allows users to select colors through various input methods including color palette, RGB sliders, hex input, and predefined swatches. RadzenColorPicker provides a comprehensive color selection interface with alpha channel support. Displays a button showing the current color. Clicking opens a popup with multiple color selection methods including visual picker (click on hue/saturation gradient to select colors visually), hue/alpha sliders to fine-tune hue and transparency, RGB input to enter specific Red/Green/Blue values (0-255), hex input to enter hex color codes (#RRGGBB or #RRGGBBAA), and predefined swatches for quick selection. The Value is a hex color string (e.g., "#FF0000" for red, "#FF0000AA" for semi-transparent red). Supports alpha channel (transparency) in RGBA format. Use for applications requiring color customization like themes, charts, or design tools.

Inheritance

object

ComponentBase

RadzenComponent

FormComponent<string>

RadzenColorPicker

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

IRadzenFormComponent

Inherited Members

FormComponent<string>._value

FormComponent<string>.Dispose()

FormComponent<string>.GetValue()

FormComponent<string>.OnContextMenu(MouseEventArgs)

FormComponent<string>.GetClassList(string)

FormComponent<string>.FocusAsync()

FormComponent<string>.Name

FormComponent<string>.TabIndex

FormComponent<string>.Placeholder

FormComponent<string>.Disabled

FormComponent<string>.EditContext

FormComponent<string>.Form

FormComponent<string>.ValueChanged

FormComponent<string>.HasValue

FormComponent<string>.IsBound

FormComponent<string>.Value

FormComponent<string>.Change

FormComponent<string>.FieldIdentifier

FormComponent<string>.ValueExpression

FormComponent<string>.FormFieldContext

FormComponent<string>.CurrentPlaceholder

RadzenComponent.OnMouseEnter()

RadzenComponent.OnMouseLeave()

RadzenComponent.GetCssClass()

RadzenComponent.GetId()

RadzenComponent.Debounce(Func<Task>, int)

RadzenComponent.OnAfterRenderAsync(bool)

RadzenComponent.RaiseContextMenu(MouseEventArgs)

RadzenComponent.RaiseMouseEnter()

RadzenComponent.AddContextMenu()

RadzenComponent.RaiseMouseLeave()

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenColorPicker : FormComponent<string>, IComponent, IHandleEvent, IHandleAfterRender, IDisposable, IRadzenFormComponent

Examples

Basic color picker:

<RadzenColorPicker @bind-Value=@backgroundColor />
@code {
    string backgroundColor = "#FF5733";
}

Color picker with predefined swatches:

<RadzenColorPicker @bind-Value=@color Change=@OnColorChange>
    <RadzenColorPickerItem Value="#FF0000" />
    <RadzenColorPickerItem Value="#00FF00" />
    <RadzenColorPickerItem Value="#0000FF" />
</RadzenColorPicker>

Constructors

RadzenColorPicker()

A color picker component that allows users to select colors through various input methods including color palette, RGB sliders, hex input, and predefined swatches. RadzenColorPicker provides a comprehensive color selection interface with alpha channel support. Displays a button showing the current color. Clicking opens a popup with multiple color selection methods including visual picker (click on hue/saturation gradient to select colors visually), hue/alpha sliders to fine-tune hue and transparency, RGB input to enter specific Red/Green/Blue values (0-255), hex input to enter hex color codes (#RRGGBB or #RRGGBBAA), and predefined swatches for quick selection. The Value is a hex color string (e.g., "#FF0000" for red, "#FF0000AA" for semi-transparent red). Supports alpha channel (transparency) in RGBA format. Use for applications requiring color customization like themes, charts, or design tools.

Declaration

public RadzenColorPicker()

Examples

Basic color picker:

<RadzenColorPicker @bind-Value=@backgroundColor />
@code {
    string backgroundColor = "#FF5733";
}

Color picker with predefined swatches:

<RadzenColorPicker @bind-Value=@color Change=@OnColorChange>
    <RadzenColorPickerItem Value="#FF0000" />
    <RadzenColorPickerItem Value="#00FF00" />
    <RadzenColorPickerItem Value="#0000FF" />
</RadzenColorPicker>

Properties

AlphaText

Gets or sets the alpha label text.

Declaration

[Parameter]
public string AlphaText { get; set; }

Property Value

Type	Description
string	The alpha text.

BlueText

Gets or sets the blue color label text.

Declaration

[Parameter]
public string BlueText { get; set; }

Property Value

Type	Description
string	The blue text.

ButtonText

Gets or sets the button text.

Declaration

[Parameter]
public string ButtonText { get; set; }

Property Value

Type	Description
string	The button text.

ChildContent

Gets or sets the child content.

Declaration

[Parameter]
public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
RenderFragment	The child content.

Close

Gets or sets the close callback.

Declaration

[Parameter]
public EventCallback Close { get; set; }

Property Value

Type	Description
EventCallback	The close callback.

GreenText

Gets or sets the green color label text.

Declaration

[Parameter]
public string GreenText { get; set; }

Property Value

Type	Description
string	The green text.

HexText

Gets or sets the hexadecimal color label text.

Declaration

[Parameter]
public string HexText { get; set; }

Property Value

Type	Description
string	The hexadecimal text.

Icon

Gets or sets the icon.

Declaration

[Parameter]
public string Icon { get; set; }

Property Value

Type	Description
string	The icon.

IconColor

Gets or sets the icon color.

Declaration

[Parameter]
public string IconColor { get; set; }

Property Value

Type	Description
string	The icon color.

Open

Gets or sets the open callback.

Declaration

[Parameter]
public EventCallback Open { get; set; }

Property Value

Type	Description
EventCallback	The open callback.

PopupRenderMode

Gets or sets the render mode.

Declaration

[Parameter]
public PopupRenderMode PopupRenderMode { get; set; }

Property Value

Type	Description
PopupRenderMode	The render mode.

RedText

Gets or sets the red color label text.

Declaration

[Parameter]
public string RedText { get; set; }

Property Value

Type	Description
string	The red text.

ShowButton

Gets or sets a value indicating whether button is shown.

Declaration

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

Property Value

Type	Description
bool	true if button shown; otherwise, false.

ShowColors

Gets or sets a value indicating whether colors are shown.

Declaration

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

Property Value

Type	Description
bool	true if colors are shown; otherwise, false.

ShowHSV

Gets or sets a value indicating whether HSV is shown.

Declaration

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

Property Value

Type	Description
bool	true if HSV is shown; otherwise, false.

ShowRGBA

Gets or sets a value indicating whether RGBA is shown.

Declaration

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

Property Value

Type	Description
bool	true if RGBA is shown; otherwise, false.

ToggleAriaLabel

Gets or sets the toggle popup aria label text.

Declaration

[Parameter]
public string ToggleAriaLabel { get; set; }

Property Value

Type	Description
string	The toggle popup aria label text.

Methods

BuildRenderTree(RenderTreeBuilder)

A color picker component that allows users to select colors through various input methods including color palette, RGB sliders, hex input, and predefined swatches. RadzenColorPicker provides a comprehensive color selection interface with alpha channel support. Displays a button showing the current color. Clicking opens a popup with multiple color selection methods including visual picker (click on hue/saturation gradient to select colors visually), hue/alpha sliders to fine-tune hue and transparency, RGB input to enter specific Red/Green/Blue values (0-255), hex input to enter hex color codes (#RRGGBB or #RRGGBBAA), and predefined swatches for quick selection. The Value is a hex color string (e.g., "#FF0000" for red, "#FF0000AA" for semi-transparent red). Supports alpha channel (transparency) in RGBA format. Use for applications requiring color customization like themes, charts, or design tools.

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

GetComponentCssClass()

Gets the component CSS class.

Declaration

protected override string GetComponentCssClass()

Returns

Type	Description
string

Overrides

RadzenComponent.GetComponentCssClass()

OnInitialized()

Called by the Blazor runtime.

Declaration

protected override void OnInitialized()

Overrides

RadzenComponent.OnInitialized()

SetParametersAsync(ParameterView)

Sets the parameters asynchronous.

Declaration

public override Task SetParametersAsync(ParameterView parameters)

Parameters

Type	Name	Description
ParameterView	parameters	The parameters.

Returns

Type	Description
Task	Task.

Overrides

FormComponent<string>.SetParametersAsync(ParameterView)

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

IRadzenFormComponent