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.

Utilização

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

API

props

Nome

background-color

Padrão

'accent'

Tipos

string

Components.Ratings.

Nome

clearable

Padrão

false

Tipos

boolean

Adicionar a funcionalidade de limpar o input, ícone padrão é usa o clear do Material Icons

Nome

close-delay

Padrão

Tipos

number | string

Components.Ratings.

Nome

color

Padrão

'primary'

Tipos

string

Components.Ratings.

Nome

dark

Padrão

false

Tipos

boolean

Components.Ratings.

Nome

dense

Padrão

false

Tipos

boolean

Components.Ratings.

Nome

empty-icon

Padrão

'$vuetify.icons.ratingEmpty'

Tipos

string

Components.Ratings.

Nome

full-icon

Padrão

'$vuetify.icons.ratingFull'

Tipos

string

Components.Ratings.

Nome

half-icon

Padrão

'$vuetify.icons.ratingHalf'

Tipos

string

Components.Ratings.

Nome

half-increments

Padrão

false

Tipos

boolean

Components.Ratings.

Nome

hover

Padrão

false

Tipos

boolean

Components.Ratings.

Nome

large

Padrão

false

Tipos

boolean

Components.Ratings.

Nome

length

Padrão

Tipos

number | string

Components.Ratings.

Nome

light

Padrão

false

Tipos

boolean

Components.Ratings.

Nome

medium

Padrão

false

Tipos

boolean

Components.Ratings.

Nome

open-delay

Padrão

Tipos

number | string

Components.Ratings.

Nome

readonly

Padrão

false

Tipos

boolean

Components.Ratings.

Nome

ripple

Padrão

true

Tipos

boolean | object

Aplica a diretiva v-ripple

Nome

size

Padrão

undefined

Tipos

number | string

Define a altura e a largura do elemento

Nome

small

Padrão

false

Tipos

boolean

Components.Ratings.

Nome

value

Padrão

Tipos

number

Controla visibilidade

Nome

x-large

Padrão

false

Tipos

boolean

Components.Ratings.

Exemplos

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