ionic1-star-rating
v1.2.13
Published
This is a StarRating component which provides a complete set of features based on modern web technologies. The js part is written in typescript and well tested. Nearly all logic depending on the visual state is developed over css3 techniques. The js part
Downloads
20
Maintainers
Readme
Ionic1 Star Rating ⭐⭐⭐⭐⭐
⭐ Ionic 1 Component written in typescript, based on css only techniques. ⭐
Ionic1 Star Rating is a Ionic specific Angular1.6 component written in typescript.
It is based on css-star-rating, a fully featured and customizable css only star rating component written in scss.
##Related Projects
| Css | Angular 1 | Angular | Ionic 1 | |--- |--- |--- |--- | | | | | | | Css Star Rating | Angular1 Star Rating | Angular Star Rating |Ionic1 Star Rating |
Features
Beside all other features listed below it is optimized for mobile which means it implements touch gestures over ionics built in gestures. This module implements all Features from CSS-STAR-RATING. It also provides callbacks for all calculation functions used in the component as well as all possible event emitters.
- [x] id - The html id attribute of the star rating
- [x] rating - The actual Star rating
- [x] showHalfStars - To display half stars or not
- [x] numOfStars - The max number of stars you can rate
- [x] size - The different sizes of the component
- [x] space - The space between stars
- [x] staticColor - A static color for the stars
- [x] disabled - Component is in disabled mode
- [x] starType - Stars can be displayed as svg, character or icon-font like fontawesome, glyphicons or ionicons
- [x] labelText - The value of the label text
- [x] labelVisible - If the label is visible or not
- [x] labelPosition - The position of the label
- [x] speed - The duration of the animation
- [x] direction - The direction of the component i.e. right to left
- [x] readOnly - Click event is disabled
- [x] getColor - Custom function to calculate the color for a rating
- [x] getHalfStarVisible - Custom function to calculate value for displaying half stars or not
- [x] onClick - Event emitter for onClick action
- [x] onRatingChange - Event emitter for onRatingChange event
- [x] onHover - Event emitter for touch/drag gestures
Browser support
| IE | Firefox | Chrome | Safari | Opera | |--- |--- |--- |--- |---| | > 11 | > 50 | > 55 | > 10 | > 41 | | | | | | |
Install
*Get Ionic1 Star Rating:
- clone & build this repository
- download as .zip
- via npm: by running
$ npm install ionic1-star-rating
from your console - via bower: by running
$ bower install ionic1-star-rating
from your console - via cdn: by adding the git-cdn reference in your index.html
<script src="https://cdn.rawgit.com/BioPhoton/ionic1-star-rating/v1.2.11/dist/index.js"></script>
Load library as minified js file
<script src="[bower or npm folder or git-cdn path]/ionic1-star-rating/dist/index.js"></script>
*Load library as ts module
import angularStars = require('ionic1-star-rating/dist/index.js');
Inject it into angular
angular.module('myApp', ['star-rating'])
Use it
<star-rating-comp rating="'3.0'"></star-rating-comp>
Component Properties
Input (< bindings)
id: string (Optional)
The html id attribute of the star rating
Default: undefined
<star-rating-comp id="'my-id'"></star-rating-comp>
rating: number (Optional)
The actual star rating value
Default: 0
<star-rating-comp rating="3"></star-rating-comp>
showHalfStars: boolean (Optional)
To show half stars or not
Options: true, false
Default: false
<star-rating-comp show-half-stars="true"></star-rating-comp>
numOfStars: number (Optional)
The possible number of stars to choose from
Default: 5
<star-rating-comp num-of-stars="6"></star-rating-comp>
label-text: string (Optional)
The label text next to the stars.
Default: undefined
<star-rating-comp label-text="'My text!'"></star-rating-comp>
labelPosition: starRatingPosition (Optional)
The position of the label
Options: top, right, bottom, left
Default: left
<star-rating-comp label-position="'top'"></star-rating-comp>
space: starRatingStarSpace (Optional)
If the start use the whole space or not.
Options: no, between, around
Default: no
<star-rating-comp space="'around'"></star-rating-comp>
size: starRatingSizes (Optional)
The height and width of the stars.
Options: small, medium, large
Default: ok
<star-rating-comp size="'small'"></star-rating-comp>
color: starRatingColors (Optional)
Possible color names for the stars.
Options: default, negative, ok, positive
Default: undefined
<star-rating-comp color="'positive'"></star-rating-comp>
disabled: boolean (Optional)
The click callback is disabled, colors are transparent
Default: false
<star-rating-comp disabled="true"></star-rating-comp>
direction: string (Optional)
The direction of the stars and label.
Options: rtl, ltr
Default: rtl
<star-rating-comp direction="'ltr'"></star-rating-comp>
readOnly: boolean (Optional)
The click callback is disabled
Default: false
<star-rating-comp read-only="true"></star-rating-comp>
speed: starRatingSpeed (Optional)
The duration of the animation in ms.
Options: immediately, noticeable, slow
Default: noticeable
<star-rating-comp speed="'slow'"></star-rating-comp>
starType: starRatingStarTypes (Optional)
The type of start resource to use.
Options: svg, icon, custom-icon
Default: svg
<star-rating-comp star-type="'icon'"></star-rating-comp>
getColor: Function (Optional)
Calculation of the color by rating.
Params: rating, numOfStars, staticColor
Return: colorName as string
<star-rating-comp get-color="parentCtrl.getColor(rating, numOfStars, staticColor)"></star-rating-comp>
getHalfStarVisible: Function (Optional)
Calculation for adding the "half" class or not, depending on the rating value.
Params: rating
Return: boolean
<star-rating-comp get-half-star-visible="parentCtrl.getHalfStarVisible(rating)" rating="3.1"></star-rating-comp>
function getHalfStarVisible(rating) {
var absDiff = Math.abs(rating % 1);
if(absDiff == 0.1) {
return false;
}
return absDiff > 0;
}
Output (& bindings)
onClick: Function (Optional)
Callback function for star click event
Params: $event
<star-rating-comp on-click="parentCtrl.onClick($event)"></star-rating-comp>
function onClick($event) {
parent.clickCount = parent.clickCount + 1;
}
onRatingChange: Function (Optional)
Callback function for rating update event
Params: $event
<star-rating-comp on-rating-change="parentCtrl.onRatingChange($event)"></star-rating-comp>
function onRatingChange($event) {
parent.rating = $event.rating;
}