vue-dynamic-star-rating
A Highly Customizable, easy-to-use elegant stars rating component (similar to Google Play)
For a walkthrough blogpost about how I implemented this component you can head to my medium post
Demo
Usage
Install via NPM npm i vue-dynamic-star-rating
Then require in your project:
var StarRating = ;
or ES6 syntax:
Then you can register the component globally:
Vue;
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
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
{ return config: rating: 47 style: fullStarColor: '#ed8a19' emptyStarColor: '#737373' starWidth: 30 starHeight: 30 }
And bind it to the selector like so
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: