angular1-star-rating

Angular Star Rating

Angular 1.5 Component written in typescript, based on css only techniques.

License Bower Version NPM Version
Standard Version

Build Status npm

Package Quality

Angular Star Rating is a >1.5 Angular component written in typescript.
It is based on a fully customizable css only star rating component written in scss.

DEMO

alt tag

Install

Get Angular Star Rating: - clone & build this repository - download as .zip - via npm: by running $ npm install angular-star-rating from your console - via bower: by running $ bower install angular1-star-rating from your console

Load library html <script src="bower_components/angular-star-rating/dist/index.js"></script>

Inject it into angular javascript angular.module('myApp', ['star-rating'])

Use it html <star-rating-comp size="'large'" rating="3" text="'Rating:'" on-update="crtl.onUpdate(rating)"> </star-rating-comp>

Component Properties

@ bindings

id: string (Optional)
The html id attribute of the star rating
Default: undefined

< bindings

rating: number (Optional)
The actual star rating value
Default: undefined

showHalfStars: boolean (Optional) To show half stars or not
Options: true, flase
Default: false

numOfStars: number (Optional)
The possible number of stars to choose from
Default: 5

text: string (Optional)
The text next to the stars.
Default: undefined

labelPosition: starRatingPosition (Optional)
The position of the label
Options: top, right, bottom, left
Default: left


spread: boolean (Optional)
If the start use the whole space or not.
Default: false

size: starRatingSizes (Optional)
The height and width of the stars.
Options: small, medium, large
Default: middle

color: starRatingColors (Optional)
Possible color names for the stars.
Options: default, negative, middle, positive
Default: undefined


disabled: boolean (Optional)
The click callback is disabled, colors are transparent
Default: false

readOnly: boolean (Optional)
The click callback is disabled
Default: false

speed: starRatingSpeed (Optional)
The duration of the animation in ms.
Options: immediately, noticeable, slow
Default: noticeable

starType: starRatingStarTypes (Optional)
The type of start resource to use.
Options: svg, icon, image
Default: svg

& bindings

onClick: Function (Optional)
Callback function for star click event Params: rating html <star-rating-comp on-click="ctrl.onClick(rating)"></star-rating-comp>

onUpdate: Function (Optional)
Callback function for rating update event Params: rating html <star-rating-comp on-update="ctrl.onUpdate(rating)"></star-rating-comp>

getColor: Function (Optional)
Calculation of the color by rating.
Params: rating, number,numOfStars and staticColor
Return: color name

getHalfStarClass: Function (Optional)
Calculation for adding the "half" class or not, depending on the rating value.
Params: rating
Return: boolean

comments powered by Disqus
This page was last updated 11 months ago.