Morpheme

Appearance

Rating ​

A rating component is a user interface element that allows users to rate a product, service, or experience by selecting a number of stars or another similar symbol. It's commonly used in e-commerce websites, review platforms, and feedback systems to gather user opinions and provide an overall score for a particular item. The rating component is typically displayed as a visual representation, such as a series of stars, and users can select the number of stars that corresponds to their rating. The average rating is then calculated based on the ratings provided by multiple users.

Usage ​

Basic Usage ​


v-model ​

The component also supports the v-model directive, which allows you to bind the value of the progress bar to a data property.

Half Stars ​

Props ​

PropTypeDefaultDescription
incrementNumber1The increment of the rating change.
ratingNumber0The initial rating value.
roundStartRatingBooleantrueWhether to round the initial rating value to the nearest increment.
activeColor[String, Array]"#ffd055"The color of the active (filled) stars.
inactiveColorString"#d8d8d8"The color of the inactive (unfilled) stars.
maxRatingNumber5The maximum number of stars.
starPointsArray[]The points for each star shape.
starSizeNumber24The size of the stars.
showRatingBooleanfalseWhether to display the current rating value.
readOnlyBooleanfalseWhether the rating can be changed by user interaction.
textClassString""The class applied to the rating text.
inlineBooleanfalseWhether to display the rating in a row or a column.
borderColorString"#999"The color of the star border.
activeBorderColor[String, Array]nullThe color of the active star border.
borderWidthNumber0The width of the star border.
roundedCornersBooleanfalseWhether to display the stars with rounded corners.
paddingNumber0The padding between the stars.
rtlBooleanfalseWhether to display the rating right-to-left.
fixedPointsNumbernullThe fixed number of decimal points for the rating value.
glowNumber0The size of the glow around the stars.
glowColorString"#fff"The color of the glow around the stars.
clearableBooleanfalseWhether the rating can be cleared to 0 by user interaction.
activeOnClickBooleanfalseWhether the active color changes on click.
animateBooleanfalseWhether to animate the transition of the rating change.

Events ​

Event NameDescription
update:ratingTriggered when the rating is updated.
hover:ratingTriggered when the mouse hovers over a star.

CSS Variables ​

scss
:root {
  // hint
  --v-star-rating-hint-font-size: var(--size-font-sm);
  --v-star-rating-hint-color: var(--color-gray-500);
  --v-star-rating-hint-margin-top: var(--size-spacing-1);
}
:root {
  // hint
  --v-star-rating-hint-font-size: var(--size-font-sm);
  --v-star-rating-hint-color: var(--color-gray-500);
  --v-star-rating-hint-margin-top: var(--size-spacing-1);
}

Standalone Installation ​

You can also install the Rating component individually via @morpheme/rating package:

bash
npm i @morpheme/rating
npm i @morpheme/rating
vue
<script setup lang="ts">
import {Rating as VRating} from '@morpheme/rating';
</script>

<template>
  <VRating :rating="4" />
</template>
<script setup lang="ts">
import {Rating as VRating} from '@morpheme/rating';
</script>

<template>
  <VRating :rating="4" />
</template>

Storybook ​

View Storybook documentation here.