Componente

Rating

Valutazione a stelle nel colore primario: un gruppo di radio daisyUI rating per votare, o una sola immagine etichettata per mostrare un voto.

Riferimento: <it-rating>
Classi: ita-ratingita-rating-group
Basato su (daisyUI): ratingrating-halfrating-hiddenrating-smrating-lgmaskmask-star-2mask-half-1mask-half-2fieldset
Solo CSS: Sono radio button: frecce per cambiare voto, valore inviato col form. Il primo radio nascosto (rating-hidden) vale zero e permette di non votare. In sola lettura le stelle sono un'unica immagine con role=img e un'etichetta che dice il voto.
Storybook: Apri le storie di Rating

Esempio base

Mostra il codice HTML

<fieldset class="ita-rating-group">
  <legend>Valuta il servizio</legend>
  <div class="rating ita-rating rating-md">
    <input type="radio" name="rating-1" value="0" class="rating-hidden" aria-label="Nessuna valutazione">
    <input type="radio" name="rating-1" value="1" class="mask mask-star-2" aria-label="1 stella su 5">
    <input type="radio" name="rating-1" value="2" class="mask mask-star-2" aria-label="2 stelle su 5">
    <input type="radio" name="rating-1" value="3" class="mask mask-star-2" aria-label="3 stelle su 5" checked>
    <input type="radio" name="rating-1" value="4" class="mask mask-star-2" aria-label="4 stelle su 5">
    <input type="radio" name="rating-1" value="5" class="mask mask-star-2" aria-label="5 stelle su 5">
  </div>
</fieldset>

Sola lettura

Mostra il codice HTML

<div class="flex flex-wrap items-end gap-10">
<div class="rating ita-rating rating-md" role="img" aria-label="Valutazione media: 4 stelle su 5"><span class="mask mask-star-2"></span><span class="mask mask-star-2"></span><span class="mask mask-star-2"></span><span class="mask mask-star-2" aria-current="true"></span><span class="mask mask-star-2"></span></div>
<div class="rating ita-rating rating-sm" role="img" aria-label="Valutazione: 2 stelle su 5"><span class="mask mask-star-2"></span><span class="mask mask-star-2" aria-current="true"></span><span class="mask mask-star-2"></span><span class="mask mask-star-2"></span><span class="mask mask-star-2"></span></div>
</div>

Mezze stelle

Mostra il codice HTML

<div class="flex flex-wrap items-end gap-10">
<fieldset class="ita-rating-group">
  <legend>Valuta con mezze stelle</legend>
  <div class="rating ita-rating rating-md rating-half">
    <input type="radio" name="rating-2" value="0" class="rating-hidden" aria-label="Nessuna valutazione">
    <input type="radio" name="rating-2" value="0.5" class="mask mask-star-2 mask-half-1" aria-label="0,5 stelle su 5">
    <input type="radio" name="rating-2" value="1" class="mask mask-star-2 mask-half-2" aria-label="1 stella su 5">
    <input type="radio" name="rating-2" value="1.5" class="mask mask-star-2 mask-half-1" aria-label="1,5 stelle su 5">
    <input type="radio" name="rating-2" value="2" class="mask mask-star-2 mask-half-2" aria-label="2 stelle su 5">
    <input type="radio" name="rating-2" value="2.5" class="mask mask-star-2 mask-half-1" aria-label="2,5 stelle su 5">
    <input type="radio" name="rating-2" value="3" class="mask mask-star-2 mask-half-2" aria-label="3 stelle su 5">
    <input type="radio" name="rating-2" value="3.5" class="mask mask-star-2 mask-half-1" aria-label="3,5 stelle su 5" checked>
    <input type="radio" name="rating-2" value="4" class="mask mask-star-2 mask-half-2" aria-label="4 stelle su 5">
    <input type="radio" name="rating-2" value="4.5" class="mask mask-star-2 mask-half-1" aria-label="4,5 stelle su 5">
    <input type="radio" name="rating-2" value="5" class="mask mask-star-2 mask-half-2" aria-label="5 stelle su 5">
  </div>
