##Introduction:
This is an ionic-ratings
component which can be used with any Ionic framework's application.
##Prerequisites.
- node.js
- bower
- gulp.
##How to use:
bower install ionic-ratings --save
This will install the latest version released.
<!-- path to ionic/angularjs js -->
<script src="lib/ionic-ratings/dist/ionic-ratings.min.js"></script>
or
<script src="lib/ionic-ratings/src/ionic-ratings.js"></script>
angular.module('mainModuleName', ['ionic', 'ionic-ratings']){
//
}
.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. 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. 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.
.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.
Without ng-repeat
<ionic-ratings ratingsobj='ratingsObject' index='0'></ionic-ratings>
Within ng-repeat
<ionic-ratings ratingsobj='ratingsObject' index='$index'></ionic-ratings>
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.
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:
The whole ionic-ratings
component functionality has been implemented, and it can be installed with the command bower install ionic-ratings --save
Read only feature added.
##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
Comment or rate it : http://market.ionic.io/plugins/ionicratings