Table of Contents

Class TwColorPicker

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

A color picker component that supports multiple color formats (Hex, RGB, HSL) with optional alpha channel. Provides both a visual color picker dialog and text input for manual color entry.

public class TwColorPicker : TwPopoverPickerComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent, ITwInputComponent, IAsyncDisposable
Inheritance
TwColorPicker
Implements
Inherited Members

Remarks

Built on TwPopoverPickerComponentBase, the same popover open/close, focus-trap and outside-click plumbing shared with TwDatePicker/TwTimePicker. Unlike those pickers, the popover here opens from a click on the swatch button rather than focusing the trigger textfield - TwBlazor.Components.TwColorPicker.ShowDialogAsync drives the shared isFocused/PendingOpenFocus state directly instead of going through OnFocusAsync().

Constructors

TwColorPicker() 

public TwColorPicker()

Properties

BindEvent

Gets or sets the event name for binding. Default is "onchange".

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

Property Value

string

OnFocus

Gets or sets the event callback that is invoked when the input receives focus.

[Parameter]
public EventCallback<FocusEventArgs> OnFocus { get; set; }

Property Value

EventCallback<FocusEventArgs>

OutputFormat

Gets or sets the output format for the color value (Hex, RGB, or HSL). Default is Hex.

[Parameter]
public ColorMode OutputFormat { get; set; }

Property Value

ColorMode

ShowAlpha

Gets or sets whether to show and allow editing of the alpha (transparency) channel. Default is false.

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

Property Value

bool

ShowModeSwitch

Gets or sets whether to show the mode switch button to toggle between color formats. Default is false.

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

Property Value

bool

Value

Gets or sets the current color value. Supports Hex, RGB, and HSL formats. Default is "#000000" (black).

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

Property Value

string

ValueChanged

Gets or sets the event callback that is invoked when the color value changes.

[Parameter]
public EventCallback<string> ValueChanged { get; set; }

Property Value

EventCallback<string>

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

OnAfterRenderAsync(bool)

Determines, via PreferNativePicker or JS-based device detection, whether the browser's native color input should be used for the swatch preview instead of the custom popover dialog.

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender bool

Returns

Task

OnInitialized()

Method invoked when the component is ready to start, having received its initial parameters from its parent in the render tree.

protected override void OnInitialized()

OnParametersSet()

Invoked when the component's parameters have been set. Ensures that the component has a unique identifier by generating one if none is provided.

protected override void OnParametersSet()

Remarks

If the component's identifier is not set, a unique ID is generated based on the component's type name (with a 'Tw' prefix removed if present) and a GUID. This helps ensure that each component instance can be uniquely identified, which is useful for scenarios such as associating labels with form elements or targeting elements in client-side scripts.

Edit this page