star-rating-component v1.0.7

star-rating

Installation

npm i star-rating-component

Angular

Add this to your app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  ...
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
  ...
})
export class AppModule { }

Add this to main.ts

import { defineCustomElements } from '@igabe/star-rating/loader'

defineCustomElements(window)

Other frameworks

This is just a stencil component, so it can be used in other frameworks.

Properties

Component does not allow for zero stars. Good for us, better reviews.

Events

Styling

These css variables can be overridden

    --rating-active-fill-color 
    --rating-inactive-fill-color 
    --rating-active-stroke-color 
    --rating-inactive-stroke-color 
    --rating-star-size 
    --rating-star-spacing 
    --rating-star-shadow-color 

Example

.html

<star-rating rounded="true" defaultRating="3" numStars="5" (ratingChange)="ratingChange($event)"></star-rating>

.ts

ratingChange(event) {
    console.log('New rating: ', event.detail);
  }

.css

star-rating {
    --rating-active-fill-color: #f5f846;
    --rating-inactive-fill-color: #d8d8d8;
    --rating-active-stroke-color: #ffb400;
    --rating-inactive-stroke-color: #d8d8d8;
    --rating-star-size: 2rem;
    --rating-star-spacing: 0.1rem;
    --rating-star-shadow-color: rgba(0, 0, 0, .7);
}