Powerful suite of Blade components for TALL Stack apps.


>= v1.25

Rating component.

Version 1.25.0 of TallStackUI introduces a new component: Rating. In the modern world, many applications need to collect their user's level of satisfaction related to specific parts of a process, such as the purchase process, which may require the evaluation of service and even satisfaction with the delivery of the object. The rating component was created thinking precisely about serving this purpose, displaying stars to be clicked to evaluate something.

The logic for persisting the rating in a database, such as SQL, SQLite or Redis (cache) 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 />
<x-rating :rate="3" />
<x-rating :rate="1" :quantity="3" />



<x-rating :rate="3" text="TALL" position="right" />
<x-rating :rate="3" text="LIVT" />
<!-- Or -->
<x-rating :rate="3">
<x-rating :rate="3" position="right">
<x-rating :rate="3" xs />
<x-rating :rate="3" sm />
<x-rating :rate="3" md />
<x-rating :rate="3" lg />
<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="black" />
<x-rating :rate="3" color="white" />
<x-rating :rate="3" x-on:evaluate="alert(`Evaluated: ${JSON.stringify($event.detail.evaluate)}`)" />

Code highlighting provided by Torchlight