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.

Usage

The v-rating component provides a simple interface for gathering user feedback.

API

props
v-rating
Name
background-color
Default
'accent'
Type
string

Components.Ratings.

Name
clearable
Default
false
Type
boolean

Components.Ratings.

Name
close-delay
Default
0
Type
number | string

Components.Ratings.

Name
color
Default
'primary'
Type
string

コンポーネントに色を設定します。この色は、定義されている色の名前（例えばsuccessやpurple）や、CSSの色指定（#033やrgba(255, 0, 0, 0.5)）を設定できます。

Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
dense
Default
false
Type
boolean

Components.Ratings.

Name
empty-icon
Default
'$vuetify.icons.ratingEmpty'
Type
string

Components.Ratings.

Name
full-icon
Default
'$vuetify.icons.ratingFull'
Type
string

Components.Ratings.

Name
half-icon
Default
'$vuetify.icons.ratingHalf'
Type
string

Components.Ratings.

Name
half-increments
Default
false
Type
boolean

Components.Ratings.

Name
hover
Default
false
Type
boolean

Components.Ratings.

Name
large
Default
false
Type
boolean

Components.Ratings.

Name
length
Default
5
Type
number | string

Components.Ratings.

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Name
medium
Default
false
Type
boolean

Components.Ratings.

Name
open-delay
Default
0
Type
number | string

Components.Ratings.

Name
readonly
Default
false
Type
boolean

Components.Ratings.

Name
ripple
Default
true
Type
boolean | object

Components.Ratings.

Name
size
Default
undefined
Type
number | string

Components.Ratings.

Name
small
Default
false
Type
boolean

Components.Ratings.

Name
value
Default
0
Type
number

Components.Ratings.

Name
x-large
Default
false
Type
boolean

Components.Ratings.

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.

Edit this page | language on Github
 — Contribution Guide
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore