generated:catalog.entry.color-picker.title
generated:catalog.entry.color-picker.description
@xngui/components/color-picker@xngui/components/color-pickerchrome:demo.section
chrome:demo.preview
import { Component } from '@angular/core';
import { XColorPicker } from '@xngui/components/color-picker';
import { XForm } from '@xngui/components/form';
import { XFormField } from '@xngui/components/form-field';
@Component({
selector: 'app-example',
imports: [XColorPicker, XForm, XFormField],
templateUrl: './color-picker.component.html',
})
export class ExampleComponent {}
chrome:demo.events.title 1
- changed
{ "value": "oklch(62.3% 0.188 269.8)", "previousValue": "oklch(0.623 0.188 269.815)" }
chrome:demo.api.title
x-color-picker
chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
sizeXSize—Visual size tier — falls back to XConfigService when unset.
densityXDensity—Spacing offsets — orthogonal to `size`; falls back to XConfigService when unset.
lookXFormLook—Field chrome — outline, fill, flat, or none; falls back to XForm then XConfigService.
formatXColorPickerFormat'oklch'Serialized output format for the bound value — `oklch`, `hex`, or `rgba`.
placementXPlacement—Popover placement for the OKLCH picker panel — falls back to XConfigService when unset.
presetsreadonly XColorPickerPreset[]X_COLOR_PICKER_PRESETSSwatch presets shown in the picker panel.
eyedropperbooleanfalseShow the screen color picker when the browser supports the EyeDropper API.
disabledbooleanfalsePrevents interaction and sets `aria-disabled` on the field.
readonlybooleanfalseValue-only input — user cannot change when true.
invalidbooleanfalseMarks the control invalid for styling and ARIA.
requiredbooleanfalseMarks the control as required for validation and ARIA.
namestring''Native form control `name` attribute.
controlIdstring—Native `id` on the control; falls back to `name`, then a generated id.
ariaLabelstring—Accessible name when no visible label is provided.