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

| Property | Attribute | Description | Type | Default | | --------------- | ---------------- | ----------- | --------- | ------- | | defaultRating | default-rating | The default rating when the component is loaded | number | 3 | | numStars | num-stars | The total number of stars | number | 5 | | rounded | rounded | Gives the stars a more bubbly look | boolean | true |

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

Events

| Event | Description | Type | | -------------- | ----------- | ------------------ | | ratingChange | Emitted when the rating is changed | CustomEvent<any> |

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);
}