Ratings
The v-rating component is a specialized but important piece in building user widgets. Collecting user feedback via ratings is a simple analytic that can provide a lot of feedback to your product or application.
Usage
The v-rating component provides a simple interface for gathering user feedback.
<v-rating
hover
:length="5"
:size="32"
:model-value="3"
active-color="primary"
/>API
| Component | Description |
|---|---|
| v-rating | Primary Component |
Examples
Props
Color
The v-rating component can be colored as you want, you can set both selected and not selected colors.
Density
Control the space occupied by v-rating items using the density prop.
Clearable
Clicking on a current rating value can reset the rating by using clearable prop.
Readonly
For ratings that are not meant to be changed you can use readonly prop.
Hover effect
When using the hover prop, the rating icons will become a solid color and slightly increase its scale when the mouse is hovered over them.
Labels
The v-rating component can display labels above or below each item.
Icons
You can use custom icons.
Length
Change the number of items by modifying the the length prop.
Half increments
The half-increments prop increases the granularity of the ratings, allow for .5 values as well.
3.5
Size
Utilize the same sizing classes available in v-icon or provide your own with the size prop.
Aria Label
Provide a label to assistive technologies for each item.
Slots
Item slot
Slots enable advanced customization possibilities and provide you with more freedom in how you display the rating.
Custom labels slot
Any arbitrary content could be displayed for labels in item-label slot.
Misc
Card ratings
The rating component pairs well with products allowing you to gather and display customer feedback.