Wie kann ich die Farbe des Iontitels ändern?

Ich versuche Farbe des Ionen Titel in ionischen 2.Wie kann ich die Farbe des Iontitels ändern?

ich diesen folgenden Code ändern müssen:

<ion-header> 
    <ion-navbar> 
    <ion-title primary>Title</ion-title> 
    </ion-navbar> 
</ion-header>

Die Farbe des ion-title ändern sich nicht. Ich versuche mehrere Dinge wie:

Mit der zweiten habe ich den Titel in der richtigen Farbe, aber der Header ist groß. Also füge ich dies in die Variablen ein. Scss:

$toolbar-ios-height: 5rem; // ios 
$toolbar-md-height: 5rem; // android

Aber nichts zu ändern.Hat jemand eine Lösung? Oder muss ich das Tag oder h verwenden, um die Farbe zu ändern?

Quelle

2017-05-19 CoCoNours

Testen Sie auf einem mobilen Gerät? Wenn ja, bauen Sie Ihr Projekt vor dem Ausführen neu auf? Oder verwenden Sie 'ionic serve'? Versuchen Sie in Ihrer Browseroption mit 'Cache Disable' zu arbeiten. – Zooly

Ich probiere Vorschau, Gerät und Emulator. Die $ -Symbolleiste funktioniert, ich versuche es, aber nicht mit dem p oder h-Tag. Gerade wenn ich den ion-titel – CoCoNours

benötige brauchst du eine globale änderung oder für eine seite? –

die color="..." vom ion-title Element entfernen und diese sass Variablen in Ihrer variables.scss Datei:

$toolbar-md-title-text-color: #777; 
$toolbar-ios-title-text-color: #777; 
$toolbar-wp-title-text-color: #777;

Wenn Sie eine der Farben, die in den genannten Farbvariablen

$colors: (
    primary: #488aff, 
    secondary: #32db64, 
    danger:  #f53d3d, 
    light:  #f4f4f4, 
    dark:  #222, 

    ... 

    custom:  #777 
);

Sie verwenden möchten kann es tun, indem Sie map-get wie folgt verwenden:

$toolbar-md-title-text-color: map-get($colors, custom); 
$toolbar-ios-title-text-color: map-get($colors, custom); 
$toolbar-wp-title-text-color: map-get($colors, custom);

Hinweis:

die Farbe mit nur die color Attribut Einstellung hat sich seit der 3.0.0-Version von Ionic more info veraltet.

Update:

[...] alle das Element auf der Navigationsleiste der Farbe wechseln, können wir nur der ändern Ion-Titel? Oder haben Sie eine zweite Variable, um die anderen Elemente zu ändern?

Sie diesen Stil Regel in der app.scss Datei hinzufügen können (es global zu machen), und es wird nur der Titel und sonst nichts ändern:

.toolbar-title.toolbar-title-md, 
.toolbar-title.toolbar-title-ios, 
.toolbar-title.toolbar-title-wp { color: map-get($colors, custom); }

Quelle

2017-05-19 12:16:33 sebaferreras

Tanks für die Antwort, es funktioniert! – CoCoNours

Es tut uns leid, Sie wieder zu stören, aber alle Elemente auf der Navigationsleiste ändern die Farbe. Können wir nur den Ion-Titel ändern? Oder haben Sie eine zweite Variable, um die anderen Elemente zu ändern? – CoCoNours

Mach dir keine Sorgen, wir sind hier, um zu helfen :) Scheint wie ein Fehler, aber in jedem Fall, anstatt die Variable sass zu verwenden, können Sie diese Stilregel in der app.scss Datei hinzufügen (um es global zu machen) und es ändert nur den Titel und nichts anderes: '.toolbar-title.toolbar-titel-md, .toolbar-title.toolbar-titel-ios, .toolbar-title.toolbar-titel-wp {farbe: map-get ($ Farben, Benutzerdefiniert); } ' – sebaferreras

ich diese Frage wissen beantwortet wurde, sondern ein eine andere Art und Weise die Textfarbe im Titel zu setzen, ist in der variables.scss Datei,

$colors: (
    calm: (
     base: #000, 
     contrast: #ffc900 
    ), 
    etc.. 
); 



<ion-navbar color="calm"> 
    <ion-title>Some Text</ion-title> 
</ion-navbar>

Basis Ihre Hintergrundfarbe sein wird und der Kontrast wird Ihren Text/Symbol Farbe

sein

Quelle

2017-05-19 15:52:56

Genau das, was ich gesucht habe, wollte ich die Ion-Titelfarbe auf einer bestimmten Seite nicht global ändern. – Samiullah

Wie kann ich die Farbe des Iontitels ändern?

Antwort

Verwandte Themen