componente · @solu30/ui-kit/input
StarRating
Puntuación de cinco estrellas interactiva, con etiqueta de categoría configurable por idioma.
4 sitios de import en 3 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- TheCharterPanel
- cmp-packages
- easycharter
El componente, montado
Cargando el componente del paquete instalado…
Cómo se usa
import { StarRating } from '@solu30/ui-kit/input'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| value | sí | number | Rating value 1-5 |
| onChange | opcional | (value: number) => void | Callback when a star is clicked (omit for readonly) |
| readonly | opcional | boolean | Whether the rating is readonly |
| size | opcional | StarRatingSize | Star size |
| showLabel | opcional | boolean | Whether to show the text label below the stars |
| getCategoryLabel | opcional | (stars: number) => string | Custom function to get the category label for a given rating |
| starLabel | opcional | { singular: string; plural: string; } | Label suffix for the star count (e.g. "Star" / "Stars") |
| className | opcional | string | Additional CSS class |
Ejemplo del paquete
<StarRating
value={rating}
onChange={setRating}
getCategoryLabel={(n) => t(`stars.${n}`)}
starLabel={{ singular: 'Star', plural: 'Stars' }}
/>Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.