ColorPicker | Neural UI v2

Uso

value es una cadena de color. mode cambia la notación editable; showAlpha permite transparencia y showChannels muestra los canales numéricos. valueChange actualiza el modelo durante la edición; valueCommitted identifica una edición finalizada. El color es un dato: no modifica el tema automáticamente.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Valor actual: "#175d95"

Eventos: 0

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

Valor actual: "#175d95"

Eventos: 0

disabled

readonly

invalid

showAlpha

showChannels

Opciones avanzadas · 9

<neu-color-picker
  [value]="value()"
  (valueChange)="value.set($event)"
  [mode]="'hex'"
  [showAlpha]="false"
  [showChannels]="true"
  [disabled]="false"
  [readonly]="false"
  [invalid]="false"
  (valueCommitted)="record('valueCommitted', $event)"
  [ariaLabel]="'Color de acento'"
/>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

import { signal } from '@angular/core';

export const value = signal("#175d95");

Inputs de datos, callbacks y configuración estructurada

Estado y eventos

value es una cadena de color. mode cambia la notación editable; showAlpha permite transparencia y showChannels muestra los canales numéricos. valueChange actualiza el modelo durante la edición; valueCommitted identifica una edición finalizada. El color es un dato: no modifica el tema automáticamente.

Accesibilidad y teclado

Tab alcanza el activador y los campos de canales. Abre el selector con Intro/Espacio y ciérralo con Escape.

Tecla	Acción
`Tab`	Recorre el activador y los campos de color disponibles.
`Enter`	En el activador, abre el selector de color.
`Space`	En el activador, abre el selector de color.
`Escape`	Cierra el selector abierto.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`ariaDescribedBy`	`string`	`''`	`[ariaDescribedBy]`	IDs de los elementos que describen el control, separados por espacios.
`ariaLabel`	`string`	`''`	`[ariaLabel]`	Nombre accesible del control o región.
`ariaLabelledBy`	`string`	`''`	`[ariaLabelledBy]`	Ids de elementos existentes que dan nombre al control o región.
`dirty`	`boolean`	`false`	`[dirty]`	Estado del formulario que indica que el usuario ha cambiado el valor.
`disabled`	`boolean`	`false`	`[disabled]`	Impide interactuar con este control.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Errores de validación proporcionados por el formulario o la aplicación.
`hidden`	`boolean`	`false`	`[hidden]`	Oculta el control según el estado del formulario.
`inputId`	`string`	`''`	`[inputId]`	Id estable del control, generado si se omite; permite asociar etiquetas o descripciones.
`invalid`	`boolean`	`false`	`[invalid]`	Muestra el estado inválido; no añade una regla de validación.
`mode`	`NeuColorMode`	`'hex'`	`[mode]`	Notación de color utilizada por los editores: hex, rgb, hsl u oklch.
`pending`	`boolean`	`false`	`[pending]`	Estado del formulario que indica que hay una validación asíncrona pendiente.
`readonly`	`boolean`	`false`	`[readonly]`	Mantiene visible el valor aplicado, pero impide editarlo.
`required`	`boolean`	`false`	`[required]`	Marca el campo como obligatorio; utiliza un validador del formulario para exigirlo.
`showAlpha`	`boolean`	`false`	`[showAlpha]`	Permite editar la transparencia del color.
`showChannels`	`boolean`	`false`	`[showChannels]`	Muestra los editores numéricos de canales en la notación elegida.
`touched`	`boolean`	`false`	`[touched]`	Estado del formulario que indica que el control ha sido visitado.

Models

Un modelo admite [(propiedad)]="signal" o la pareja [propiedad] y (propiedadChange). Elige una de las dos formas, no ambas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`value`	`string`	`DEFAULT_COLOR_VALUE`Valor derivado	`[(value)]`	Cadena de color aplicada en una notación CSS admitida.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Nombre	Valor emitido	Uso en el template	Descripción
`closed`	`void`	`(closed)="onClosed($event)"`	Informa del cierre de este componente. El tipo indica los datos emitidos.
`opened`	`void`	`(opened)="onOpened($event)"`	Informa de la apertura de este componente. El tipo indica los datos emitidos.
`touch`	`void`	`(touch)="onTouch($event)"`	Notifica al formulario que el control ha sido visitado; no es un cambio de valor.
`valueCommitted`	`string`	`(valueCommitted)="onValueCommitted($event)"`	Informa de una edición finalizada. Consulta el tipo: algunos controles emiten el valor; InlineEditor emite previousValue y value.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Este componente no expone proyección de contenido ni templates públicos de personalización.

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

NeuColorModeTypeScript

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-error`	Color del campo no válido o de la acción de peligro	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#dc2626`
`--neu-primary`	Color de marca en controles activos y énfasis	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-radius`	Radio de las esquinas del control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`8px`
`--neu-surface-2`	Superficies secundarias y filas alternas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#f1f5f9`
`--neu-border-color`	Valor del tema heredado que utiliza este componente	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`var(--neu-border)`
`--neu-info-text`	Valor del tema heredado que utiliza este componente	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#1d4ed8`
`--neu-radius-sm`	Radio de esquina	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`6px`
`--neu-radius-xl`	Radio de esquina	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`16px`

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.