Как изменить цвет заголовка ion-меню, не меняя цвет ion-navbar? - PullRequest
Новая
       26

Как изменить цвет заголовка ion-меню, не меняя цвет ion-navbar?

0 голосов
/ 27 ноября 2018

У меня есть этот код ниже для ion navbar, где у меня есть один значок меню с правой стороны.И я хочу изменить цвет этого заголовка меню. Но когда я меняю цвет ion-navbar, он меняется и для заголовка меню. Я хочу отдельный цвет для ion-navbar и ion-menu. 

<ion-menu [content]="content" side="right" id="menu2">
    <ion-header>
        <ion-toolbar class="menu_header">
            <ion-title>MyApp</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list no-lines>
             <button ion-item  menuClose="menu2" detail-none>
              Item1
            </button>
            <button ion-item  menuClose="menu2" detail-none>
                Item2
            </button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-header>
    <ion-navbar primary>
        <ion-title class="header-title" text-center>
            Home
        </ion-title>
        <button ion-button icon-only menuToggle="right" end >
            <ion-icon name="menu"></ion-icon>
        </button>
    </ion-navbar>
</ion-header>

И для изменения цвета ion-navbar я добавляю следующую строку в variable.scss 

$toolbar-background: #EF473A;

Может кто-нибудь помочь мне, как сохранить отдельный цвет для обоих?

1 Ответ

0 голосов
/ 27 ноября 2018

Если вы хотите изменить цвет только для заголовков, вы можете использовать классы 

.header-title {
  color: blue;
}
.menu_header {
  color: #EF473A;
}

Если вы хотите изменить цвет для всего заголовка, вы можете сделать это на элементе.: 

body > ion-header {
  color: blue;
}
ion-menu > ion-header {
  color: #EF473A;
}

или альтернативно добавить класс к элементам, которые вы хотите изменить, но это потенциально может означать редактирование стороннего компонента ...

...