Променете цвета на навигационната лента по подразбиране, без да губите контролите за навигация

<ion-view view-title="Title">
  <ion-content>
  Content Here
  </ion-content>
</ion-view>

Горният код ми дава изгледа по подразбиране на ionic. Трябва да променя цвета на заглавката, запазвайки навигационните контролери по подразбиране (като икона за меню/назад), вместо да дефинирам нова заглавна лента, както е показано по-долу.

<ion-view view-title="Title">
  <ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>

<ion-content>
 Content Here
</ion-content>
</ion-view>

Има ли чист начин за решаване на проблема?


ionic-framework ionic-view ionic
person Rathan    schedule 01.09.2015    source източник

Отговори (3)


arrow_upward
4
arrow_downward

Просто направете произволен css клас

.your-sample-class{
  background: #color-code !important
}

И добавете този клас към навигационната лента на вашия проект по следния начин:

<ion-nav-bar class="bar your-sample-class" ></ion-nav-bar>
person Mudasser Ajaz    schedule 01.09.2015

arrow_upward
5
arrow_downward

За ionic 2 можете да промените цвета на фона за навигационната лента по този начин и можете да добавите персонализирани цветове http://ionicframework.com/docs/v2/theming/theming-your-app/

<ion-header>
    <ion-navbar color="primary">
        <ion-title>Connection Bluetooth</ion-title>
        <ion-buttons end>
            <button (click) = "startScanning()" ion-button>
                <!--<ion-icon name="refresh-circle"></ion-icon>-->
                <!--SCAN-->
                <ion-icon name='refresh'  md="md-refresh"></ion-icon>

            </button>
        </ion-buttons>
    </ion-navbar>

</ion-header>
person Mourad MAMASSI    schedule 19.03.2017

arrow_upward
1
arrow_downward

Можете да добавите този ред

<preference name="StatusBarBackgroundColor" value="#078ECD"/>

към файла config.xml за редактиране на цвета на панела на лентата на състоянието

Има плъгин за него: връзка

Освен това, ако искате да промените цвета само за заглавката, добавете тези редове за вашия css/scss:

ion-header-bar {
  background-color: red;
}

or

.bar.bar-positive {
  background-color: red;
}

или каквото и да е =)

person Kirill Husiatyn    schedule 01.09.2015
comment
това не е добра практика за отмяна на йонни класове като .bar-positive. Дори ако случаят е такъв, той трябва да бъде затворен в някакъв родителски клас, така че да засяга само тази конкретна страница. В противен случай това ще се отрази на цялото приложение, където се използва .bar-positive. - person Mudasser Ajaz; 01.09.2015
comment
Съгласен съм с теб, но написах .bar.bar-positive, а не само .bar-positive, както ти каза - разбира се, че са различни. И работи добре в моите проекти. Предпочитам да използвам по-малко класове, а вашият вариант също е добър. Не мисля, че !important е необходим - просто се опитайте да го използвате по-малко. - person Kirill Husiatyn; 02.09.2015
comment
За текущата ми корекция, която е много малка, така че за тази корекция просто използвам @mudasserajaz и да! използването на !important не е най-доброто решение в дългосрочен план. Чувствам, че можем просто да заменим стандартните с нашите собствени цветове, което ще спести много време. Благодаря момчета :) - person Rathan; 02.09.2015
comment
Няма за какво =) Има много решения, просто изберете най-доброто за вас - person Kirill Husiatyn; 02.09.2015