K
KoreUI

Rating

Form

Componente de calificación por estrellas con soporte de media estrella, modo readonly y binding con wire:model.

Uso básico

<x-kore::rating wire:model="rating" label="Calificación" />
<x-kore::rating wire:model="rating" label="Calificación" />

Media estrella

Permite seleccionar valores intermedios como 2.5 o 3.5.

<x-kore::rating wire:model="rating" label="Calificación" allow-half />
<x-kore::rating wire:model="rating" label="Calificación" allow-half />

Readonly

Modo de solo lectura para mostrar calificaciones existentes.

<x-kore::rating readonly allow-half value="3.5" />
<x-kore::rating readonly allow-half value="3.5" />

Estrellas personalizadas

Cambia la cantidad total de estrellas.

<x-kore::rating :stars="10" label="Puntuación (de 10)" />
<x-kore::rating :stars="10" label="Puntuación (de 10)" />

Tamaños

Tres tamaños disponibles.

<x-kore::rating label="Small" size="sm" />
<x-kore::rating label="Medium" size="md" />
<x-kore::rating label="Large" size="lg" />
<x-kore::rating label="Small" size="sm" />
<x-kore::rating label="Medium" size="md" />
<x-kore::rating label="Large" size="lg" />

Estados

Disabled, required y error.

<x-kore::rating label="Disabled" disabled />
<x-kore::rating label="Required" required />
<x-kore::rating label="Con error" error="Selecciona una calificación" />
<x-kore::rating label="Disabled" disabled />
<x-kore::rating label="Required" required />
<x-kore::rating label="Con error" error="Selecciona una calificación" />

El objetivo táctil

La estrella escala con size; el botón que la envuelve, no baja de 24×24.

Es el mínimo que pide la WCAG 2.2, y las estrellas se quedaban en 20×20 —16×16 en tamaño pequeño—: eran el último objetivo pequeño de la librería.

Un rating de muchas estrellas es más ancho que antes, y el conjunto baja de línea si no cabe. Diez estrellas de 24 px ocupan 240 px y no caben en un móvil de 390 con sus márgenes: que envuelvan es feo, pero arrastrar la página de lado lo es más.

Accesibilidad

Interactivo y de solo lectura no se anuncian igual.

  • Interactivo: role="radiogroup", y cada estrella es un role="radio" con su aria-checked y su nombre («3 de 5 estrellas»).
  • Solo lectura o desactivado: el conjunto es un role="img" con nombre, y las estrellas salen del recorrido de tabulación y del árbol de accesibilidad. Eran botones tabulables que no hacían nada.
  • El nombre de cada estrella sale entero de kore-ui.form.translations.rating_stars (':n de :total estrellas'): por trozos no se traduce, porque en otro idioma el orden no es el mismo.

Props

Prop Tipo Default Descripción
label string|null null Texto de la etiqueta
hint string|null null Texto de ayuda debajo del campo
name string|null null Nombre para detección de errores
error string|null null Mensaje de error manual
size string md Tamaño: sm, md, lg
stars int 5 Número de estrellas
allowHalf bool false Habilitar selección de media estrella
readonly bool false Modo de solo lectura
clearable bool true Permitir limpiar haciendo clic en la estrella seleccionada
disabled bool false Estado deshabilitado
required bool false Campo obligatorio con asterisco
showError bool true Auto-detectar errores del \$errors bag
Cargando