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.

Uso

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

API

v-rating
Nombre
background-color
Default
'accent'
Type
string

Components.Ratings.

Nombre
clearable
Default
false
Type
boolean

Agrega funcionalidad de limpiar el input, el ícono default es clear de Material Icons

Nombre
close-delay
Default
0
Type
number | string

Los milisegundos a esperar antes de cerrar el componente.

Nombre
color
Default
'primary'
Type
string

Aplica el color especificado al control.

Nombre
dark
Default
false
Type
boolean

Aplica la variante del tema dark

Nombre
dense
Default
false
Type
boolean

Components.Ratings.

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

Components.Ratings.

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

Components.Ratings.

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

Components.Ratings.

Nombre
half-increments
Default
false
Type
boolean

Components.Ratings.

Nombre
hover
Default
false
Type
boolean

Components.Ratings.

Nombre
large
Default
false
Type
boolean

Components.Ratings.

Nombre
length
Default
5
Type
number | string

Components.Ratings.

Nombre
light
Default
false
Type
boolean

Aplica la variante del tema light

Nombre
medium
Default
false
Type
boolean

Components.Ratings.

Nombre
open-delay
Default
0
Type
number | string

Los milisegundos a esperar antes de abrir el componente.

Nombre
readonly
Default
false
Type
boolean

Components.Ratings.

Nombre
ripple
Default
true
Type
boolean | object

Aplica la directiva v-ripple

Nombre
size
Default
undefined
Type
number | string

Configura la altura y el ancho del elemento

Nombre
small
Default
false
Type
boolean

Components.Ratings.

Nombre
value
Default
0
Type
number

Controla la visibilidad

Nombre
x-large
Default
false
Type
boolean

Components.Ratings.

Ejemplos

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
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