TallStackUI, Rating

# Persist Rating

The logic for persisting the rating in a database, is up to its own algorithm. When a star is pressed, the evaluate method is triggered, receiving the quantity of rating as a parameter. Let's take a look at an example:

The Livewire component:

use Livewire\Component;
use Illuminate\Contracts\View\View;
 
class Profile extends Component
{
    public $rate = 2;
 
    public function render(): View
    {
        return view('livewire.profile');
    }
 
    public function evaluate(int $quantity): void
    {
        //
    }
}

The associated Blade file:

<x-rating wire:model="rate" />

With this example, when clicking on a star in the component, the evaluate method will be triggered, receiving in the $quantity parameter the value related to the number of rating selected. You can change the method used to receive the rating event by using evaluate-method :

<x-rating wire:model="rate" evaluate-method="evaluating" />

As the rate parameter is only used to define the current number of selected rating, you are not required to use wire:model . Using this approach with static parameter you will be able to use this component out of Livewire components:

<x-rating :$rate />
 
<!-- The "static" parameter disable
the click effect on the starts -->
<x-rating :$rate static />

# Basic Usage

<x-rating :rate="3" />

# Rating Quantity

<x-rating :rate="1" :quantity="3" />

# Text

TALL

LIVT

<x-rating :rate="3" text="TALL" position="right" />
 
<x-rating :rate="3" text="LIVT" />
 
<!-- Or -->
 
<x-rating :rate="3">
    TALL
</x-rating>
 
<x-rating :rate="3" position="right">
    TALL
</x-rating>

# Size Variations

<x-rating :rate="3" xs />
<x-rating :rate="3" sm />
<x-rating :rate="3" md />
<x-rating :rate="3" lg />

# Color Variations

<x-rating :rate="3" />
<x-rating :rate="3" color="secondary" />
<x-rating :rate="3" color="slate" />
<x-rating :rate="3" color="gray" />
<x-rating :rate="3" color="zinc" />
<x-rating :rate="3" color="neutral" />
<x-rating :rate="3" color="stone" />
<x-rating :rate="3" color="red" />
<x-rating :rate="3" color="orange" />
<x-rating :rate="3" color="amber" />
<x-rating :rate="3" color="yellow" />
<x-rating :rate="3" color="lime" />
<x-rating :rate="3" color="green" />
<x-rating :rate="3" color="emerald" />
<x-rating :rate="3" color="teal" />
<x-rating :rate="3" color="cyan" />
<x-rating :rate="3" color="sky" />
<x-rating :rate="3" color="blue" />
<x-rating :rate="3" color="indigo" />
<x-rating :rate="3" color="violet" />
<x-rating :rate="3" color="purple" />
<x-rating :rate="3" color="fuchsia" />
<x-rating :rate="3" color="pink" />
<x-rating :rate="3" color="rose" />
<x-rating :rate="3" color="mauve" />
<x-rating :rate="3" color="olive" />
<x-rating :rate="3" color="mist" />
<x-rating :rate="3" color="taupe" />
<x-rating :rate="3" color="black" />

# Events

<x-rating :rate="3" x-on:evaluate="alert(`Evaluated: ${JSON.stringify($event.detail.evaluate)}`)" />

Event	Detail	Fired when
`evaluate`	`{ evaluate: { method, rate } }`	A rating is set

Rating

Rating, Customization Blocks