Rating / Stars — Y2Rating
Avaliação por estrelas - read-only com meia estrela, interativo com hover e teclado, cores, tamanhos e integração com formulários nativos.
1. Read-only - y2rating="4.5"
Passe o valor diretamente como conteúdo do atributo y2rating.
Suporta meia estrela - qualquer decimal .5 preenche a metade.
2. Interativo
Atributo y2rating vazio (sem valor) + classe
is-int. Suporte completo a hover, clique e teclado (Enter / Espaço).
Clique na estrela selecionada para deselecionar.
5 estrelas (padrão):
Valor inicial = 3:
10 estrelas:
3. Em Formulário
Inclua um <input type="hidden"> dentro do
elemento. O valor é atualizado automaticamente a cada clique - enviado junto ao form
como campo normal.
4. Tamanhos
5. Cores
Por padrão as estrelas ativas são amarelas. Use as classes de cor no elemento para mudar.
6. API JavaScript
Acesse a instância via el._y2Rat para ler ou
definir o valor por código.
Rating controlado por código:
7. Exemplo Real - Card de Produto
Fone Bluetooth Pro X
R$ 349,90
Deixe sua avaliação
Como você avalia este produto?
Quick Reference
| Atributo / Classe | Padrão | Descrição |
|---|---|---|
y2rating="4.5" |
- | Read-only - valor como conteúdo do atributo (inteiro ou decimal) |
y2rating (vazio) |
- | Interativo - clicável, com hover e teclado |
y2rating-max |
5 |
Número de estrelas |
y2rating-val |
0 |
Valor inicial para o interativo |
.is-int |
- | Cursor pointer nas estrelas (visual interativo) |
.is-sm / .is-lg |
- | Tamanhos pequeno e grande |
.is-pri / .is-suc / .is-err |
- | Cor das estrelas ativas (primário, sucesso, erro) |
.y2rating-cnt |
- | Elemento irmão para exibir contagem de avaliações |
el._y2Rat.getValue() |
- | Retorna a nota atual (só interativo) |
el._y2Rat.setValue(n) |
- | Define a nota por código |
yd:y2rating:change |
- | Evento ao clicar - e.detail.value contém a nota |