Verändern Sie die Schrift-Farbe der Ionen-Titel in ionic 2

Hey ich mache eine todo-Liste app in ionic2, ich habe ein sidebar-Liste.
In list.html ich habe den folgenden code:

<ion-navbar *navbar>
  <a menu-toggle>
    <icon menu></icon>
  </a>
  <ion-title class="listTitle">My First List</ion-title>
</ion-navbar>

Ich versuche, ändern Sie die Farbe von "Meine Erste Liste" weiß mit den css.
aber es funktioniert nicht.
Auch ich definiert eine Hintergrundfarbe für den Titel, aber es überschreibt das Menü-Symbol. Warum ist das so?

Css:

.listTitle
{
    background-color : #58B43F;
    color : #ffffff !important;
    box-shadow : 0px 6px 10px #888888;
}

Mein erwartetes Ergebnis ist, dass die Navigationsleiste wird in grüner Farbe mit weißen Titel und die weiße Menü-Symbol. Wie soll ich das machen?

Dank.

InformationsquelleAutor asaf regev | 2015-11-29

  1. 2

    Ionic 2 verwendet keywords, um die Referenz-SASS-Variablen aus der app.variables.scss Datei, die Hinzugefügt werden können, wie die Attribute der tags. Mit diesem können wir ändern primary und secondary zu grün und weiß:

    $colors: (
  primary:    #58B43F,
  secondary:  #fff,
  ...
);

    Für einige Grund es didn ' T arbeiten, wenn ich versuchte, Sie auf anwenden, um die secondary Attribut einer Farbe, die ion-title tag, aber eine verschachtelte text-tag funktioniert (z.B. <p>).

    So, unten ist, wie diese Farbe Aliase werden verwendet, um Stil ion-navbar (beachten Sie speziell, wo primary und secondary Aliase sind, die innerhalb der tag-Deklarationen):

    <ion-navbar primary *navbar>
  <a menu-toggle>
    <icon menu></icon>
  </a>
  <ion-title>
    <p secondary>My First List</p>
  </ion-title>
</ion-navbar>

    EDIT: Andere Anpassungen

    Anpassen der navbar Höhe, fügen Sie diese zu app.variables.scss:

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

    Verwenden Sie einen neuen schriftart-Familie, überschreiben Sie die ion-navbar Stil:

    ion-navbar {
  font-family: 'MyFontFamily';
  text-transform: uppercase;
  letter-spacing: 0.14em; 
}

    InformationsquelleAutor courtness

Schreibe einen Kommentar