ColorPicker Seletor de Cores
Introdução
Um controle de entrada avançado que permite aos usuários selecionar e personalizar cores por meio de uma área de saturação/brilho, controles deslizantes de matiz e alfa, entradas de canais editáveis (HEX, RGBA, HSLA) e amostras predefinidas.
O componente ColorPicker está totalmente integrado como um bloco interativo colorPicker no Page Builder, permitindo que autores de conteúdo e desenvolvedores configurem facilmente rótulos, estados padrão, modos de gatilho Popover e escalas de tamanho diretamente no CMS.
Uso
Estes exemplos ilustram como os editores de conteúdo vinculam e estruturam componentes de seletor de cores.
1. Personalizador embutido (padrão Hex padrão)
Um seletor de cores embutido que ocupa espaço em nível de bloco no layout da página, renderizando a área de saturação, os controles deslizantes de matiz e as entradas de canais imediatamente no carregamento.
{
"type": "colorPicker",
"label": "Brand Primary Color",
"defaultValue": "#7c3aed",
"interactive": true
}
2. Gatilho de amostra Popover com fechamento ao selecionar
Uma opção de design elegante e que economiza espaço que renderiza um pequeno gatilho de amostra colorida. Clicar na amostra abre o painel do seletor de cores dentro de uma camada popover, fechando automaticamente após selecionar uma amostra de cor predefinida.
{
"type": "colorPicker",
"label": "Choose Theme Accent",
"defaultValue": "#22c55e",
"trigger": true,
"closeOnSelect": true,
"interactive": true
}
3. Estado do seletor desabilitado
Demonstra um personalizador de cores bloqueado ou inativo. Isso desabilita todos os controles deslizantes, canais de entrada, botões de seleção de amostras e gatilhos.
{
"type": "colorPicker",
"label": "Accent Tint (Inactive)",
"defaultValue": "#e2e8f0",
"disabled": true,
"interactive": true
}
Propriedades
| Propriedade | Tipo de campo CMS | Padrão | Descrição / Opções suportadas |
|---|---|---|---|
Texto do rótulo (label) | string | - | Texto visual complementar opcional posicionado acima da área do seletor de cores ou do gatilho popover. |
Valor padrão (defaultValue) | string | "#7c3aed" | Cor ativa inicial. Aceita strings no formato hex (ex. "#7c3aed", "#3b82f6"). |
Gatilho (Popover) (trigger) | boolean | false | Quando true, substitui o layout completo do seletor embutido por um cartão popover flutuante ancorado a um botão de amostra colorida. |
Fechar ao selecionar (closeOnSelect) | boolean | false | Quando true, fecha o popover imediatamente após selecionar uma amostra predefinida. (Aplicável apenas quando trigger é true). |
Desabilitado (disabled) | boolean | false | Congela todos os controles deslizantes visuais, seleções de predefinições personalizadas, conta-gotas e campos de entrada. |
Escala de tamanho (size) | select | "md" | Escala a largura e a altura da placa de saturação, das amostras e das margens. • Opções: "sm", "md", "lg". |
Notas para desenvolvedores e acessibilidade
- Ilha de hidratação inteligente: Para manipular o arraste do mouse na grade de saturação e o posicionamento dinâmico dos controles deslizantes, o ColorPicker hidrata automaticamente como uma ilha Preact nas máquinas cliente.
- Integração de formulário: Ele emite um
<input type="hidden">nativo oculto que carrega o valor de string hex da cor ativa. Isso garante que envios de formulário nativos capturem os valores ativos imediatamente. - Controles deslizantes acessíveis Aria: Todos os campos deslizantes, placas deslizantes e campos de entrada carregam atributos ARIA semânticos (
role="slider",aria-valuemin,aria-valuemax,aria-valuenow). A navegação padrão por teclado (setas esquerda/direita/cima/baixo) é totalmente suportada nativamente. - Conversões precisas: As conversões entre formatos HSVA, HSL, RGB e Hex ocorrem internamente no nível de renderização. Isso evita deriva de cor e incompatibilidades de arredondamento entre os formatos de entrada selecionados.