Geek Answers Handbook

How to change the color of the <ion map> using ionic2

I am trying to change the color to lightgray. I used html code as below:

  <ion-card *ngFor="let details of checkOutAddr" round inset class="ion-card"> <ion-item> <ion-row> <ion-col><ion-icon ios="ios-create" md="md-create" item-right class="color1"></ion-icon> <b>{{details.name}}</b> </ion-col> </ion-row> <ion-row> {{details.stage}} </ion-row> <ion-row> {{details.main}} </ion-row> <ion-row> {{details.state}} </ion-row> <ion-row> <ion-col> <ion-icon ios="ios-call" md="md-call" item-left></ion-icon> {{details.phone}} </ion-col> </ion-row> <ion-row> <ion-col> <ion-icon ios="ios-mail" md="md-mail" item-left></ion-icon> {{details.mail}} </ion-col> </ion-row> </ion-item> </ion-card

I used scss code as below:

 .ion-card { background-color: slategray !important; }

How to get the look below img:

enter image description here

+5
source share
2 answers

To do this with more Ionic2, you need to replace the value of these sass variables :

 $card-ios-background-color $card-md-background-color $card-wp-background-color

So you just need to add a new value to app/theme/app.variables.scss , for example:

 $card-ios-background-color: slategray; $card-md-background-color: slategray; $card-wp-background-color: slategray;
+4
source

What you do is right. Although you can’t see the effect, because your markup has an inscription ion-item , which also has its own background.

So, here you can set the background so that the ionic element is transparent.

 ion-item{ background-color: transparent; }

Or don't chase the ion-card background change and rather change the background for the ion element.

+3
source

More articles:


All Articles