Rating
An input that sets a value by choosing stars.
Usage
Half Stars
With precision="0.5", clicking the selected full star again turns it into a half star.
Loading demo...
Custom Icons
icon sets every state; filledIcon / emptyIcon / halfIcon override one each. Built-in icons, Iconify classes, and emoji all work.
Loading demo...
Click Animation
A bounce, glow, and ripple play by default; :animated="false" turns them off.
Loading demo...
Custom Styles
Colors, size, and gap each have a prop; the #text slot rewrites the score text.
Loading demo...
Best Practices
- Use
precision="0.5"only when half steps mean something; use full stars for coarse satisfaction. - Use
disabledwhen input is unavailable andreadonlyto display a past score. - Turn on
showTextor provide a#textslot when the exact value matters. - If an icon set's states don't contrast clearly, use one shared
iconand tell states apart by color. - Turn off
animatedin dense forms and tables.
API Reference
Props
| Property | Type | Default | Description |
|---|---|---|---|
| modelValue | The current score, bound with `v-model`. | ||
| maxStars | Number of stars. | ||
| precision | Step size; `0.5` enables half stars, other values only set the score text's decimal places. | ||
| showText | Shows the score text after the stars. | ||
| disabled | Blocks rating and marks the root `aria-disabled`. | ||
| readonly | Displays the score only and marks the root `aria-readonly`. | ||
| icon | - | Icon shared by the filled and empty layers; state icons take precedence. | |
| filledIcon | Filled icon; falls back to `icon`, then `star`. | ||
| emptyIcon | Empty icon; falls back to `icon`, then `star`. | ||
| halfIcon | - | Half-star icon; when omitted, the filled layer is clipped from the left. | |
| filledColor | Color of filled icons. | ||
| emptyColor | Color of empty icons. | ||
| hoverColor | Color of the filled layer on hover. | ||
| textColor | Color of the score text. | ||
| size | Star icon size; numbers are treated as px. | ||
| gap | Gap between stars; numbers are treated as px. | ||
| animated | Plays the bounce and ripple after a selection. | ||
| starLabel | - | Accessible label for each star; defaults to English `Rate N star(s)`. |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | (value: number) | Fires with the new score after an interactive star is clicked. |
change | (value: number) | Fires together with update:modelValue. |
Slots
| Slot | Props | Description |
|---|---|---|
text | { value: number, max: number } | Replaces the default value / max text when showText is on. |
Overview
- The star row renders as
role="radiogroup", and each star is arole="radio"button. - Keyboard: the row is a single tab stop; ArrowRight/ArrowUp select the next star and ArrowLeft/ArrowDown the previous, without wrapping; Home/End select the first and last.
disabledandreadonlyboth block updates; the score still shows.
Technologies
- Source:
packages/tuffex/packages/components/src/rating/; exports theRatingProps,RatingEmits, andRatingIcontypes.
查看源码
packages/tuffex/packages/components/src/rating/index.ts