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.

Применение

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

API

v-rating
Имя
background-color
По умолчанию
'accent'
Тип
string

Components.Ratings.

Имя
clearable
По умолчанию
false
Тип
boolean

Добавить функциональные возможности ввода, значок по умолчанию - Material Icons *clear

Имя
close-delay
По умолчанию
0
Тип
number | string

Миллисекунды до закрытия компонента

Имя
color
По умолчанию
'primary'
Тип
string

Применяет заданный цвет к элементу управления

Имя
dark
По умолчанию
false
Тип
boolean

Применяет тёмный вариант темы

Имя
dense
По умолчанию
false
Тип
boolean

Components.Ratings.

Имя
empty-icon
По умолчанию
'$vuetify.icons.ratingEmpty'
Тип
string

Components.Ratings.

Имя
full-icon
По умолчанию
'$vuetify.icons.ratingFull'
Тип
string

Components.Ratings.

Имя
half-icon
По умолчанию
'$vuetify.icons.ratingHalf'
Тип
string

Components.Ratings.

Имя
half-increments
По умолчанию
false
Тип
boolean

Components.Ratings.

Имя
hover
По умолчанию
false
Тип
boolean

Components.Ratings.

Имя
large
По умолчанию
false
Тип
boolean

Делает иконку большой (36px)

Имя
length
По умолчанию
5
Тип
number | string

Components.Ratings.

Имя
light
По умолчанию
false
Тип
boolean

Применяет светлый вариант темы

Имя
medium
По умолчанию
false
Тип
boolean

Делает иконку средней (28px)

Имя
open-delay
По умолчанию
0
Тип
number | string

Миллисекунды перед открытием компонента

Имя
readonly
По умолчанию
false
Тип
boolean

Components.Ratings.

Имя
ripple
По умолчанию
true
Тип
boolean | object

Применяет директиву v-ripple

Имя
size
По умолчанию
undefined
Тип
number | string

Задает пользовательский размер иконки

Имя
small
По умолчанию
false
Тип
boolean

Делает иконку маленькой (16px)

Имя
value
По умолчанию
0
Тип
number

Контроль видимости

Имя
x-large
По умолчанию
false
Тип
boolean

Делает иконку очень большой (40px)

Примеры

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