##Introduction:
This is an ionic-ratings bower component which can be used with any Ionic framework’s application.
##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.
<!-- path to ionic/angularjs js -->
<script src="lib/ionic-ratings/dist/ionic-ratings.js"></script>
3) In your application module inject the dependency ionic-ratings, in order to work with it.
angular.module('mainModuleName', ['ionic', 'ionic-ratings']){
//
}
4) In your controller, please define the object which you need to pass to the directive.
.controller('ControllerName', ['$scope', function($scope) {
$scope.ratingsObject = {
iconOn : 'ion-ios-star',
iconOff : 'ion-ios-star-outline',
iconOnColor: 'rgb(200, 200, 100)',
iconOffColor: 'rgb(200, 100, 100)',
rating: 2,
minRating:1,
callback: function(rating) {
$scope.ratingsCallback(rating);
}
};
$scope.ratingsCallback = function(rating) {
console.log('Selected rating is : ', rating);
};
}])
The properties of are as follows.
a) iconOn : This is an optional property. You can give any icon from ionicons. This icon will be shown when the icon is active.
b) iconOff : This is an optional property. You can give any icon from ionicons. This icon will be shown when the icon is inactive.
c) iconOnColor : This is an optional property. 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.
c) iconOffColor : This is an optional property. 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.
e) rating : This is an optional property. You can pass any values starting from 0. This is the initial/default rating.
f) minRating : This is an optional property. You can pass any values starting from 0. This is the minimum value a user can select.
g) callback : This is a mandatory property. This will be called when the user selects a rating. You can get the selected rating in this callback.
5) In your template you can use like below
<ionic-ratings ratingsobj='ratingsObject'></ionic-ratings>
##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.
.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
##License:
MIT
##Contact:
gmail : rajeshwar.patlolla@gmail.com
github : https://github.com/rajeshwarpatlolla
twitter : https://twitter.com/rajeshwar_9032
facebook : https://www.facebook.com/rajeshwarpatlolla
paypal : rajeshwar.patlolla@gmail.com
