vue-scops-star-rating

A Highly Customizable, easy-to-use elegant stars rating component (similar to Google Play)

Credit to https://github.com/JonathanDn/vue-stars-rating. I just did some changes to make it work in my projects, like watching the rating prop for changes.

For a walkthrough blogpost about how he implemented this component you can head tos his medium post

Demo

Usage

Install via NPM npm i vue-scops-star-rating

Then require in your project:

var StarRating = require('vue-scops-star-rating');

or ES6 syntax:

import StarRating from 'vue-scops-star-rating'

Then you can register the component globally:

Vue.component('star-rating', StarRating);

Or in your Vue component:

components: {
  StarRating
}

You can then use the following selector anywhere in your project:

• To get up and running quick the package now supports rendering just the selector with default values

<star-rating></star-rating>

Docs

config: {...} is a configuration object that is to be binded to vue-star-rating, api properties are:

Basics

| Property | Type | Description | Default | --- | --- | --- | --- | | rating | Number | A number between 0.0-5.0 that will determine the fullness of the 5-stars rating polygons | 1 | | isIndicatorActive | Boolean | A property that deteremines weather a rating indicator would show to the right | true |

Customized Styling

| Property | Type | Description | Default | | --- | --- | --- | --- | | fullStarColor | string | Set the full or partially-full star color | #ed8a19 | | emptyStarColor | string | Set the empty or partially-empty star color | #737373 | | starWidth | number | Set the star width | 20 | | starHeight | number | Set the star height | 20 |

Implementation Example

Define your config options object in the component importing StarRating e.g

data: function() {
    return {
        config: {
            rating: 4.7,
            style: {
                fullStarColor: '#ed8a19',
                emptyStarColor: '#737373',
                starWidth: 30,
                starHeight: 30
            }
        }
    }
}

And bind it to the selector like so

<star-rating :config="config"></star-rating>

Feedback would be much appreciated, questions, suggestions, issues are more than welcome.

If you like to support my open-source contributions and feeling generous, feel free to but a coffee to the original author: