AdvancedRating Component

Set up

Let's import all necessary components in the script tag. We import a thumb-up icon but you can use any icons as you like.

<script>
	import { Rating, AdvancedRating } from 'flowbite-svelte';
	import { ThumbUp } from 'svelte-heros';
</script>

AdvancedRating component

Set the `total`, rating`, and `ratings` prop for AdvancedRation component. Use the `rating` slot for Rating component with the `total` and `rating` props. Use the `globalText` slot for additional information.

<AdvancedRating
	total="5"
	rating="3.21"
	ratings={[
		{ label: '5 star', rating: 70 },
		{ label: '4 star', rating: 17 },
		{ label: '3 star', rating: 8 },
		{ label: '2 star', rating: 4 },
		{ label: '1 star', rating: 1 }
	]}
>
	<span slot="rating">
		<Rating total="5" rating="3.21">
			<p slot="text" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">3.21 out of 5</p>
		</Rating>
	</span>
	<p slot="globalText" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">1,745 global ratings</p>
</AdvancedRating>

Different icon

As we describe in the Rating component, you can change an icon in the `ratingUp` and `ratingDown` in the Rating component.

<AdvancedRating
  total="5"
  rating="3.21"
  ratings={[
    { label: '5 star', rating: 70 },
    { label: '4 star', rating: 17 },
    { label: '3 star', rating: 8 },
    { label: '2 star', rating: 4 },
    { label: '1 star', rating: 1 }
  ]}
>
  <span slot="rating">
    <Rating total="5" rating="3.21" ceil>
      <span slot="ratingUp">
        <ThumbUp class="text-yellow-300 dark:text-yellow-200" />
      </span>
      <span slot="ratingDown">
        <ThumbUp class="text-gray-300 dark:text-gray-500" />
      </span>
      <p slot="text" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">3.21 out of 5</p>
    </Rating>
  </span>
  <p slot="globalText" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">1,745 global ratings</p>
</AdvancedRating>

Props

The component has the following props, type, and default values. See types page for type information.

Related components

References