Rating

Component

Props

Usage

modelValue

Sets the value of the rating. Must be between 0 and 5. Supports v-model when isInteractive is enabled.

 <template>
    <Rating :modelValue="4" />
</template>
 

• Type: number
• Default: 0

size

Sets the size of the rating. Uses the RatingItemSize enum.

 <template>
    <Rating :size="RatingItemSize.LG" />
</template>
 

• Type: RatingItemSize
• Default: RatingItemSize.SM

Options

color

Sets the color of the rating. Uses the RatingItemColor enum.

 <template>
    <Rating :color="RatingItemColor.PRIMARY_BRAND" />
</template>
 

• Type: RatingItemColor
• Default: RatingItemColor.GOLD

Options

emptyIndicatorIcon

Sets the icon of the empty rating indicator.

 <template>
    <Rating emptyIndicatorIcon="mdi:star-outline" />
</template>
 

• Type: string
• Default: 'mdi:star-outline'

halfIndicatorIcon

Sets the icon of the half rating indicator.

 <template>
    <Rating halfIndicatorIcon="mdi:star-half-full" />
</template>
 

• Type: string
• Default: 'mdi:star-half-full'

fullIndicatorIcon

Sets the icon of the full rating indicator.

 <template>
    <Rating fullIndicatorIcon="mdi:star" />
</template>
 

• Type: string
• Default: 'mdi:star'

isInteractive

When set to true, the rating becomes interactive: items show a hand cursor, clicking sets the value (clicking the current value resets it to 0), and v-model updates are emitted.

 <template>
    <Rating v-model="rating" isInteractive />
</template>
 

• Type: boolean
• Default: false

hoverPreview

When isInteractive is enabled, sets whether the rating should show a preview when hovered.

 <template>
    <Rating v-model="rating" isInteractive hoverPreview />
</template>
 

• Type: boolean
• Default: true

RatingItem

The <RatingItem /> component is used to render a single rating indicator. It is used by the <Rating /> component.

Props

icon

Sets the icon of the rating indicator.

 <template>
    <RatingItem icon="mdi:star-outline" />
</template>
 

• Type: string
• Default: 'mdi:star-outline'

size and color

The use of size and color props is exactly the same as in the Rating component props.

 <template>
    <RatingItem
        :color="RatingItemColor.GOLD"
        :size="RatingItemSize.SM"
    />
</template>
 

isInteractive

Sets the interactive state of the rating indicator. If set to true, the rating indicator will display a hand cursor when hovered.