# Most common usage scenario
NOT YET DOCUMENTED
This section is not fully documented yet. We are doing our best to make our documentation a good and complete source of knowledge about Storefront UI. If you would like to help us, please don't hesitate to contribute to our docs. You can read more about it here.
- Maximum score
- Score (obviously must be less than maximum)
- custom icon for finalScore. Provide single icon that will be automatically repeated
- custom icon for negative (left) finalScore. Provide single icon that will be automatically repeated
# CSS modifiers
# SCSS variables
$rating__icon-positive-fill: $c-green-primary !default; $rating__icon-negative-fill: $c-dark-primary !default;
You can override SCSS variable values bound to this component in
sfui.scss in the root of your project.
If you want to customize this component even more you can use its partials for limitless customization.
<template lang="html" src="@storefront-ui/vue/src/components/atoms/SfRating/SfRating.html"></template> <script src="@storefront-ui/vue/src/components/atoms/SfRating/SfRating.js"></script> <style lang="scss"> @import "~@storefront-ui/shared/styles/components/SfRating.scss"; </style>
You can read about using component partials here
# Play with this component
See all available configurations and play with this component on Storybook.