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

Add input clear functionality, default icon is 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

Components.Ratings.

이름
length
디폴트
5
타입
number | string

Components.Ratings.

이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
medium
디폴트
false
타입
boolean

Components.Ratings.

이름
open-delay
디폴트
0
타입
number | string

컴포넌트가 열리기 전에 기다리는 시간(밀리세컨드)

이름
readonly
디폴트
false
타입
boolean

Components.Ratings.

이름
ripple
디폴트
true
타입
boolean | object

v-ripple 디렉티브를 적용

이름
size
디폴트
undefined
타입
number | string

엘리먼트의 높이와 너비를 지정

이름
small
디폴트
false
타입
boolean

Components.Ratings.

이름
value
디폴트
0
타입
number

표시여부를 조절 (Controls visibility)

이름
x-large
디폴트
false
타입
boolean

Components.Ratings.

예제

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