Skip to content
On this page

Rating

Basic

Rating component allows users to rate content.

Colors

You can use color prop to change the rating color.

Sizing

You can use font-size utility to adjust the size of rating.

TIP

You can use padding utilities along with all: variant (all:px-3) to increase the gap between each rating icon.

Custom icon

You can use custom icon by providing empty-icon and full-icon props.

TIP

ARating component also supports half-icon prop to customize the half icon when using halve prop.

Halve

You can use halve prop to allow half rating.

No hover hint

You can use no-hover-hint prop to disable visual changes of value before click.

Length

You can use length prop to change the amount of items.

Animate

Use animate prop to animate hovered rating icon.

TIP

You can use no-hover-hint prop along with animate prop to only animate and prevent filling the rating icon on hover.

States

ARating also supports readonly & disabled states.

When rating is readonly or disabled, rating won't animate and you won't get hover hint. This means, when you set rating in readonly or disabled state, you are implicitly setting :animate="false" & :no-hover-hint="true".

NOTE

When rating is readonly or disabled, a-rating-animated class won't apply.

API

Rating

color : ColorProp
length : string | number

Sets amount of rating items

disabled : boolean

Disable rating selection

readonly : boolean

Make rating component readonly

animate : boolean

Animate icon on hover

halve : boolean

Allows the award of half a point

emptyIcon : string

Sets empty icon

halfIcon : string

Sets half-filled icon

fullIcon : string

Sets filled icon

noHoverHint : boolean

Allows to see visual changes of value on hover

modelValue : number

Bind v-model value to rating

update:modelValue => [value: number | undefined]

Released under the MIT License.