Ionic > Rating Star 구현하기 (별을 붙이는 사람)

iOS 앱의 평가 등에 사용되는 Rating Star(아래 그림의 녀석)를 구현했지만, Ionic 표준의 컴포넌트에 그와 같은 것이 없었기 때문에, 무리하게 구현해 보았습니다. 도움이 되면.

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓


사용하는 것은 ionic-range + CSS

html

<ion-range min="1" max="5" step="1" snaps="true" class="rate-starts" margin-right [(ngModel)]="rate">
</ion-range>

css

ion-range.rate-starts {
  font-family: "Ionicons"
}

ion-range.rate-starts .range-tick {
  background: transparent;
}

ion-range.rate-starts .range-tick:before {
  content: '\f4b2';
  color: #eed755;
  font-size: 4rem;
  position: absolute;
  left: -17px;
  top: -21px;
}

ion-range.rate-starts .range-tick.range-tick-active:before {
  content: '\f4b3';
}

ion-range .range-knob-handle {
  display: none;
}


ion-range.rate-starts .range-bar {
  background: transparent;
}

CSS는 assets에 파일을 추가하고 index.html에서 읽었습니다. ( host :/deep/, >>> 의 대체를 찾을 수 없기 때문에 ).
아이콘은 Ionic 글꼴을 유용합니다. 여기는 약간의 아이디어입니다.