'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Formularios
Rating
Estrellas para calificar algo, o para mostrar una calificación.
import { Rating } from '@alea/ui';
Ejemplos
Rating
El hover previsualiza; las flechas lo cambian.
4 of 5
Solo lectura y tamaños
Mostrando una puntuación.
Medias, íconos, tonos y el valor
allowHalf permite medias; icon cambia la estrella por cualquier ícono; tone lo colorea; showValue muestra el número o las palabras; presionar el valor actual lo borra.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Allow Clear
allowClear - Allow Half
allowHalf - Size
size - Tone
tone
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent…--alea-focus…--alea-status-danger…--alea-status-success…
Space
--alea-space-2…
Type
--alea-font-family-body…--alea-font-size-md…--alea-font-weight-semibold…
Other
--alea-rating-fill…
Props
Rating props
Íconos para calificar algo: estrellas o tu propio ícono, medias, borrar presionando otra vez, el valor visible, cuatro tonos. Las flechas se mueven, como en los radios.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
allowClear | boolean | true | Presionar otra vez el valor actual lo vuelve a 0. Por defecto true. |
allowHalf | boolean | - | Permite elegir medias (3,5). Los valores mostrados siempre pueden ser medias. |
className | string | - | Clases extra para el elemento raíz. |
defaultValue | number | 0 | La calificación al inicio. |
getValueLabel | ((n: number) => string) | - | Palabras para cada valor, leídas por los lectores de pantalla ("1 estrella" por defecto), y mostradas con showValue="label". |
icon | ReactNode | - | El ícono: una estrella por defecto, o cualquier ícono (un corazón, una llama). |
isDisabled | boolean | - | Deshabilita todas sus partes. |
isReadOnly | boolean | - | Muestra el valor sin dejar cambiarlo. |
label | ReactNode | - | Nombre de la calificación ("Califica este plugin"). |
max | number | 5 | Cantidad de íconos. Por defecto 5. |
onChange | ((value: number) => void) | - | Se llama con la nueva calificación. |
showValue | boolean | "label" | - | Muestra el número después de los íconos ("4.5"), o las palabras del valor con "label". |
size | "sm" | "md" | "lg" | 'md' | sm, md (por defecto) o lg. |
tone | "danger" | "accent" | "success" | "warning" | - | El color de los íconos llenos: warning (ámbar, por defecto), accent, danger o success. |
value | number | - | La calificación (controlado), 0 para ninguna. Medias con allowHalf. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
Size
Oscuro
size="sm" | size="md" | size="lg" | |
|---|---|---|---|
Claro
size="sm" | size="md" | size="lg" | |
|---|---|---|---|
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
- Variantes
sizesmmdlgtonedangeraccentsuccesswarning- Estados
- Keyboard focusDisabledHover
- Motion
- pressmorph
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-rating-value.alea-rating.alea-rating-group.alea-rating-cell.alea-rating-item- Atributos data
data-size=smdata-size=lgdata-tone=accentdata-tone=dangerdata-tone=successdata-part=leftdata-part=right
Accesibilidad
- Un grupo de radio: cada estrella es "n estrellas"; las calificaciones de solo lectura son una imagen con el valor.
Teclado
| Tecla | Acción |
|---|---|
| Flechas | Cambia la calificación |
Qué hacer y qué evitar
Hacer
- Muestra la cantidad de calificaciones junto a las estrellas.
- Usa medias (allowHalf) solo cuando la diferencia importa; las estrellas enteras se eligen más rápido.
Evitar
- No uses estrellas para una pregunta de sí o no.
- No la hagas obligatoria sin decirlo.