Ember.js component for ratings.
Check out the dummy app here
In your application's directory:
$ ember install ember-star-rating
Use the component in your template:
<StarRating @rating={{rating}} />
or with positional params.
{{star-rating rating}}
Option | Type | Default | Info |
---|---|---|---|
rating | Number | 0 | The current rating value |
numStars | Number | 5 | The number of "stars" to render |
readOnly | Boolean | false | Whether the component can be edited or not |
anyPercent | Boolean | false | Allow setting a rating to any percentage. Example: 3.2 |
wholeOnly | Boolean | false | Only allow integer rating values. Example: 1 - 5 |
useHalfStars | Boolean | true | Allow half rating values. Example: 2.5 |
onHover | Function | NOOP | Called on the mouseMove and mouseLeave events with the rating value at the time. |
onClick | Function | NOOP | Called when the user selects a rating value. This is still invoked when readOnly is set to true |
width | Number | 26 | Width of the SVG element |
height | Number | 26 | Height of the SVG element |
viewBox | String | '0 0 26 26' | ViewBox of the SVG element |
svgPath | String | '...' | Path value of the SVG element |
fillColor | String | 'yellow' | Color of the SVG element that is considered full (has a rating) |
baseColor | String | 'lightgrey' | Color of the SVG element that is considered empty |