Color Picker

Overview

ColorPicker renders NaviusColorPicker, the headless primitive that owns the color model and pointer math, and composes its Area (saturation/value), HueSlider, optional AlphaSlider, Swatch preview, hex Field, and an optional preset Swatches grid into one inline panel. This is the brain’s inline composition; the brain also ships a popover-triggered variant not exposed here.

Install

navius add color-picker --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsColorPicker @bind-Value="_color" AlphaEnabled="true"
                 Swatches="@(new[] { "#ef4444", "#3b82f6", "#22c55e" })" />

@code {
    private string _color = "#3b82f6";
}

Parts and props

ColorPicker is a single control with no consumer-facing part tree. Format, AlphaEnabled, Disabled, ReadOnly, Name, and Attributes pass through to NaviusColorPicker unchanged. The styled wrapper adds:

Prop	Type	Default	Description
Value	string?	null	Controlled color. Bind with @bind-Value; forwarded to the primitive only when set.
DefaultValue	string?	null	Uncontrolled initial color.
Swatches	IReadOnlyList<string>?	null	Optional preset colors rendered as a swatch grid.

Styling surface

Attributes on ZitsColorPicker is merged onto the root panel via Cn.Merge, with the caller’s classes applied last. The Area, HueSlider, AlphaSlider, and Swatches classes target the primitive’s own thumb/item selectors internally and are not independently overridable per-instance.

Parameter	Values
Format	hex (default), see the primitive manifest for the full set

Data attribute hooks

Part	Attribute	Description
Root	data-disabled	Present when Disabled is true, emitted by NaviusColorPicker; the root panel dims and disables pointer events on it.
Field	data-invalid	Present when the typed hex value fails to parse, emitted by NaviusColorPickerField.
Swatch item	data-selected	Present on the preset swatch matching the current value, emitted by NaviusColorPickerSwatches.

Underlying primitives

• NaviusColorPicker