Table of Contents

Class TwColorPickerBody

Namespace
TwBlazor.Components.ColorPicker
Assembly
TwBlazor.dll

The internal color picker dialog component that provides the visual color selection interface. Includes a color selector, hue slider, optional alpha slider, and color input fields.

public class TwColorPickerBody : TwBlazorComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent
Inheritance
TwColorPickerBody
Implements
Inherited Members

Constructors

TwColorPickerBody()

public TwColorPickerBody()

Properties

JSRuntime

Gets or sets the JavaScript runtime instance used for interop operations.

[Inject]
public IJSRuntime JSRuntime { get; set; }

Property Value

IJSRuntime

OnClose

Gets or sets the event callback that is invoked when the color picker dialog is closed. The boolean parameter indicates whether the selection was confirmed (true) or cancelled (false).

[Parameter]
public EventCallback<bool> OnClose { get; set; }

Property Value

EventCallback<bool>

OutputFormat

Gets or sets the output format for the color value when notifying parent components. 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. When enabled, displays an alpha slider and includes alpha values in output.

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

Property Value

bool

ShowModeSwitch

Gets or sets whether to show the mode switch button to toggle between Hex, RGB, and HSL input formats. Default is true.

[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 defaultColor (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>

Variant

Gets or sets the visual variant of the input controls within the color picker.

[Parameter]
public InputVariant Variant { get; set; }

Property Value

InputVariant

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

OnAfterRenderAsync(bool)

Attaches a native keydown listener (via twSlider.preventScrollKeys) to each role="slider" element so Arrow/Home/End change its value without also triggering the browser's native scroll for those keys. Deliberately not done via a Razor @onkeydown:preventDefault attribute, since that would unconditionally block every key

  • including Tab - on the element, trapping keyboard focus inside the picker.
protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender bool

Returns

Task

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.