Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rajeshwarpatlolla/ionic-ratings
'ionic-ratings' bower component for ionic framework applications
https://github.com/rajeshwarpatlolla/ionic-ratings
angularjs hybridapp ionic ratings
Last synced: 2 months ago
JSON representation
'ionic-ratings' bower component for ionic framework applications
- Host: GitHub
- URL: https://github.com/rajeshwarpatlolla/ionic-ratings
- Owner: rajeshwarpatlolla
- License: mit
- Created: 2015-07-31T05:49:27.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-11-02T16:29:33.000Z (over 5 years ago)
- Last Synced: 2024-11-10T09:12:28.098Z (3 months ago)
- Topics: angularjs, hybridapp, ionic, ratings
- Language: JavaScript
- Homepage:
- Size: 21.5 KB
- Stars: 56
- Watchers: 6
- Forks: 35
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://www.bithound.io/github/rajeshwarpatlolla/ionic-ratings)
##Introduction:
This is an `ionic-ratings` component which can be used with any Ionic framework's application.
[View plunker Demo](http://plnkr.co/edit/YjpF7hqeMK0HGjeklc6z?p=preview "plunker demo")
[View codepen Demo](http://codepen.io/rajeshwarpatlolla/pen/vOQJej "codepen demo")
##Prerequisites.
* node.js
* bower
* gulp.
##How to use:
##### 1) In your project repository install the `ionic-ratings` using bower
bower install ionic-ratings --save
This will install the latest version released.
##### 2) Give the path of `ionic-ratings.js` in your `index.html` file.
````html
or
````
##### 3) In your application module inject the dependency `ionic-ratings`, in order to work with it.
````javascript
angular.module('mainModuleName', ['ionic', 'ionic-ratings']){
//
}
````
##### 4) In your controller, please define the object which you need to pass to the directive.
````javascript
.controller('ControllerName', ['$scope', function($scope) {
$scope.ratingsObject = {
iconOn: 'ion-ios-star', //Optional
iconOff: 'ion-ios-star-outline', //Optional
iconOnColor: 'rgb(200, 200, 100)', //Optional
iconOffColor: 'rgb(200, 100, 100)', //Optional
rating: 2, //Optional
minRating:1, //Optional
readOnly: true, //Optional
callback: function(rating, index) { //Mandatory
$scope.ratingsCallback(rating, index);
}
};
$scope.ratingsCallback = function(rating, index) {
console.log('Selected rating is : ', rating, ' and the index is : ', index);
};
}])
````
The properties of are as follows.
a) **iconOn** (Optional) : You can give any icon from [ionicons](http://ionicons.com/). This icon will be shown when the icon is active. Default value is `ion-ios-star`.
b) **iconOff** (Optional) : You can give any icon from [ionicons](http://ionicons.com/). This icon will be shown when the icon is inactive. Default value is `ion-ios-star-outline`.
c) **iconOnColor** (Optional) : You can give any color. The color format can be `red` or `#00FF00` or `rgb(200, 200, 100).` This color will be shown when the icon is active. The default value is `rgb(200, 200, 100)`.
d) **iconOffColor** (Optional) : You can give any color. The color format can be `red` or `#00FF00` or `rgb(200, 200, 100).` This color will be shown when the icon is inactive. The default value is `rgb(200, 100, 100)`.
e) **rating** (Optional) : You can pass any values starting from 0. This is the initial/default rating. Default value is `0`.
f) **minRating** (Optional) : You can pass any values starting from 0. This is the minimum value a user can select. Default value is `0`.
g) **readOnly** (Optional) : This takes two values. If you wish to make it read only, give `true` or else you can give `false`. Default value is `false`.
If you wish to make it read only please add the below css class to your css file.
````css
.ionic_ratings .read_only {
pointer-events:none !important;
}
````
h) **callback** (Mandatory) : This will be called when the user selects a rating. You can get the selected rating in this callback function.
##### 5) In your template you can use like below
Without ng-repeat
````html
````
Within ng-repeat
````html
````
**index** : This is mandatory property which will help to get the index of the selected item, if this is used in side `ng-repeat`. This will be sent in the callback function. The value of the `index` is zero based similar to `$index`.
##CSS Classes:
You can customize font, width and height of the icons using these classes.
##### 1) ionic_rating_icon_on
##### 2) ionic_rating_icon_off
You can also use the following css class for changing the properties of each icon.
````css
.ionic_ratings .icon {
font-size: 50px;
}
````
##Screen Shots:
Once you are successfully done with the above steps, you should be able to see the below screen shots.
##Versions:
### 1) v0.1.0
The whole `ionic-ratings` component functionality has been implemented, and it can be installed with the command `bower install ionic-ratings --save`
### 2) v0.2.0
Read only feature added.
### 3) v0.3.0
[New feature](https://github.com/rajeshwarpatlolla/ionic-ratings/issues/10)
##License:
[MIT](https://github.com/rajeshwarpatlolla/ionic-ratings/blob/master/LICENSE.md "MIT")
##Contact:
gmail : [email protected]
github : https://github.com/rajeshwarpatlolla
twitter : https://twitter.com/rajeshwar_9032
facebook : https://www.facebook.com/rajeshwarpatlolla
paypal : [email protected]
Comment or rate it : http://market.ionic.io/plugins/ionicratings