Package Exports

vue-scops-star-rating

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-scops-star-rating) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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: