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

props

名称

background-color

默认值

'accent'

类型

string

Components.Ratings.

名称

clearable

默认值

false

类型

boolean

添加输入框清除功能，默认图标是 Material Icons clear

名称

close-delay

默认值

类型

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

默认值

类型

number | string

Components.Ratings.

名称

light

默认值

false

类型

boolean

应用明亮主题变体

名称

medium

默认值

false

类型

boolean

Components.Ratings.

名称

open-delay

默认值

类型

number | string

打开组件前等待的毫秒数

名称

readonly

默认值

false

类型

boolean

Components.Ratings.

名称

ripple

默认值

true

类型

boolean | object

应用v-ripple指令

名称

size

默认值

undefined

类型

number | string

设置元素的高度和宽度

名称

small

默认值

false

类型

boolean

Components.Ratings.

名称

value

默认值

类型

number

控制可见性

名称

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.

Up Next

Edit this page | language on Github

— Contribution Guide