как установить цвет фона заголовка в ионном 4

Question

Я пытаюсь другим способом, по которому я перешел по ссылке ( Как установить цвет фона IONIC 4 ) для цвета фона заголовка и пробовал в соответствии с ionic 2 и ionic 3:

Я могу сделать цвет фона для ионного содержимого, но цвет фона не подходит для заголовка.

Код:

<ion-header>
    <ion-toolbar style="background-color: red">
        <ion-title>Login</ion-title>
    </ion-toolbar>
</ion-header>

Пожалуйста, нужна ваша поддержка.

Answer 1

в вашей переменной .scss

--ion-toolbar-background: var(--ion-color-primary)

или, если вы хотите установить фон для одной страницы, вы можете определить класс CSS следующим образом:

.my-toolbar{
    --background:  var(--ion-color-primary);
}

или

.my-toolbar{
    --background:  red;
}

или как сказал Фархад

<ion-toolbar color="primary">

Answer 2

Кажется, что ионный заголовок действует скорее как контейнер для внутреннего ионного компонента (например, ионная панель инструментов).Я просмотрел ионную панель инструментов Ionic v4 Документация .Этот компонент имеет много пользовательских свойств CSS, в том числе --background, которые можно настроить.Это может быть то, что вы ищете.

Предполагая, что вы использовали CLI для создания компонента страницы 'login', вы можете добавить новое определение класса css в файл login.scss :

.new-background-color{
    --background: #54d61c;
}

А затем обратитесь к нему в вашем login.page.html файле:

<ion-header>
  <ion-toolbar class="new-background-color">
        <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

Answer 3

Я использовал следующий фрагмент кода для изменения цвета заголовка:

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>Login</ion-title>
    </ion-toolbar>
</ion-header>

Вместо основной цвет, вы можете использовать любой пользовательский цвет из файла variables.scss.

Answer 4

Так как тег стиля установлен на <ion-toolbar>, здесь применяются изменения.Добавьте style к <ion-header>.