Évaluation

Évaluation par étoiles : affichage en lecture seule / saisie interactive / demi-étoile / caractères et nombre personnalisés.

Utilisation de base

Utilisation de base

<script setup>
import { ref } from 'vue'
const rate1 = ref(3)
</script>

<template>
  <LhRate v-model="rate1" />
</template>

<script>
export default {
  data() {
    return { rate1: 3 }
  },
}
</script>

<template>
  <LhRate v-model="rate1" />
</template>

Demi-étoile et lecture seule

Demi-étoile / lecture seule

★★★★★4.5 étoiles

<script setup>
import { ref } from 'vue'
const rate2 = ref(3.5)
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate2" allow-half />
    <LhRate :model-value="4.5" readonly allow-half show-score />
  </div>
</template>

<script>
export default {
  data() {
    return { rate2: 3.5 }
  },
}
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate2" allow-half />
    <LhRate :model-value="4.5" readonly allow-half show-score />
  </div>
</template>

max personnalise le nombre total d'étoiles, disabled désactive l'interaction et character personnalise le symbole d'évaluation.

Personnalisation

<script setup>
import { ref } from 'vue'
const rate3 = ref(8)
const rate4 = ref(3)
const rate5 = ref(4)
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate3" :max="10" />
    <LhRate v-model="rate4" disabled />
    <LhRate v-model="rate5" character="T" />
  </div>
</template>

<script>
export default {
  data() {
    return { rate3: 8, rate4: 3, rate5: 4 }
  },
}
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate3" :max="10" />
    <LhRate v-model="rate4" disabled />
    <LhRate v-model="rate5" character="T" />
  </div>
</template>

API

LhRate Props

Prop	Description	Type	Valeur par défaut
modelValue	Score actuel (v-model contrôlé)	number	0
max	Nombre maximal d'étoiles	number	5
allowHalf	Autoriser les demi-étoiles	boolean	false
readonly	Lecture seule (le texte d'étoiles est restitué aux lecteurs d'écran)	boolean	false
disabled	Désactivé	boolean	false
character	Caractère personnalisé	string	—
showScore	Afficher le texte du score	boolean	false
scoreTemplate	Modèle du score (espace réservé {n})	string	—
sx	Props de mise en page sx	LhSxProps	—

Events

Événement	Description	Callback
update:modelValue	Émis lorsque le score change, à utiliser avec v-model	(value: number)
change	Émis lorsque le score change (clic et opérations clavier)	(value: number)

Accessibilité

• En mode interactif, role="radiogroup" ; chaque étoile est un véritable bouton focalisable (roving tabindex), les flèches ajustent le score, Home/End ramènent à zéro / au maximum
• En mode demi-étoile, le pas clavier est de 0,5
• En mode lecture seule, role="img" + aria-label="n étoiles" est restitué aux lecteurs d'écran
• Anneau de focus :focus-visible

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/rate/src/types.ts et des sources @lh-ui/share/core/* ; cliquez sur chaque entrée pour déplier la définition complète ; la description des props se trouve dans le tableau Props ci-dessus) :

LhRateProps

export interface LhRateProps {
  /** Score actuel (v-model contrôlé) */
  modelValue?: number
  /** Nombre maximal d'étoiles */
  max?: number
  /** Autoriser les demi-étoiles */
  allowHalf?: boolean
  /** Lecture seule (le texte d'étoiles est restitué aux lecteurs d'écran) */
  readonly?: boolean
  disabled?: boolean
  /** Caractère personnalisé (★ par défaut) */
  character?: string
  /** Afficher le texte du score */
  showScore?: boolean
  /** Modèle du score (espace réservé {n}) */
  scoreTemplate?: string
  /** Props de mise en page sx */
  sx?: LhSxProps
}

Constantes

Les constantes publiques utilisées par ce composant sont les suivantes (vous pouvez cliquer sur une entrée de même nom dans les colonnes « Type / Valeur par défaut » du tableau Props pour sauter jusqu'ici) :

LH_RATE_MAX_DEFAULT _{(provenant de @lh-ui/share/core/rate)}

/** Nombre d'étoiles par défaut */
export const LH_RATE_MAX_DEFAULT = 5