ionic2-rating - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #ai #llm #golang #rust #linux #nodejs #windows #awesome #awesome-list #pytorch #mcp #openai

ionic2-rating

(★ 176)

:star: Angular star rating bar. Built for Ionic 2+.

파일 탐색기

최종 버전 다운로드 (.zip)

- copy-package.js
- index.ts
- ionic2-rating.module.ts
- ionic2-rating.spec.ts
- ionic2-rating.ts
- karma-test-shim.js
- karma.conf.js
- protractor.conf.js
- webpack.test.js
.editorconfig
.gitignore
.npmignore
.travis.yml
LICENSE
package-lock.json
package.json
preview.gif
README.md
tsconfig.json
tslint.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/andrucz/ionic2-rating

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd ionic2-rating

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

$ npm install --save ionic2-rating

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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
<rating [(ngModel)]="rate" 
        readOnly="false" 
        max="5" 
        emptyStarIconName="star-outline" 
        halfStarIconName="star-half" 
        starIconName="star" 
        nullable="false" 
        (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

[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