A entrada colorpicker permite uma seleção avançada de cores — incluindo suporte ao canal alfa. Ela suporta cores nos formatos Hex, HSLA e RGBA e pode ser configurada para fornecer uma lista pré-definida de cores.
Mais importante, ao contrário da entrada nativa color, o colorpicker oferece uma experiência de usuário consistente, previsível e acessível em navegadores e sistemas operacionais.
A entrada colorpicker é totalmente navegável pelo teclado e vem com marcação acessível.
O colorpicker suporta formatos em Hex, HSLA e RGBA. Você pode definir seu formato desejado com a propriedade format e os valores de cores do colorpicker serão retornados nesse formato. Seu formato escolhido também será a configuração padrão para os campos de entrada que aparecem no painel do colorpicker.
Pode haver momentos em que você deseja mostrar um formato aos usuários como padrão, mas retornar um formato diferente. Você pode usar a propriedade value-format para especificar um formato de valor de retorno independente da propriedade format.
As amostras são fornecidas usando a propriedade options e usam a mesma API options que as entradas select, dropdown, autocomplete e taglist do FormKit.
Aqui está um conjunto simples de amostras usando a propriedade options e fornecendo-a com um array plano de valores de cores. Seus valores fornecidos podem estar em qualquer formato de cor suportado (Hex, HSLA e RGBA) e serão automaticamente convertidos para o format especificado do colorpicker, que por padrão é Hex.
O colorpicker também suporta options agrupadas. Isso permite que você crie conjuntos de amostras dentro do seletor de cores agrupadas sob um título comum.
Você pode criar um color-picker "apenas amostras" usando as propriedades panel-controls e panel-format e configurando-as como false.
Ao mostrar apenas amostras no modo pop-over (o padrão), adicionar a propriedade close-on-select fechará o pop-over quando uma amostra for selecionada.
Se os swatches fornecidos através da propriedade options possuem labels, então você pode chamar node.input() com um nome de swatch e a cor associada será definida para você.
A entrada colorpicker suporta a API EyeDropper nativa do navegador. Se o EyeDropper for suportado em seu navegador e você não tiver desativado o EyeDropper definindo a propriedade eye-dropper como false, então você verá um botão de conta-gotas à direita dos controles deslizantes de matiz e alfa.
Por padrão, uma entrada colorpicker permitirá colar quaisquer valores de cor válidos enquanto o foco do usuário estiver em qualquer lugar da entrada. Os valores serão convertidos imediatamente para o seu format desejado.
Você pode desativar a capacidade de colar um valor definindo a propriedade allow-paste como false.
| Prop | Type | Padrão | Descrição |
|---|---|---|---|
| format | string | hex | O formato que a entrada colorpicker deve mostrar na pré-visualização da entrada e ser a configuração padrão para a entrada do painel de seleção. Pode ser definido como hex, hsla ou rgba. |
| value-format | string | undefined | O formato que deve ser retornado da entrada colorpicker independentemente do formato exibido. Se não especificado, o valor da propriedade format será usado. |
| panel-controls | boolean | true | Usado para controlar a exibição do gradiente de Luminosidade/Saturação e dos controles deslizantes de Matiz e Alfa. |
| panel-format | boolean | true | Usado para controlar se a exibição dos campos de entrada de cor e botão de alternância de formato. |
| eye-dropper | boolean | true | Usado para controlar a exibição do controle de conta-gotas. Requer um navegador que suporte a API EyeDropper. Se ativado em um navegador não suportado, o controle se comportará como se estivesse definido para false. |
| inline | boolean | false | Quando definido como true, o `colorpicker` renderizará seu painel como um elemento embutido em vez de como um pop-over. |
| options | Array/Object | [] | Um objeto de pares valor/label ou um array de strings, ou um array de objetos que devem conter uma propriedade label e value. Suporta opções agrupadas através de um array de objetos que contêm chaves group e options onde options é uma definição de options aninhada. O agrupamento é suportado apenas em um nível de profundidade. |
| show-value | boolean | true | Usado para controlar a exibição do valor da cor atual na pré-visualização da entrada. Usa a propriedade format para determinar qual valor exibir. |
| close-on-select | boolean | false | Quando definido como true, o painel colorpicker fechará quando uma opção de swatch predefinida for escolhida. |
| allow-paste | boolean | true | Permite colar qualquer string de cor válida nos formatos Hex, HSLA, ou RGBA em um colorpicker que contém o foco do usuário. A string colada será imediatamente definida como o valor do colorpicker e convertida para o formato desejado. |
| popover | boolean | false | Renderiza o painel de UI da entrada usando a API Popover do navegador. |
| Mostrar Universal props | |||
| config | Object | {} | Opções de configuração a serem fornecidas para o nó do input e qualquer nó descendente deste input. |
| delay | Number | 20 | Número de milissegundos para debounce do valor do input antes de despachar o commit hook. |
| dirtyBehavior | string | touched | Determina como o indicador "dirty" deste input é definido. Pode ser configurado como touched ou compare - touched (o padrão) é mais performático, mas não detectará quando o formulário corresponder novamente ao seu estado inicial. |
| errors | Array | [] | Array de strings para exibir como mensagens de erro neste campo. |
| help | String | '' | Texto para o texto de ajuda associado ao input. |
| id | String | input_{n} | O ID único do input. Fornecer um ID também permite acesso global ao nó do input. |
| ignore | Boolean | false | Impede que um input seja incluído em qualquer pai (grupo, lista, formulário etc). Útil ao usar inputs para a interface do usuário em vez de valores reais. |
| index | Number | undefined | Permite que um input seja inserido no índice fornecido, se o pai for uma lista. Se o valor do input for indefinido, ele herda o valor dessa posição de índice. Se ele tiver um valor, ele o insere nos valores da lista no índice fornecido. |
| label | String | '' | Texto para o elemento label associado ao input. |
| name | String | input_{n} | O nome do input como identificado no objeto de dados. Isso deve ser único dentro de um grupo de campos. |
| parent | FormKitNode | contextual | Por padrão, o pai é um grupo, lista ou formulário de envolvimento, mas essa prop permite a atribuição explícita do nó pai. |
| prefix-icon | String | '' | Especifica um ícone para colocar na seção prefixIcon. |
| preserve | boolean | false | Preserva o valor do input em um grupo pai, lista ou formulário quando o input é desmontado. |
| preserve-errors | boolean | false | Por padrão, os erros definidos em inputs usando setErrors são automaticamente limpos no input. Definir essa prop como true mantém o erro até que ele seja explicitamente limpo. |
| sections-schema | Object | {} | Um objeto de chaves de seção e valores parciais de esquema, em que cada esquema parcial é aplicado à seção respectiva. |
| suffix-icon | String | '' | Especifica um ícone para colocar na seção suffixIcon. |
| type | String | text | O tipo de input a ser renderizado pela biblioteca. |
| validation | String, Array | [] | As regras de validação a serem aplicadas ao input. |
| validation-visibility | String | blur | Determina quando mostrar as regras de validação com falha de um input. Os valores válidos são blur, dirty e live. |
| validation-label | String | {label prop} | Determina qual rótulo usar nas mensagens de erro de validação, por padrão, usa a propriedade label, se disponível, caso contrário, usa a propriedade name. |
| validation-rules | Object | {} | Regras de validação personalizadas adicionais para disponibilizar na propriedade de validação. |
| value | Any | undefined | Inicializa o valor do input e/ou de seus filhos. Não é reativo. Pode inicializar grupos inteiros (formulários) e listas.. |
Você pode direcionar uma seção específica de uma entrada usando a "key" dessa seção, permitindo que você modifique as classes, HTML (por meio de :sections-schema ou o conteúdo (por meio de slots) dessa seção). Saiba mais sobre as seções aqui.
A estrutura da entrada colorpicker muda dependendo da existência da propriedade inline:
| Section-key | Descrição |
|---|---|
| swatchPreview | Um div que envolve o elemento canvas de pré-visualização do swatch e a string de valor da cor exibida. |
| canvasSwatchPreview | Um elemento canvas que renderiza a seleção de cor atual. |
| valueString | Um elemento span que contém a string de valor de cor atual no formato definido pela propriedade format. |
| panel | O elemento de envolvimento para todos os controles do seletor de cores |
| panelClose | Uma seção prefixada do painel que contém um botão de fechar. Apenas exibido em dispositivos de tela sensível ao toque pequenos onde um tratamento de 'posição fixa' é aplicado. |
| iconClose | Um elemento para exibir um ícone dentro da seção panelClose. |
| controlGroup | Um elemento de envolvimento para todos os elementos de controle de cor dentro do painel |
| preview | Um elemento de envolvimento para a pré-visualização da cor atual. |
| canvasPreview | Um elemento canvas que renderiza a seleção de cor atual. |
| LS | Um elemento de envolvimento para os controles de Luminosidade/Saturação |
| canvasLS | Um elemento canvas que renderiza as cores atualmente disponíveis dado o hue atual. |
| controlLS | Um elemento estilizado como o controle para o canvas LS. |
| hue | Um elemento de envolvimento para os controles de matiz |
| canvasHue | Um elemento canvas que renderiza todos os hue disponíveis com 50% de luminosidade. |
| controlHue | Um elemento estilizado como o controle para o canvas de matiz. |
| alpha | Um elemento de envolvimento para os controles de opacidade |
| canvasAlpha | Um elemento canvas que renderiza a cor selecionada atual de 0% a 100% de opacidade. |
| controlAlpha | Um elemento estilizado como o controle para o canvas de opacidade. |
| eyeDropper | Um elemento que atua como um gatilho para habilitar a API EyeDropper do navegador. Apenas exibido em navegadores compatíveis. |
| iconEyeDropper | Um elemento para exibir um ícone dentro da seção eyeDropper. |
| formatField | Um elemento de envolvimento que contém todos os campos de entrada de formato de cor e o controle de alternância de formato. Apenas o(s) campo(s) relevante(s) ao formato de painel selecionado atualmente será exibido. |
| colorInputGroup | Um elemento de envolvimento que envolve um ou mais campos de entrada associados a um determinado formato de cor. |
| hexField | A entrada para um formato de cor hex. Suporta o formato #RRGGBBAA embora valores hex de alfa não sejam obrigatórios. |
| rField | A entrada para o valor R de um formato de cor RGBA. |
| gField | A entrada para o valor G de um formato de cor RGBA. |
| bField | A entrada para o valor B de um formato de cor RGBA. |
| hField | A entrada para o valor H de um formato de cor HSLA. |
| sField | A entrada para o valor S de um formato de cor HSLA. |
| lField | A entrada para o valor L de um formato de cor HSLA. |
| aField | A entrada para o valor A de um formato de cor RGBA ou HSLA. |
| formatSwitcher | Um elemento que atua como um gatilho para mudar o formato de cor atualmente exibido no painel do seletor de cores. Não tem efeito nas configurações de format e value-format da entrada. |
| iconSwitch | Um elemento para exibir um ícone dentro da seção formatSwitcher. |
| swatches | Um elemento de envolvimento que contém todas as amostras disponíveis fornecidas pela propriedade options. |
| swatch | Um elemento que lida com a renderização de cada opção (ou grupo de opções) fornecida pela propriedade options. |
| Mostrar Universal section keys | |
| outer | O elemento de envolvimento mais externo. |
| wrapper | Um invólucro ao redor do rótulo e do input. |
| label | O rótulo do input. |
| prefix | Por padrão, não gera saída, mas permite conteúdo diretamente antes de um elemento input. |
| prefixIcon | Um elemento para gerar um ícone antes da seção de prefixo. |
| inner | Um invólucro ao redor do próprio elemento input. |
| suffix | Por padrão, não gera saída, mas permite conteúdo diretamente após um elemento input. |
| suffixIcon | Um elemento para gerar um ícone após a seção de sufixo. |
| input | O próprio elemento input. |
| help | O elemento que contém o texto de ajuda. |
| messages | Um invólucro ao redor de todas as mensagens. |
| message | O elemento (ou muitos elementos) que contém uma mensagem - na maioria das vezes mensagens de validação e erros. |
Todos os campos de entrada do FormKit são projetados levando em consideração as seguintes considerações de acessibilidade. Ajude-nos a melhorar continuamente a acessibilidade para todos, relatando problemas de acessibilidade aqui:
| Chave de Seção | Atributo | Padrão | Descrição |
|---|---|---|---|
| swatchPreview | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando desativado e 0 quando ativado. |
| role | button | Indica às tecnologias assistivas que este elemento funciona como um botão. | |
| aria-valuetext | Define o texto legível por humanos do valor. | ||
| panel | aria-role | dialog | Quando o layout está definido para popover, adiciona este atributo. |
| aria-modal | true | Quando o layout está definido para popover, adiciona este atributo. | |
| aria-label | Fornece um nome acessível. | ||
| panelClose | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando o painel está fechado e 0 quando aberto. |
| aria-label | Fornece um nome acessível. | ||
| controlGroup | role | group | Indica às tecnologias assistivas que este elemento funciona como um grupo. |
| canvasLS | aria-hidden | true | Faz com que este elemento não seja exposto à API de acessibilidade. |
| controlLS | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando desativado e 0 quando ativado. |
| role | slider | Indica às tecnologias assistivas que este elemento funciona como um controle deslizante. | |
| aria-valuemin | Define o valor mínimo permitido. | ||
| aria-valuemax | Define o valor máximo permitido. | ||
| aria-valuetext | Define o texto legível por humanos do valor. | ||
| canvasHue | aria-hidden | true | Faz com que este elemento não seja exposto à API de acessibilidade. |
| controlHue | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando desativado e 0 quando ativado. |
| role | slider | Indica às tecnologias assistivas que este elemento funciona como um controle deslizante. | |
| aria-valuemin | Define o valor mínimo permitido. | ||
| aria-valuemax | Define o valor máximo permitido. | ||
| aria-valuenow | Define o texto legível por humanos do valor. | ||
| canvasAlpha | aria-hidden | true | Faz com que este elemento não seja exposto à API de acessibilidade. |
| controlAlpha | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando desativado e 0 quando ativado. |
| role | slider | Indica às tecnologias assistivas que este elemento funciona como um controle deslizante. | |
| aria-valuemin | Define o valor mínimo permitido. | ||
| aria-valuemax | Define o valor máximo permitido. | ||
| aria-valuenow | Define o texto legível por humanos do valor. | ||
| canvasPreview | aria-hidden | true | Faz com que este elemento não seja exposto à API de acessibilidade. |
| canvasSwatchPreview | aria-hidden | true | Faz com que este elemento não seja exposto à API de acessibilidade. |
| eyeDropper | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando desativado e 0 quando ativado. |
| role | button | Indica às tecnologias assistivas que este elemento funciona como um botão. | |
| colorInputGroup | aria-role | group | Indica às tecnologias assistivas que este elemento funciona como um grupo. |
| hexField | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando desativado e 0 quando ativado. |
| for | Associa o rótulo a um elemento de entrada. Os usuários podem clicar no rótulo para focar a entrada ou alternar entre estados. | ||
| rField | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando desativado e 0 quando ativado. |
| for | Associa o rótulo a um elemento de entrada. Os usuários podem clicar no rótulo para focar a entrada ou alternar entre estados. | ||
| gField | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando desativado e 0 quando ativado. |
| for | Associa o rótulo a um elemento de entrada. Os usuários podem clicar no rótulo para focar a entrada ou alternar entre estados. | ||
| bField | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando desativado e 0 quando ativado. |
| for | Associa o rótulo a um elemento de entrada. Os usuários podem clicar no rótulo para focar a entrada ou alternar entre estados. | ||
| aField | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando desativado e 0 quando ativado. |
| for | Associa o rótulo a um elemento de entrada. Os usuários podem clicar no rótulo para focar a entrada ou alternar entre estados. | ||
| hField | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando desativado e 0 quando ativado. |
| for | Associa o rótulo a um elemento de entrada. Os usuários podem clicar no rótulo para focar a entrada ou alternar entre estados. | ||
| sField | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando desativado e 0 quando ativado. |
| for | Associa o rótulo a um elemento de entrada. Os usuários podem clicar no rótulo para focar a entrada ou alternar entre estados. | ||
| lField | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando desativado e 0 quando ativado. |
| for | Associa o rótulo a um elemento de entrada. Os usuários podem clicar no rótulo para focar a entrada ou alternar entre estados. | ||
| formatSwitcher | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando desativado e 0 quando ativado. |
| role | button | Indica às tecnologias assistivas que este elemento funciona como um botão. | |
| aria-label | Fornece um nome acessível. | ||
| swatch | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando desativado e 0 quando ativado. |
| role | button | Indica às tecnologias assistivas que este elemento funciona como um botão. | |
| aria-label | Fornece um nome acessível. | ||
| Mostrar Universal chave de seção | |||
| label | label | for | Associa isso a um elemento de entrada, aprimorando acessibilidade e experiência do usuário |
| input | input | disabled | Desabilita um elemento HTML, impedindo a interação do usuário e sinalizando um estado não interativo |
| aria-describedby | Aprimora a acessibilidade associando um elemento a uma descrição, auxiliando leitores de tela | ||
| aria-required | Adiciona o estado necessário quando a validação é exigida. | ||
| icon | icon | for | Sempre que um ícone é definido como rótulo, ele o vincula a um elemento de entrada, aprimorando acessibilidade e experiência do usuário |
| Evento de Teclado | Descrição |
|---|---|
| Tab | Move o foco para a próxima entrada focalizável na página. |
| Shift + Tab | Move o foco para a entrada focalizável anterior na página. |