Évaluation

Évaluation par étoiles. Prend en charge la limite du nombre d'étoiles (max), les demi-étoiles (allowHalf), le caractère personnalisé (character), la lecture seule et la désactivation, ainsi que le texte du score (showScore, modèle scoreTemplate).

Évaluation

<template>
  <div class="demo-col" style="gap: 22px">
    <div>
      <LhRate v-model="score" :max="5" show-score score-template="{n} étoile" />
      <p class="demo-note">Valeur contrôlée : {{ score }} (showScore + scoreTemplate="{n} étoile")</p>
    </div>
    <div>
      <LhRate v-model="half" :max="5" allow-half />
      <p class="demo-note">allowHalf autorise les demi-étoiles : {{ half }}</p>
    </div>
    <div>
      <LhRate v-model="custom" :max="5" character="◈" />
      <p class="demo-note">Caractère personnalisé avec character="◈"</p>
    </div>
    <div>
      <LhRate :model-value="3.5" :max="5" readonly />
      <p class="demo-note">readonly, lecture seule (role="img", le lecteur d'écran annonce le nombre d'étoiles)</p>
    </div>
    <div>
      <LhRate v-model="score" :max="5" disabled />
      <p class="demo-note">disabled : désactivé</p>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({ score: 3, half: 2.5, custom: 4 }),
}
</script>

Props

Propriété	Description	Type	Valeur par défaut
v-model	Évaluation actuelle (model : modelValue/input)	number	—
max	Nombre maximal d'étoiles	number	5
allowHalf	Autorise les demi-étoiles	boolean	false
readonly	Lecture seule (le lecteur d'écran annonce le texte du nombre d'étoiles)	boolean	false
disabled	Désactivé	boolean	false
character	Caractère personnalisé (★ par défaut)	string	'★'
showScore	Affiche le texte du score	boolean	false
scoreTemplate	Modèle du score (espace réservé {n})	string	'{n}'
sx	Raccourci de mise en page sx	—	—

Events

Événement	Description	Paramètres de rappel
input	Événement v-model	(val)
change	Déclenché lorsque l'évaluation change	(val)

Accessibilité

À l'état interactif : role="radiogroup", chaque étoile porte role="radio" + aria-checked ; à l'état readonly : role="img" + aria-label portant le texte du nombre d'étoiles ; les flèches ←/→ du clavier permettent de choisir l'étoile.