# Rating

Component for displaying score-based user ratings.

# Most common usage scenario

<template>
  <SfRating :max="max" :score="score" :icon="icon" />
</template>
<script>
import { SfRating } from "@storefront-ui/vue";
export default {
  components: {
    SfRating,
  },
  data() {
    return {
      max: 5,
      score: 3,
      icon: "star",
    };
  },
};
</script>

# Props

  • max

    • Maximum score
    • type: number
    • defaultValue: 5
  • score

    • Score (obviously must be less than maximum)
    • type: number
    • defaultValue: 1
  • icon

    • type: string
    • defaultValue: "star"

# Slots

  • icon-positive

    • custom icon for finalScore. Provide single icon that will be automatically repeated
  • icon-negative

# Events

None.

# CSS modifiers

  • .sf-rating__icon--negative

# CSS custom properties (variables)

# Overridden other components CSS variables

  • --icon-size
  • --icon-color
  • --icon-color-negative

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.