VRating API

Props

name	type	default
`active-color`	string	undefined
The applied color when the component is in an active state.
`clearable`	boolean	false
Allows for the component to be cleared by clicking on the current value.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`disabled`	boolean	false
Removes the ability to click or target the component.
`empty-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$ratingEmpty'
The icon displayed when empty.
`full-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$ratingFull'
The icon displayed when full.
`half-increments`	boolean	false
Allows the selection of half increments.
`hover`	boolean	false
Provides visual `feedbac`k when hovering over icons.
`item-aria-label`	string	'$vuetify.rating.ariaLabel.item'
The aria-label used for each item.
`item-label-position`	string	'top'
Position of item labels. Accepts ‘top’ and ‘bottom’.
`item-labels`	string[]	undefined
Array of labels to display next to each item…
`length`	string \| number	5
The amount of items to show.
`model-value`	string \| number	0
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`name`	string	undefined
Sets the component’s name attribute.
`readonly`	boolean	false
Removes all hover effects and pointer events.
`ripple`	boolean	false
Applies the v-ripple directive.
`size`	string \| number	'default'
Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: x-small, small, default, large, and x-large.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.

Events

name	type
`update:modelValue`	[string \| number]
Event that is emitted when the component’s model changes.

Slots

{
  value: number
  index: number
  isFilled: boolean
  isHovered: boolean
  icon:
    | string
    | (string | [string, number])[]
    | (new () => any)
    | FunctionalComponent
  color: string
  props: Record<string, unknown>
  rating: number
}

{ value: number; index: number; label: string }

`item`
The slot for each item.
`item-label`
The slot for each item label.

SASS Variables

name	default
`$rating-item-align-items`	center
`$rating-item-button-opacity`	1
`$rating-item-button-transition-property`	transform
`$rating-item-focused-button-overlay-opacity`	var(--v-hover-opacity)
`$rating-item-icon-transform`	scale(1.25)
`$rating-item-transition-timing-function`	settings.$decelerated-easing
`$rating-white-space`	nowrap

#VRating API

VRating API