Blife UI

Modo Editable

Cuando el componente está en modo editable, los usuarios pueden hacer clic en los iconos para seleccionar su calificación. También se muestra un efecto hover que indica la calificación que se seleccionará.

Calificación seleccionada: Ninguna

Tamaños

El componente Rating está disponible en tres tamaños diferentes para adaptarse a diferentes contextos de uso.

Cantidad de elementos

Puedes personalizar la cantidad de iconos que se muestran usando la propiedad count. Por defecto se muestran 5 iconos.

Icono Personalizado

Puedes reemplazar el icono de estrella por defecto con cualquier componente de icono personalizado usando la propiedad icon.

Valor Parcial

Tamaño del icono

Ejemplos

Ranking General

Calificacion General

4.3

Basado en 300 opiniones

Excelente

70%

Regular

20%

Malo

10%

Muy Malo

Props

Prop	Tipo	Requerido	Descripción
`value`	`number`	-	El valor de la calificación (requerido). Puede ser un número entero o decimal.
`count`	`number`	-	La cantidad de iconos a mostrar.
`size`	`'small' \| 'medium' \| 'large'`	-	El tamaño del componente.
`editable`	`boolean`	-	Si el componente permite que el usuario seleccione una calificación.
`onValueChange`	`(rating: number) => void`	-	Función que se ejecuta cuando el usuario cambia la calificación (solo en modo editable).
`icon`	`ElementType`	-	Componente de icono personalizado para reemplazar la estrella por defecto.
`iconClassName`	`string`	-	Clases CSS adicionales para los iconos.
`className`	`string`	-	Clases CSS adicionales para el contenedor.
`...rest`	`ComponentPropsWithoutRef<"div">`	-	Todas las props del elemento HTML div.