Rating
Stars to give a note, with half points and labels, or to show an average.
Basic Usage
Click a star, or focus the stars and use the arrow keys or a digit. Clicking the current note clears it.
labels adds a word for each note.
4
<neura::rating wire:model.live="note" labels />Half Notes
With
half, the left half of a star gives half a point.
3.5
<neura::rating wire:model.live="half" half show-value size="lg" />Read Only
readonly draws any value, 4.3 included, with no script: an average with its number of reviews.
<neura::rating readonly :value="4.3" show-value :count="128" />
<neura::rating readonly :value="2.6" size="sm" color="rose" icon="heart" />Configuration
Defaults live in
config/neura-kit.php, like the other components. A prop on the tag wins over them.
'rating' => Config::rating([
'default' => [
'size' => 'md', // sm | md | lg (pack: Rating\Size)
'color' => 'amber',
'icon' => 'star', // star | heart | circle
],
]),
'rating' => Config::rating([
'default' => [
'size' => 'md', // sm | md | lg (pack: Rating\Size)
'color' => 'amber',
'icon' => 'star', // star | heart | circle
],
]),Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / wire:model | number | 0 | The note; 0 is none |
| max | int | 5 | Number of stars (up to 10) |
| half | boolean | false | Half points |
| readonly | boolean | false | Display only, fractions drawn exactly |
| clearable | boolean | true | Clicking the current note clears it |
| labels | true|array | null | A word per note: true for the built-in five |
| showValue | boolean | false | The number beside the stars |
| count | int | null | Number of reviews, read-only |
| label | string | 'Rating' | Accessible name |
| name | string | null | Hidden input for plain form posts |
| size / color / icon | string | config | From config(neura-kit.rating) |
| disabled | boolean | false |