Rating

Un rating permite a los usuarios dar un valor a un elemento seleccionando una de una fila de estrellas. Admite estrellas a medias, cuatro tamaños y un número de elementos personalizado.

Uso

<script>
	import { Rating } from 'fluentui-svelte';

	let value = $state(3);
</script>

<Rating bind:value />

Enlazar el valor

Usa bind:value para leer el rating que elige el usuario.

<script>
  let value = $state(3);
</script>

<Rating bind:value />
<p>{value}</p>

Medias estrellas

Establece step en 0.5 para que los usuarios puedan elegir estrellas a medias.

<Rating value={2.5} step={0.5} />

Cuartos de estrella

Mientras el usuario no califique, un valor fraccionario se dibuja en cuartos, útil para mostrar un promedio. Cuando el usuario elige una estrella, el rating se ajusta al step.

<Rating value={3.75} />

Tamaño

Usa size para elegir entre small, medium, large y extra-large.

<Rating value={3} size="small" />
<Rating value={3} size="medium" />
<Rating value={3} size="large" />
<Rating value={3} size="extra-large" />

Forma

Usa iconFilled e iconOutline para reemplazar las estrellas por cualquier otro componente de icono. Ambos recurren a la estrella si se omiten, y los elementos parcialmente llenos se recortan, así que las formas personalizadas también funcionan con un step de 0.5.

<script>
  import { HeartFilled, HeartRegular, BookmarkFilled, BookmarkRegular } from 'fluentui-icons-svelte';
</script>

<Rating value={3} iconFilled={HeartFilled} iconOutline={HeartRegular} />
<Rating value={2.5} step={0.5} iconFilled={BookmarkFilled} iconOutline={BookmarkRegular} />

Máximo

Usa max para cambiar el número de estrellas.

<Rating value={4} max={10} />

Etiqueta del elemento

Usa itemLabel para personalizar la etiqueta accesible de cada input radio.

<Rating value={3} itemLabel={(rating) => `${rating} out of 5 stars`} />

Propiedades del componente