Rating

The v-rating component is a specialized but important 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.

Basic

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

Density

Control the space occupied by v-rating items using the density prop.

Colors

The v-rating component can be colored as you want, you can set both selected and not selected colors.

Size

Utilize the same sizing classes available in v-icon or provide your own with the size prop.

Length

Change the number of items by modifying the the length prop.

Custom length

Model: 2

Clearable

Use clearable prop to allows for the component to be cleared. Triggers when the icon containing the current value is clicked.

Readonly

For ratings that are not meant to be changed you can use readonly prop.

Hover

Provides visual feedback when hovering over icons

Incremented

The half-increments prop increases the granularity of the ratings, allow for .5 values as well.

Item Slot

Slots enable advanced customization possibilities and provide you with more freedom in how you display the rating.

CONTENTS
  • Introduction

  • Basic

  • Density

  • Colors

  • Size

  • Length

  • Clearable

  • Readonly

  • Hover

  • Incremented

  • Item Slot