Rating (estrelas) Componentes

O que é

É o "★★★★☆ (127 avaliações)" da loja e o "Como foi seu atendimento?" do formulário. Tem dois modos, escolhidos pelo valor de sw-rating: com um número (sw-rating="4.5") ele só mostra a nota; sem número (sw-rating="int" ou vazio) ele vira campo, e a pessoa clica numa estrela para avaliar. Tamanho e cor são palavras no mesmo atributo.

Precisa do JavaScript do SWCore, que desenha as estrelas dentro da <div> (você não escreve as estrelas). No modo campo, passar o mouse acende as estrelas até ali, clicar grava a nota, clicar de novo na mesma estrela zera, e funciona pelo teclado (Tab até a estrela, Enter ou Espaço). Se houver um <input type="hidden"> dentro, a nota vai para ele — é assim que ela chega ao servidor junto com o formulário.

Quando usar

• Nota média de produto, serviço ou lugar: só leitura — sw-rating="4.5" + a contagem ao lado.
• Pedir avaliação (atendimento, pedido, curso): modo campo dentro do formulário — sw-rating="int" com <input type="hidden">.
• Escala diferente de 5 (de 0 a 10): sw-rating-max="10".

Comece aqui

1. 1

   Coloque o SWCore na página.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   
   <!-- fim do body -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Para mostrar uma nota: o número no atributo. A contagem ao lado é um <span sw-rating-cnt> fora da div.

   (127 avaliações)

   <div sw-rating="4.5" aria-label="Nota 4,5 de 5"></div>
   <span sw-rating-cnt>(127 avaliações)</span>

3. 3

   Para a pessoa dar a nota: int, com um campo escondido dentro para enviar no formulário.

   <div sw-rating="int">
     <input type="hidden" name="nota" value="0">
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div class="bg-sur bd r-m p-3 flx f-cl gap-2">
  <strong>Café especial 500g</strong>
  <div class="flx alc"><div sw-rating="4.5 sm" aria-label="Nota 4,5 de 5"></div><span sw-rating-cnt>(127 avaliações)</span></div>
  <span class="t-g">R$ 39,90</span>
  <button sw-btn="suc"><i class="swi-cart-add"></i> Comprar</button>
</div>

<form action="/avaliar" method="post">
  <label>Como foi seu atendimento?</label>
  <div sw-rating="int lg suc">
    <input type="hidden" name="nota" value="0">
  </div>
  <button sw-btn="pri" type="submit">Enviar avaliação</button>
</form>
<!-- o servidor recebe "nota" = 0 a 5 -->

<div sw-rating="int lg" id="nota-pedido"></div>
<p id="resposta"></p>

<script>
  document.getElementById('nota-pedido').addEventListener('sw:rating:change', (e) => {
    const n = e.detail.value;             // 0 a 5 (0 = a pessoa zerou)
    document.getElementById('resposta').textContent =
      n <= 2 ? 'Poxa! Conte o que deu errado.' : 'Obrigado pela nota ' + n + '!';
  });
</script>

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css e swcore.min.js (sem o JS, a div fica vazia).

Cuidados — erros comuns

• Nota com vírgula (sw-rating="4,5"): ele lê só o 4. Use ponto: "4.5".
• Esquecer o <input type="hidden"> dentro da div no formulário: a nota não vai para o servidor.
• Escrever as estrelas dentro da div: o script apaga tudo e desenha de novo (só o input escondido é mantido).
• Colocar o <span sw-rating-cnt> dentro da div: ele é apagado. Deixe ao lado, fora.
• Estrelas só de leitura não são lidas pelo leitor de tela. Coloque aria-label="Nota 4,5 de 5" na div.

O que ele não faz

• No modo campo não aceita meia estrela: a pessoa escolhe notas inteiras.
• Não há função para ler ou mudar a nota por código: leia pelo input escondido ou pelo evento.
• Trocar o atributo depois que a página carregou não redesenha as estrelas.