Rating / Stars [sw-rating]
Avaliação por estrelas — read-only com meia estrela, interativo com hover e teclado, cores, tamanhos e integração nativa com formulários.
1. Read-only — sw-rating="4.5"
Passe o valor diretamente como conteúdo do atributo sw-rating. Suporta meia estrela — qualquer decimal a partir de .5 preenche a metade.
2. Interativo
Atributo sw-rating vazio (sem valor) + classe is-int. Suporte completo a hover, clique e navegação por 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 e enviado junto com o formulário.
4. Tamanhos
5. Cores
Por padrão as estrelas ativas são amarelas (dourado). Use as classes de cor no elemento para mudar.
6. API JavaScript
Acesse a instância via el._swRating (ou el._swRat) 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?
Referência de Atributos
| Atributo / Classe | Padrão | Descrição |
|---|---|---|
sw-rating="4.5" |
— | Read-only — valor no atributo (inteiro ou decimal com .5) |
sw-rating (vazio) |
— | Interativo — clicável, com hover e navegação por teclado |
sw-rating-max |
5 |
Número de estrelas (ex: 5 ou 10) |
sw-rating-val |
0 |
Valor inicial para o modo interativo |
.is-int |
— | Classe para ativar o estilo cursor pointer nas estrelas |
.is-sm / .is-lg |
— | Tamanhos pequeno (1.6rem) e grande (3.0rem) |
.is-pri / .is-suc / .is-err |
— | Cores alternativas das estrelas (primário, verde, vermelho) |
.sw-rating-cnt |
— | Elemento irmão para exibir contagem de avaliações |
el._swRating.getValue() |
— | Retorna a nota atual (modo interativo) |
el._swRating.setValue(n) |
— | Define a nota por código |
sw:rating:change |
— | Evento ao alterar nota — e.detail.value contém o valor |