Rating

>= v1.25

Rating component.

Rating, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

TallStackUi::personalize()
    ->rating()
    ->block('block', 'classes');

The soft personalization should be done in boot method of service providers.

# Concept

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.

# Persist Rating

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 />

# 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="black" />
<x-rating :rate="3" color="white" />

# Events

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