diff --git a/README.MD b/README.MD index 766d959..f3f2eeb 100644 --- a/README.MD +++ b/README.MD @@ -1,12 +1,12 @@ # Angular Star Rating ⭐⭐⭐⭐⭐ -#### ⭐ Angular Star Rating is a >2 Angular component made with ❤, based on css only techniques. ⭐ +#### ⭐ Angular Star Rating is a Angular 2+ component made with ❤, based on css only techniques. ⭐ ![License](https://img.shields.io/npm/l/angular-star-rating.svg) [![NPM Version](https://img.shields.io/npm/v/angular-star-rating.svg)](https://www.npmjs.com/package/angular-star-rating) [![NPM](https://img.shields.io/npm/dt/angular-star-rating.svg)](https://www.npmjs.com/package/angular-star-rating) -Angular Star Rating is a >2 Angular component made with ❤. +Angular Star Rating is a Angular 2+ component made with ❤. It is based on best practice UX/UI methods, accessibility in mind and an eye for details. In love with reactive forms the component is easy to control over the keybord. @@ -32,6 +32,7 @@ Fully featured this component is provided with: - [x] it integrates well with **reactive forms** and all it's states - [x] focus and blur events are handled for a **smooth keyboard navigation** - [x] it's **keyboard control** is even better than a native input once :-) +- [x] mouse enter and leave events are used to generate a nice **on hover interaction** - [x] importable as a **angular ngModule** it is a plug and play to use ## Related Projects @@ -119,15 +120,19 @@ If something is not working check if ```typescript import {Component} from "@angular/core"; -import {IStarRatingOnClickEvent, IStarRatingOnRatingChangeEven} from "angular-star-rating/src/star-rating-struct"; +import {IStarRatingOnClickEvent, IStarRatingOnRatingChangeEven, IStarRatingIOnHoverRatingChangeEvent} from "angular-star-rating/src/star-rating-struct"; @Component({ - selector: 'my-event-component', + selector: 'my-events-component', template: ` + + (onRatingChange)="onRatingChange($event)" + (onHoverRatingChange)="onHoverRatingChange($event)"> +

onHoverRatingChangeResult: {{onHoverRatingChangeResult | json}}

onClickResult: {{onClickResult | json}}

onRatingChangeResult: {{onRatingChangeResult | json}}

` @@ -135,6 +140,7 @@ import {IStarRatingOnClickEvent, IStarRatingOnRatingChangeEven} from "angular-st export class MyEventsComponent { onClickResult:IStarRatingOnClickEvent; + onHoverRatingChangeResult:IStarRatingIOnHoverRatingChangeEvent; onRatingChangeResult:IStarRatingOnRatingChangeEven; onClick = ($event:IStarRatingOnClickEvent) => { @@ -147,6 +153,11 @@ export class MyEventsComponent { this.onRatingChangeResult = $event; }; + onHoverRatingChange = ($event:IStarRatingIOnHoverRatingChangeEvent) => { + console.log('onHoverRatingChange $event: ', $event); + this.onHoverRatingChangeResult = $event; + }; + } ``` @@ -388,7 +399,6 @@ Default: undefined ``` - **getColor**: Function (Optional) Calculation of the color by rating. Params: rating, number,numOfStars and staticColor @@ -429,6 +439,13 @@ Params: $event ``` +**onHoverRatingChange**: Function (Optional) +Callback function for hoverRating change event +Params: $event +```html + +``` + ## Shields and other draft [![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg)](https://github.com/BioPhoton/angular-star-rating) [![NPM](https://img.shields.io/npm/dt/angular-star-rating.svg)](https://www.npmjs.com/package/angular-star-rating)