For a walkthrough blogpost about how I implemented this component you can head to my medium post
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>
The component <star-rating></star-rating>
support various property. You can use either :
- "rating" : to define the default rating value
- "star-style" : to define the style that applies to the rating. If not provided, the default values are used.
- "is-indicator-active" : to determine if an indicator should be enabled.
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 |
starStyle | Object | See the following "Customized Styling" section below | { "fullStarColor" : "#ed8a19", "emptyStarColor" : "#737373", "starWidth" : 20, "starHeight" : 20 } |
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 |
Define your config options object in the component importing StarRating e.g
data: function() {
return {
rating: 4.7,
starStyle: {
fullStarColor: '#ed8a19',
emptyStarColor: '#737373',
starWidth: 30,
starHeight: 30
}
}
}
And bind it to the selector like so
<star-rating :rating="rating" :star-style="starStyle"></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: