Как изменить цвет фона панели навигации в Ionic 2?

Я пытаюсь изменить цвет фона панели навигации в Ionic 2. Я пробовал много вещей, например class="bar bar-stable" и т. д.

Прямо сейчас мой код выглядит так:

<ion-navbar  *navbar>

Таким образом, фон в настоящее время серый (по умолчанию)


mobile cordova ionic-framework ionic2 ionic
person Tyler Ruby    schedule 04.12.2015    source источник

Ответы (8)


arrow_upward
9
arrow_downward

из ionic 2 вы можете добавить собственный стиль в свой файл src/theme/variables.scss

введите описание изображения здесь

А затем добавьте класс, где вы хотите

введите описание изображения здесь

введите описание изображения здесь

Теперь посмотрите результат

введите описание изображения здесь

Ссылка: тематическое оформление вашего приложения Ionic

person Sanjoy Kanrar    schedule 18.11.2016
comment
Это хорошо, но требует поставить color="custom-color" на все теги ion-nav. - person Pierrick Martellière; 13.06.2018
comment
Ответ от @veljkoz ниже более удобен. - person Pierrick Martellière; 13.06.2018

arrow_upward
7
arrow_downward

Навигатор получил свои собственные стили. Так что вам нужно перезаписать его.

.toolbar-background {
  background-color: #0c60ee;
}
person CESCO    schedule 29.04.2016
comment
Это должен быть правильный ответ на этот вопрос. - person Chathuranga Silva; 13.10.2016
comment
Это работает, но меняет цвет текста на панели инструментов, когда я пытаюсь это сделать. - person Pierrick Martellière; 13.06.2018
comment
Куда это лучше поставить? - person The Onin; 28.06.2018

arrow_upward
4
arrow_downward

Для Ionic 2: попробуйте это

в ionic 1 можно сделать так. посмотрите здесь: заголовок Ionic

другой путь

CSS:

.theme-color {
background-color: ##009688 !important;
color: #ffffff;}

HTML:

   <ion-nav-bar class="theme-color"><ion-nav-bar>

надеюсь, что это полезно для вас.

person the_mahasagar    schedule 04.12.2015

arrow_upward
3
arrow_downward

Прямо сейчас (rc4) правильный способ сделать это — изменить файл /src/themes/variables.scss и добавить:

$toolbar-background: blue;

Это эффективно изменяет цвет везде, где используется значение. Подробнее здесь

person veljkoz    schedule 15.01.2017
comment
На самом деле, у панели инструментов есть много других свойств, например $toolbar-background $toolbar-border-color $toolbar-text-color $toolbar-active-color $toolbar-inactive-color - person kosiara - Bartosz Kosarzycki; 02.02.2017

arrow_upward
1
arrow_downward

Это работает:

<ion-navbar secondary *navbar>

В app.variables.scss в каталоге app/theme есть несколько предопределенных переменных:

 $colors: (
    primary:    #387ef5,
      secondary:  #32db64,
      danger:     #f53d3d,
      light:      #f4f4f4,
      dark:       #222,
      favorite:   #69BB7B
    );

Я понял это из следующей статьи: A Guide to Styling приложение Ionic2.

person srihari    schedule 11.02.2016

arrow_upward
1
arrow_downward

я нахожу решение для заголовка, используя атрибут цвета, как показано ниже на панели навигации:

<ion-header><ion-navbar color='primary'> ... </ion-navbar> </ion-header>

для фона панели инструментов бокового меню перейдите в файл variable.scss и добавьте этот код:

$toolbar-background: $primary;
person Monty Al Mohaisen    schedule 27.01.2018

arrow_upward
0
arrow_downward 

<ion-nav-bar primary></ion-nav-bar>

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

person Dan Bucholtz    schedule 29.04.2016
comment
Спасибо, Дэн, я ценю это! - person Tyler Ruby; 04.05.2016

arrow_upward
0
arrow_downward

К сожалению, это больше не работает в последней версии Ionic2 (по состоянию на 25.10.16 — ionic -version = 2.1.4) со следующими зависимостями в package.json:

    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@ionic/storage": "1.0.3",
    "ionic-angular": "2.0.0-rc.1",
    "ionic-native": "2.2.3",

Чтобы решить эту проблему, мне пришлось добавить к app.scss следующее:

.toolbar-background {
  background-color: blue;
}
person Russ    schedule 27.10.2016