Skip to content
A highly dynamic vue stars rating component, similar to google play stars rating
Branch: master
Clone or download
Latest commit f377edf Jan 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore added gitignore to idea Dec 25, 2018
README.md Update README.md Jan 20, 2019
demo_indicator.png * added demo img with indicator Jan 12, 2019
package.json * updated package.json main to .vue file Jan 1, 2019
star-rating.vue * refactor - rating & isIndicatorActive binded in props Jan 12, 2019

README.md

vue-dynamic-star-rating

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

MIT License view on npm

For a walkthrough blogpost about how I implemented this component you can head to my medium post

Demo

4.6 Star Rating

Edit Vue Template

Usage

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

Then require in your project:

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

or ES6 syntax:

import StarRating from 'vue-dynamic-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:

Buy Me A Coffee

You can’t perform that action at this time.