Skip to content

Latest commit

 

History

History
136 lines (98 loc) · 3.69 KB

README.md

File metadata and controls

136 lines (98 loc) · 3.69 KB
Raw

ionic-rating

Documentation Maintenance License: MIT

A simple Ionic 4 stars rating component using Angular, with an easy API and support for all methods of binding (Property and Event Binding, Template Forms and Reactive Forms).

📝 Table of Contents

✅ Prerequisites

The current version of the library is compatible with Ionic 4. To use it with Ionic 3, please install v1.x.x.

⬇️ Install

Using npm

npm install --save ionic-rating

Using yarn

yarn add ionic-rating

🛠 Setup

Once installed you need to import our module in the parent module for the component you will be using it in:

import { IonicRatingModule } from 'ionic-rating';

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

Usage

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

<ion-rating [rate]="rate"
        readonly="false" <!--default value-->
        size="default" <!--default value-->
        (rateChange)="onRateChange($event)">
</ion-rating>

Template Forms:

<ion-rating [(ngModel)]="rate"
        readonly="false" <!--default value-->
        size="default" <!--default value-->
        (ngModelChange)="onModelChange($event)">
</ion-rating>

Reactive Forms:

<ion-rating formControlName="rate"
        readonly="false" <!--default value-->
        size="default" <!--default value-->
</ion-rating>

API

Properties

  • rate: number [0-5]
  • readonly: boolean that controls wether editing the rating is allowed or not
  • resettable: boolean that controls wether the rating should reset if the same rate is selected again
  • size: 'small' | 'default' | 'large'

Events

  • hover: EventEmitter<number>, called whenever you hover on a rating value
  • leave: EventEmitter<number>, called whenever you stop hovering on the rating, it passes the last value you hovered on before leaving
  • rateChange: EventEmitter<number>, called whenever you select a rating value

Styling

ion-rating {
  --star-color: gray;
  --star-color-filled: green;
}

Author

👤 Rodaina Mohamed

🤝 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 © 2019 Rodaina Mohamed.
This project is MIT licensed.