ändern Ionen Segment Textfarbe

Question

ich Code unten und ich möchte Textfarbe der Segment Tasten können

<ion-content> 
    <ion-toolbar color="header"> 
    <ion-segment [(ngModel)]="tripType"> 
     <ion-segment-button value="OW"> 
     One Way 
     </ion-segment-button> 
     <ion-segment-button value="RT"> 
     Round Trip 
     </ion-segment-button> 
    </ion-segment> 
    </ion-toolbar> 
</ion-content> 

Ich sehe $ Segment-button-ios-Text-Farbe wie Saas Variable ändern, aber ich don Ich weiß nicht, wie man es benutzt.

Answer 1

Grundsätzlich schreiben wir Stile in css/scss Dateien und enthalten sie in HTML-Dateien.

Sie können so schreiben <ion-segment-button value="OW" style="color: red;">, aber das ist keine gute Praxis. Wenn wir Inline-Styles wie gesagt schreiben, können wir sie nicht überschreiben (können nicht geändert werden).

Also besser eine css/scss Datei zu haben und diese um eine Klasse zu <ion-segment-button> wie <ion-segment-button class="segment-button"> haben und Stil in css/scss Datei schreiben, wie unten gezeigt und es in HTML-Datei funktioniert

.segment-button { 
    color: red; // here, instead of "red" you can use sass variable if it was already defined 
} 

Der Code unten wie oben gleiche

$segment-button-ios-text-color: red 
.segment-button { 
    color: $segment-button-ios-text-color; 
} 

Answer 2

können Sie außer Kraft setzen $segment-button-ios-text-color in variables.scss und es wird für alle Segmenttasten eingestellt werden in die App für IOS App.

Wenn Sie für Android außer Kraft setzen möchten, setzen Sie den Wert für $segment-button-md-text-color

$segment-button-ios-text-color: red; 

Dies wird

automatisch in den Build-Prozess durch Ionic eingestellt werden Wenn Sie für einen bestimmten HTML außer Kraft setzen möchten, setze es in die entsprechende scss-Datei. Beispiel für home.html mit Wahl home, stellen die unten in home.scss:

home{ 
.segment-button { 
    color: red; //as suggested by @Mr_Perfect 
    } 
}