</fieldset>
<div class="rating ita-rating rating-lg rating-half" role="img" aria-label="Media: 4,5 stelle su 5"><span class="mask mask-star-2 mask-half-1"></span><span class="mask mask-star-2 mask-half-2"></span><span class="mask mask-star-2 mask-half-1"></span><span class="mask mask-star-2 mask-half-2"></span><span class="mask mask-star-2 mask-half-1"></span><span class="mask mask-star-2 mask-half-2"></span><span class="mask mask-star-2 mask-half-1"></span><span class="mask mask-star-2 mask-half-2"></span><span class="mask mask-star-2 mask-half-1" aria-current="true"></span><span class="mask mask-star-2 mask-half-2"></span></div>
</div>

Dimensioni

Mostra il codice HTML

<div class="flex flex-wrap items-end gap-10">
<fieldset class="ita-rating-group">
  <legend>Piccolo</legend>
  <div class="rating ita-rating rating-sm">
    <input type="radio" name="rating-3" value="0" class="rating-hidden" aria-label="Nessuna valutazione">
    <input type="radio" name="rating-3" value="1" class="mask mask-star-2" aria-label="1 stella su 5">
    <input type="radio" name="rating-3" value="2" class="mask mask-star-2" aria-label="2 stelle su 5" checked>
    <input type="radio" name="rating-3" value="3" class="mask mask-star-2" aria-label="3 stelle su 5">
    <input type="radio" name="rating-3" value="4" class="mask mask-star-2" aria-label="4 stelle su 5">
    <input type="radio" name="rating-3" value="5" class="mask mask-star-2" aria-label="5 stelle su 5">
  </div>
</fieldset>
<fieldset class="ita-rating-group">
  <legend>Medio</legend>
  <div class="rating ita-rating rating-md">
    <input type="radio" name="rating-4" value="0" class="rating-hidden" aria-label="Nessuna valutazione">
    <input type="radio" name="rating-4" value="1" class="mask mask-star-2" aria-label="1 stella su 5">
    <input type="radio" name="rating-4" value="2" class="mask mask-star-2" aria-label="2 stelle su 5">
    <input type="radio" name="rating-4" value="3" class="mask mask-star-2" aria-label="3 stelle su 5" checked>
    <input type="radio" name="rating-4" value="4" class="mask mask-star-2" aria-label="4 stelle su 5">
    <input type="radio" name="rating-4" value="5" class="mask mask-star-2" aria-label="5 stelle su 5">
  </div>
</fieldset>
<fieldset class="ita-rating-group">
  <legend>Grande</legend>
  <div class="rating ita-rating rating-lg">
    <input type="radio" name="rating-5" value="0" class="rating-hidden" aria-label="Nessuna valutazione">
    <input type="radio" name="rating-5" value="1" class="mask mask-star-2" aria-label="1 stella su 5">
    <input type="radio" name="rating-5" value="2" class="mask mask-star-2" aria-label="2 stelle su 5">
    <input type="radio" name="rating-5" value="3" class="mask mask-star-2" aria-label="3 stelle su 5">
    <input type="radio" name="rating-5" value="4" class="mask mask-star-2" aria-label="4 stelle su 5" checked>
    <input type="radio" name="rating-5" value="5" class="mask mask-star-2" aria-label="5 stelle su 5">
  </div>
</fieldset>
</div>

Disabilitato

Mostra il codice HTML

<fieldset class="ita-rating-group" disabled>
  <legend>Valutazione chiusa</legend>
  <div class="rating ita-rating rating-md">
    <input type="radio" name="rating-6" value="0" class="rating-hidden" aria-label="Nessuna valutazione" disabled>
    <input type="radio" name="rating-6" value="1" class="mask mask-star-2" aria-label="1 stella su 5" disabled>
    <input type="radio" name="rating-6" value="2" class="mask mask-star-2" aria-label="2 stelle su 5" disabled>
    <input type="radio" name="rating-6" value="3" class="mask mask-star-2" aria-label="3 stelle su 5" checked disabled>
    <input type="radio" name="rating-6" value="4" class="mask mask-star-2" aria-label="4 stelle su 5" disabled>
    <input type="radio" name="rating-6" value="5" class="mask mask-star-2" aria-label="5 stelle su 5" disabled>
  </div>
</fieldset>