Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trmcnvn/ember-star-rating
:star: An ember.js component for star ratings using svgs!
https://github.com/trmcnvn/ember-star-rating
ember-addon emberjs rating stars svg
Last synced: 4 days ago
JSON representation
:star: An ember.js component for star ratings using svgs!
- Host: GitHub
- URL: https://github.com/trmcnvn/ember-star-rating
- Owner: trmcnvn
- License: mit
- Created: 2016-10-17T20:14:34.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:04:11.000Z (almost 2 years ago)
- Last Synced: 2024-10-31T17:56:50.449Z (14 days ago)
- Topics: ember-addon, emberjs, rating, stars, svg
- Language: JavaScript
- Homepage: http://vevix.net/ember-star-rating
- Size: 5.15 MB
- Stars: 15
- Watchers: 3
- Forks: 8
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-star-rating
[](http://badge.fury.io/js/ember-star-rating)
[](https://travis-ci.org/trmcnvn/ember-star-rating)
[](https://app.fossa.io/projects/git%2Bgithub.com%2Ftrmcnvn%2Fember-star-rating?ref=badge_shield)
[Ember.js](http://www.emberjs.com) component for ratings.
Check out the dummy app [here](http://vevix.net/ember-star-rating)
### Installing the Add-on
* Ember.js v3.4 or above
* Ember CLI v2.13 or above
* Node.js v8 or above
In your application's directory:
```bash
$ ember install ember-star-rating
```
### Using the Add-on
Use the component in your template:
```hbs
```
or with positional params.
```hbs
{{star-rating rating}}
```
### Configuration
| 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 |
### License
[See LICENSE.md](https://github.com/trmcnvn/ember-star-rating/blob/master/LICENSE.md)
[](https://app.fossa.io/projects/git%2Bgithub.com%2Ftrmcnvn%2Fember-star-rating?ref=badge_large)