Изменить цвет шрифта ion-title в ionic 2

Question

Эй, я делаю приложение списка дел в ionic2, у меня есть список боковых панелей. В list.html У меня есть следующий код:

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

Я пытаюсь изменить цвет «Мой первый список» белый с CSS. но он не работает. Также я определил цвет фона для названия, но он переопределяет значок меню. Почему это?

CSS-код:

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

Моего ожидаемый результат в том, что Navbar будет в зеленом цвете с белым заголовком и белым значком меню. Как мне это сделать?

Спасибо.

Answer 1

Ionic 2 использует ключевые слова для ссылки на переменные SASS из файла app.variables.scss, которые могут быть добавлены в качестве атрибутов непосредственно в теги. С помощью этого мы можем изменить primary и secondary в зеленый и белый:

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

почему-то не работал, когда я пытался применить атрибут secondary цвета к ion-title тега, но вложенный текстовый тег работает отлично (например, <p>).

Итак, ниже, как эти цвета псевдонимы используются для стиля ion-navbar (обратите внимание, в частности, где primary и secondary псевдонимов помещаются в декларациях тегов):

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

EDIT: Другие настройки

Чтобы настроить высоту навигатора, добавьте их в app.variables.scss:

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

Чтобы использовать новое семейство шрифтов, отмените стиль ion-navbar: