Ratings
The rating component is a specialized but crucial 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.
API
The color used empty icons
Add input clear functionality, default icon is Material Icons clear
Milliseconds to wait before closing component
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))
Applies the dark theme variant
Icons have a smaller size
The icon displayed when empty
The icon displayed when full
The icon displayed when half (requires half-increments prop)
Allows the selection of half increments
Provides visual feedback when hovering over icons
Makes the icon large (36px)
The amount of ratings to show
Applies the light theme variant
Makes the icon medium (28px)
Milliseconds to wait before opening component
Removes all hover effects and pointer events
Applies the v-ripple directive
Specifies a custom font size for the icon
Makes the icon small (16px)
The rating value
Makes the icon extra large (40px)
Examples
Size variants
Utilize the same sizing classes available in v-icon or provide your own with the size prop.
Custom length
Sometimes an application will call for a customized implementation. Easily change length or displayed icons.
Incremented
A rating can have 3 defined icons, full-icon, half-icon (with the half-increments prop) and empty-icon.
Scoped slots
A scoped slot is provided to give you even more freedom in how you display the rating.
Card ratings
The rating component pairs well with products allowing you to gather and display customer feedback.
Advanced usage
The v-rating component fits right in with existing components. Build truly complex examples with rich features and beautiful designs.