Rating Componentes

O que é

Mostra ou coleta uma nota de 1 a N estrelas — avaliação de produto, feedback de atendimento.

Como funciona

Com um valor numérico no atributo, renderiza estático (inclusive meia-estrela via gradiente de texto). Sem valor, vira interativo: clique define a nota, clicar de novo na mesma estrela zera.

Exemplos

<!-- Valor no atributo: inteiro ou decimal -->
<div sw-rating="5"></div>
<div sw-rating="4.5"></div>
<div sw-rating="3.7"></div>

<!-- Com contador de avaliações -->
<div sw-rating="4.5"></div>
<span class="sw-rating-cnt">(127 avaliações)</span>

<!-- Interativo — sw-rating sem valor -->
<div sw-rating class="is-int"></div>

<!-- Com valor inicial -->
<div sw-rating sw-rating-val="3" class="is-int"></div>

<!-- 10 estrelas -->
<div sw-rating sw-rating-max="10" class="is-int"></div>

<form method="POST" action="/avaliar">
  <div sw-rating class="is-int">
    <input type="hidden" name="nota" value="0">
  </div>
  <button type="submit">Enviar</button>
</form>

<div sw-rating="4" class="is-sm"></div>  <!-- pequeno -->
<div sw-rating="4"></div>                <!-- normal (padrão) -->
<div sw-rating="4" class="is-lg"></div>  <!-- grande -->

<div sw-rating="4"></div>              <!-- dourado (padrão) -->
<div sw-rating="4" class="is-pri"></div>  <!-- cor primária -->
<div sw-rating="4" class="is-suc"></div>  <!-- sucesso (verde) -->
<div sw-rating="4" class="is-err"></div>  <!-- erro (vermelho) -->

// Pegar instância (elemento com is-int)
const el = document.querySelector('[sw-rating].is-int');
const inst = el._swRating;

// Ler nota atual
console.log(inst.getValue()); // ex: 4

// Definir por código
inst.setValue(5);

// Ouvir eventos de mudança
el.addEventListener('sw:rating:change', (e) => {
  console.log('Nova nota:', e.detail.value);
});

Atributos

Variantes

Eventos

API (JavaScript)

Requisitos

Nenhuma.

Limitações — o que ele não faz

• Não tem os aliases legados swrating-*/y2rating-* do SW original — só a API sw-rating.