Ionic 4 star rating - styling

@madeymaja wrote:

I downloaded the ionic 4 star rating component from npm:

I can get it to display.

I have tried to change the size, colour and outline of the stars, but nothing seems to work.

In my scss file where the rating componint is displayed I have added styles:
.rating {
ion-icon {
// color: gray;
color: red;
fill: none;

&.outline {
   fill: none; 
}

&.filled {
 // color: #ffb400;
 color: pink;
}

Tried my own version:
.rating {
ion-buttons{
–width: 10px;
–height: 10px;
–border-radius: 50%;
–vertical-align: middle;
–padding-start: 2px;
–padding-end: 2px;
–color: pink;
}
}

Tried changing the size in the html:

<rating
[rate]= [item.rating]
readonly=“true”
size=“10px” size=“small” size=“default”
emptyStarIconName=“star-outline”
halfStarIconName=“star-half” (rateChange)=“onRateChange($event)”>

It would be great if someone could point me in the right direction. Should i be using another component altogether? Or how do I see the properties of the component so that I can style them? Inspecting the element does not help.

Thanks

Posts: 1

Participants: 1

Read full topic