Valoración

Valoración por estrellas: visualización de solo lectura / puntuación interactiva / medias estrellas / símbolo y cantidad personalizables.

Uso básico

Uso básico

<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>

Medias estrellas y solo lectura

Media estrella / solo lectura

★★★★★4.5 estrellas

<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 personaliza el número total de estrellas, disabled deshabilita la interacción y character personaliza el símbolo de valoración.

Personalización

<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="A" />
  </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="A" />
  </div>
</template>

API

LhRate Props

Prop	Descripción	Tipo	Predeterminado
modelValue	Valoración actual (v-model controlado)	number	0
max	Límite de estrellas	number	5
allowHalf	Permite medias estrellas	boolean	false
readonly	Solo lectura (genera el texto en estrellas para los lectores de pantalla)	boolean	false
disabled	Deshabilitado	boolean	false
character	Carácter personalizado	string	—
showScore	Muestra el texto de la puntuación	boolean	false
scoreTemplate	Plantilla de puntuación ( marcador {n})	string	—
sx	Props de maquetación rápida sx	LhSxProps	—

Eventos

Evento	Descripción	Parámetro
update:modelValue	Se dispara al cambiar la valoración; se usa con v-model	(value: number)
change	Se dispara al cambiar la valoración (tanto con clic como con teclado)	(value: number)

Accesibilidad

• El estado interactivo es role="radiogroup"; cada estrella es un botón realmente enfocable (roving tabindex); las teclas de dirección ajustan la puntuación y Home/End la llevan a cero o al máximo
• En modo de medias estrellas, el teclado avanza en pasos de 0.5
• El estado de solo lectura genera role="img" + aria-label="n estrellas" para los lectores de pantalla
• Anillo de foco con :focus-visible

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/rate/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhRateProps

export interface LhRateProps {
  /** Valoración actual (v-model controlado) */
  modelValue?: number
  /** Límite de estrellas */
  max?: number
  /** Permite medias estrellas */
  allowHalf?: boolean
  /** Solo lectura (genera el texto en estrellas para los lectores de pantalla) */
  readonly?: boolean
  disabled?: boolean
  /** Carácter personalizado (★ por defecto) */
  character?: string
  /** Muestra el texto de la puntuación */
  showScore?: boolean
  /** Plantilla de puntuación (marcador {n}) */
  scoreTemplate?: string
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
}

Constantes

Las constantes públicas que usa este componente son las siguientes (en las columnas «Tipo / Predeterminado» de la tabla de Props puedes pulsar una entrada con el mismo nombre para saltar aquí):

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

/** Número de estrellas por defecto */
export const LH_RATE_MAX_DEFAULT = 5