ion-rating-stars

ion-rating-stars

📝 Table of Contents

• Prerequisites
• Install
• Setup
• Usage
• Author
• Contributing
• Show your support
• License

✅ 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

• Github: @saqib92

🤝 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.