2017-10-17 9 views
1

ionic2でサポートが必要です。問題は、SASSスタイルが、このコードでビューに影響していないです。スタイルをIonic2で変更してください

$verde : #89ce4b; 
 
$amarillo : #ece04e; 
 
$rojo : #f15959; 
 
$gris : #aaa; 
 

 
ion-icon[name="checkmark-circle"]{color:$verde;} 
 
ion-icon[name="close-circle"] \t {color:$rojo;} 
 
ion-icon[name="alert"] {color:$amarillo;} 
 
ion-icon[name="arrow-dropright-circle"] {color:$gris;}
<ion-list *ngFor="let insp of Lista"> 
 
\t \t \t <button ion-item> 
 
\t \t \t \t <ion-label>{{insp.desc}} \t 
 
\t \t \t \t <ion-icon name="{{insp.icono}}"></ion-icon> 
 
\t \t \t \t </ion-label> 
 
\t \t \t </button> 
 
</ion-list>

例えば、"insp.icono" = "checkmark-circle"あれば、それは"$verde" = #89ce4bでなければなりません。アイコンは常にデフォルトの色(グレー)で表示されます。私に何ができる?

+0

あなたは 'important'うん – Duannx

答えて

1

Ionicは、あなたのようにデータバインドを使用してアイコンをバインドすると、別の属性を付けます。

名前の代わりにng-reflect-nameを使用するようにscssを更新する必要があります。

例:

ion-icon[ng-reflect-name="heart"] { 
    color: green; 
} 
+0

各スタイルの後に追加する必要があります!できます。ありがとうございます :) – Ros

関連する問題