Rating

#Overview

Let users score products, services or articles with a star-rating component.

<x-rating label="Score" color="var(--color-orange-400)"/>
<x-rating mask="heart" color="error" class="gap-1" max-value="8" value="5"/>

#Changing the shapes

#Using SVG

With the svg attribute / slot, you can change the shape of the stars using your favorite svg library. It is possible to pass an array to the attribute so that each shape is different.

<x-rating size="xl" color="error" svg="heroicon-s-heart"/>

<x-rating size="xl" :svg="['heroicon-o-face-frown', 'heroicon-o-minus-circle', 'heroicon-o-face-smile']" max-value="3"/>

#Using mask (DaisyUI only)

Add the mask attribute with an optional shape value to <x-rating> for it to be rendered using DaisyUI's masks.

If you are using DaisyUI, the advantage over svg ratings is that it has no dependency to any icon library.

<x-rating mask value="3"/>
<x-rating mask="heart" color="error" class="gap-1" value="2"/>
<x-rating mask="diamond" color="info" class="gap-1" value="4"/>

#Using `<x-star>`

One solution enables you to put anything you want in a <x-rating>: by injecting <x-star> sub-components inside the rating's slot, you can get whatever you want rendered. The cost is, obviously, a slightly longer code than the above solutions.

<x-rating size="xl" color="error" value="9">
  @foreach($stars as $star)
	<x-star :svg="$star['icon']" :class="$star['color']"/>
  @endforeach
</x-rating>

Variables

stars = [
  [ 'color' => 'text-purple-400' , 'icon' => 'heroicon-s-hand-thumb-down'],
  [ 'color' => 'text-fuchsia-400', 'icon' => 'heroicon-s-hand-thumb-down'],
  [ 'color' => 'text-red-400'    , 'icon' => 'heroicon-o-face-frown'],
  [ 'color' => 'text-orange-400' , 'icon' => 'heroicon-o-face-frown'],
  [ 'color' => 'text-yellow-400' , 'icon' => 'heroicon-o-face-smile'],
  [ 'color' => 'text-lime-400'   , 'icon' => 'heroicon-o-face-smile'],
  [ 'color' => 'text-green-400'  , 'icon' => 'heroicon-s-hand-thumb-up'],
  [ 'color' => 'text-teal-400'   , 'icon' => 'heroicon-s-hand-thumb-up'],
  [ 'color' => 'text-cyan-400'   , 'icon' => 'heroicon-s-heart'],
  [ 'color' => 'text-sky-400'    , 'icon' => 'heroicon-s-heart']
];

#Size

The size={xl|lg|md|sm|xs} attribute is applicable to ratings.

<x-rating size="xl"/>
<x-rating size="lg"/>
<x-rating size="md"/>
<x-rating size="sm"/>
<x-rating size="xs"/>