Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrucz/ionic2-rating
:star: Angular star rating bar. Built for Ionic 2+.
https://github.com/andrucz/ionic2-rating
angular2 angular4 angular4-component ionic ionic2 mobile star-rating typescript web
Last synced: 30 days ago
JSON representation
:star: Angular star rating bar. Built for Ionic 2+.
- Host: GitHub
- URL: https://github.com/andrucz/ionic2-rating
- Owner: andrucz
- License: mit
- Created: 2016-09-28T03:10:44.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T18:25:37.000Z (about 2 years ago)
- Last Synced: 2024-10-30T06:32:15.677Z (about 1 month ago)
- Topics: angular2, angular4, angular4-component, ionic, ionic2, mobile, star-rating, typescript, web
- Language: TypeScript
- Homepage:
- Size: 573 KB
- Stars: 178
- Watchers: 21
- Forks: 62
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-ionic2-components - Rating
- Awesome - Rating
README
ionic2-rating
=============
Angular 4 (formerly Angular 2) star rating bar, built for Ionic 2+.
![Preview][preview-image]
[![Build Status][travis-image]][travis-url] [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][downloads-url]
[![NPM][nodei-image]][nodei-url]
## How to install:
```
$ npm install --save ionic2-rating
```
## How to use:
Import `Ionic2RatingModule` on module definition that declares the page where you want to add the rating component. In some cases, all pages are declared on `src/app/app.module.ts`.
```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 {}
```
If you are using `Lazy Loading` in your application, add the `Ionic2RatingModule` to the page module instead of the app module.
```typescript
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProfilePage } from './profile';
import { Ionic2RatingModule } from "ionic2-rating";
@NgModule({
declarations: [
ProfilePage,
],
imports: [
IonicPageModule.forChild(ProfilePage),
Ionic2RatingModule // Put ionic2-rating module here
],
exports: [
ProfilePage
]
})
export class ProfilePageModule { }
```
Include the component on page template, like the example below:
```HTML
max="5"
emptyStarIconName="star-outline"
halfStarIconName="star-half"
starIconName="star"
nullable="false"
(ngModelChange)="onModelChange($event)">
```
### 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
[preview-image]: https://github.com/andrucz/ionic2-rating/blob/master/preview.gif
[npm-url]: https://www.npmjs.com/package/ionic2-rating
[npm-image]: https://img.shields.io/npm/v/ionic2-rating.svg
[nodei-image]: https://nodei.co/npm/ionic2-rating.png?downloads=true&downloadRank=true&stars=true
[nodei-url]: https://www.npmjs.com/package/ionic2-rating
[downloads-image]: https://img.shields.io/npm/dm/ionic2-rating.svg
[downloads-url]: http://badge.fury.io/js/ionic2-rating
[travis-image]: https://travis-ci.org/andrucz/ionic2-rating.svg?branch=master
[travis-url]: https://travis-ci.org/andrucz/ionic2-rating