ColorPicker Selector de Color
Introducción
Un control de entrada avanzado que permite a los usuarios seleccionar y personalizar colores mediante un área de saturación/brillo, controles deslizantes de tono y alfa, entradas de canales editables (HEX, RGBA, HSLA) y muestras predefinidas.
El componente ColorPicker está totalmente integrado como un bloque interactivo colorPicker en el Page Builder, permitiendo a los autores de contenido y desarrolladores configurar fácilmente etiquetas, estados predeterminados, modos de disparador Popover y escalas de tamaño directamente dentro del CMS.
Uso
Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran componentes de selector de color.
1. Personalizador en línea (valor Hex predeterminado estándar)
Un selector de color en línea que ocupa espacio a nivel de bloque en el diseño de la página, renderizando el campo de saturación, los controles de tono y las entradas de canales inmediatamente al cargar.
{
"type": "colorPicker",
"label": "Brand Primary Color",
"defaultValue": "#7c3aed",
"interactive": true
}
2. Disparador de muestra Popover con cierre al seleccionar
Una opción de diseño elegante y que ahorra espacio que renderiza un pequeño disparador de muestra de color. Al hacer clic en la muestra se abre el panel del selector de color dentro de una capa popover, cerrándose automáticamente al seleccionar una muestra de color predefinida.
{
"type": "colorPicker",
"label": "Choose Theme Accent",
"defaultValue": "#22c55e",
"trigger": true,
"closeOnSelect": true,
"interactive": true
}
3. Estado de selector deshabilitado
Demuestra un personalizador de color bloqueado o inactivo. Esto deshabilita todos los controles deslizantes, canales de entrada, botones de selección de muestras y disparadores.
{
"type": "colorPicker",
"label": "Accent Tint (Inactive)",
"defaultValue": "#e2e8f0",
"disabled": true,
"interactive": true
}
Propiedades
| Propiedad | Tipo de campo CMS | Predeterminado | Descripción / Opciones admitidas |
|---|---|---|---|
Texto de etiqueta (label) | string | - | Texto visual complementario opcional posicionado encima del área del selector de color o del disparador popover. |
Valor predeterminado (defaultValue) | string | "#7c3aed" | Color activo inicial. Acepta cadenas en formato hex (p. ej. "#7c3aed", "#3b82f6"). |
Disparador (Popover) (trigger) | boolean | false | Cuando es true, reemplaza el diseño completo del selector en línea con una tarjeta popover flotante anclada a un botón de muestra de color. |
Cerrar al seleccionar (closeOnSelect) | boolean | false | Cuando es true, cierra el popover inmediatamente después de seleccionar una muestra predefinida. (Solo aplicable cuando trigger es true). |
Deshabilitado (disabled) | boolean | false | Congela todos los controles deslizantes visuales, selecciones de preajustes personalizados, cuentagotas y campos de entrada. |
Escala de tamaño (size) | select | "md" | Escala el ancho y alto del tablero de saturación, las muestras y los márgenes. • Opciones: "sm", "md", "lg". |
Notas para desarrolladores y accesibilidad
- Isla de hidratación inteligente: Para manejar el arrastre del mouse en la cuadrícula de saturación y el posicionamiento dinámico de los controles deslizantes, el ColorPicker se hidrata automáticamente como una isla de Preact en las máquinas cliente.
- Integración de formularios: Emite un
<input type="hidden">nativo oculto que transporta el valor de cadena hex del color activo. Esto garantiza que los envíos de formularios nativos capturen los valores activos de forma inmediata. - Controles deslizantes accesibles Aria: Todos los campos deslizantes, tableros deslizantes y campos de entrada llevan atributos ARIA semánticos (
role="slider",aria-valuemin,aria-valuemax,aria-valuenow). La navegación estándar con teclado (flechas izquierda/derecha/arriba/abajo) es totalmente compatible de forma nativa. - Conversiones precisas: Las conversiones entre formatos HSVA, HSL, RGB y Hex ocurren internamente a nivel de render. Esto evita derivas de color y discrepancias de redondeo entre los formatos de entrada seleccionados.