Skip to content

Saqib92/ion-rating-stars

Repository files navigation

ion-rating-stars

Documentation Maintenance License: MIT

📝 Table of Contents

✅ Prerequisites

The current version of the library is compatible with Ionic 7+.

⬇️ Install

Using npm

npm install ion-rating-stars --save

Using yarn

yarn add ion-rating-stars

🛠 Setup

For version < 1.3.x (ngModule) Once installed you need to import our module in the parent module for the component you will be using it in:

import { IonRatingStarsModule } from 'ion-rating-stars';

@NgModule({
  ...
  imports: [IonRatingStarsModule, ...],
  ...
})
export class YourModule {
}

For version > 1.3.x (standalone components) Once installed you need to import it directly in component, you will be using it in:

import { IonRatingStarsComponent } from 'ion-rating-stars';

@Component({
  ...
  imports: [IonRatingStarsComponent, ...],
  ...
})

Usage

Include the component on page template, like the example below:

  <ion-rating-stars
  [rating]="3"
  [color]="'darkgrey'"
  [filledColor]="'orange'"
  [margin]="2"
  [size]="20"
  [disabled]="false"
  [opacity]="0.5"
  [isHalfStar]="true"
  (ratingChange)="ratingChanged($event)"></ion-rating-stars>

API

Properties

  • rating: number [0-5].
  • color: string color of stars. applies as color default darkgrey.
  • filledColor: string filledColor of stars. applies as color default orange.
  • margin: number space between stars in pixels. applies as margin-right. default 20.
  • size: number size of stars. applies as font-size. default 20.
  • disabled: boolean disables the events and anything on ratings. applies as pointer-events. default false.
  • opacity: number change stars opacity when disabled is true. applies as number default 0.5
  • isHalfStar: boolean to Enable/Disable half stars. applies as boolean default false

Events

  • ratingChange: EventEmitter<number>, called whenever you change a rating value

Author

👤 Najam Us Saqib

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2023 Saqb92.
This project is MIT licensed.