ionic2-rating

An Angular2 component to visualize a star rating bar, built for Ionic 2.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ionic2-rating
178141.2.27 years ago8 years agoMinified + gzip package size for ionic2-rating in KB

Readme

ionic2-rating ============= An Angular2 component to visualize a star rating bar, built for Ionic 2. !Previewpreview-image !NPM versionnpm-imagenpm-url !Downloadsdownloads-imagedownloads-url !NPMnodei-imagenodei-url

How to install:

``` $ npm install --save ionic2-rating ```

How to use:

```typescript import { NgModule } from '@angular/core'; import { IonicApp, IonicModule } from 'ionic-angular'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; // Import ionic2-rating module import { Ionic2RatingModule } from 'ionic2-rating'; @NgModule({ declarations:
MyApp,
HomePage
, imports:
IonicModule.forRoot(MyApp),
Ionic2RatingModule // Put ionic2-rating module here
, bootstrap: IonicApp, entryComponents:
MyApp,
HomePage
, providers: }) export class AppModule {} ``` ```HTML (ngModel)="rate"
readOnly="false" // default value, so it can be ommited
max="5" // default value
emptyStarIconName="star-outline" // default value
halfStarIconName="star-half" // default value
starIconName="star" // default value
nullable="false" // default value
(ngModelChange)="onModelChange($event)"></rating>
```

You may also need to customize component styles:

```CSS ul { padding: 0px; &.rating li {
padding: 5px 10px !important;
background: none;
color: #ffb400;
ion-icon {
font-size: 30px;
}
} } ``` Based on ionic-rating for Ionic 1: https://github.com/fraserxu/ionic-rating