2.0.0 • Published 6 years ago

ionic-rating v2.0.0

Weekly downloads
346
License
MIT
Repository
github
Last release
6 years ago

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 {
  --color: gray;
  --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.

2.0.0

6 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago