Introducing KickStart — AI generated FormKit forms in seconds. Generate from a screenshot, edit with drag-and-drop or conversational AI, copy & paste as components or schema!
Try for free
A entrada rating
permite que os usuários forneçam feedback com base em uma escala numérica representada por ícones/imagens:
As propriedades min
e max
definem os valores mínimo e máximo que um usuário final pode selecionar. O max
determina o número de ícones renderizados:
Por padrão, a entrada rating
incrementará de 1 em 1. A propriedade step
permite definir o tamanho do passo entre cada valor. Por exemplo, se você definir step="0.5"
, o usuário final pode selecionar qualquer valor que seja múltiplo de 0.5
. Os passos devem ser um valor entre 0.01
e 1
:
Por padrão, a entrada rating
usa o próprio ícone de estrela do FormKit. Você pode mudar qual ícone está sendo usado definindo a propriedade rating-icon
. Esta propriedade aceita uma string que usará o plugin de ícones do FormKit:
Em vez de especificar um ícone através do plugin de ícones do FormKit, você pode passar um SVG bruto usando o slot default
:
Por último, você pode usar os slots offItem
e onItem
para passar quaisquer ativos que desejar. Neste exemplo, usaremos imagens diferentes para os estados off
e on
:
Além de fornecer um ícone, você também pode especificar a cor através de propriedades. Definir a propriedade off-color
mudará a cor dos ícones quando eles não estiverem selecionados. A propriedade on-color
mudará a cor dos ícones quando estiverem selecionados:
Prop | Type | Padrão | Descrição |
---|---|---|---|
min | Number | 0 | O número mínimo de ícones que podem ser selecionados. |
max | Number | 5 | O número máximo de ícones que são renderizados. |
step | Number | 1 | O passo ou incremento que deve ser aplicado aos ícones `rating`. Os valores aceitos estão entre `0.01` e `1` |
hover-highlight | Boolean | true | Determina se o estado selecionado do ícone/imagem deve ser mostrado quando passado o mouse por cima. |
off-color | String | undefined | Define a cor a ser aplicada nos ícones dados quando eles não foram selecionados. |
on-color | String | undefined | Define a cor a ser aplicada nos ícones dados quando eles foram selecionados. |
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.
Section-key | Descrição |
---|---|
itemsWrapper | Um invólucro para todos os itens de avaliação (tanto os ativos quanto os inativos). |
offItems | Um contêiner em volta de todos os itens inativos. |
offItemWrapper | Pai imediato em volta de cada item inativo. |
onItems | Um contêiner em volta de todos os itens ativos. |
onItemWrapper | Pai imediato em volta de cada item ativo. |
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 inputs do FormKit são projetados levando em conta 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 |
---|---|---|---|
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. |