Как я могу изменить цвет панели инструментов в ионном в соответствии с пользовательским вводом - PullRequest
0 голосов
/ 24 апреля 2018

У меня есть приложение Ionic, и я хочу, чтобы пользователь мог выбрать тему

https://i.stack.imgur.com/h21LD.png

Как эффективно изменить все фоны панели инструментовв приложении?

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Есть несколько способов:

  1. Вы можете использовать переменную и присвоить эту переменную color в вашем html-файле.
  2. Вы можете создать класс css для каждой темы и, в зависимости от значения переменной, которая меняется в зависимости от выбора пользователя, назначить этот класс вашим компонентам.

Если все, что вам нужно сделать, это изменить цвет заголовка, используйте метод 1. Измените значение переменной color динамически:

<ion-header>
   <ion-navbar color={{color}}>
   <ion-title >Home</ion-title>
</ion-navbar>

Вы можете увидеть полный код здесь и рабочий пример здесь:

https://stackblitz.com/edit/ionic-6j7dz7

0 голосов
/ 24 апреля 2018

Используйте возможности каскадных таблиц стилей. Определите класс темы на верхнем уровне, как материал. Верхний класс дизайна md в ионном режиме и создайте свои темы, как

.
.theme1 ion-header toolbar{
  [...]
}

Затем измените этот верхний класс по выбору пользователя с ngClass

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...