2015-09-01 18 views
1
<ion-view view-title="Title"> 
    <ion-content> 
    Content Here 
    </ion-content> 
</ion-view> 

上面的代碼給我的離子我需要改變標題的顏色保持默認的導航控制器(如菜單/後退圖標)的默認視圖,而不是限定的一個新的標題欄如下。改變顏色,而不會失去導航控制

<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> 

有沒有一種乾淨的方法來解決這個問題?

回答

4

只是做任何CSS類

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

並添加此類資產淨值項目的條是這樣的:

<ion-nav-bar class="bar your-sample-class" ></ion-nav-bar> 
1

您可以將此行

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

添加到文件config.xml用於編輯狀態欄面板的顏色

有是它的一個插件:link

此外,如果你想改變顏色只爲標題,添加這些行對你的CSS/SCSS:

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

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

或無論 =)

+0

這不是一種好的做法,可以覆蓋離子類,比如'.bar-positive'。即使是這樣,它應該被包含在某些父類中,因此它只會影響特定的頁面。否則,這將影響使用'。bar-positive'的整個應用程序。 –

+1

我同意你的看法,但是我寫了「.bar.bar-positive」,而不是像你所說的「.bar-positive」 - 當然他們是不同的。 它在我的項目中效果很好。 我更喜歡使用較少的類,並且您的變體也很好。 我不認爲!重要是必要的 - 只是儘量少使用它。 –

+0

對於我目前的修復,這是非常小的,所以這個修復我只是去@mudasserajaz和耶!從長遠來看,使用'!important'並不是一個最好的解決方案。我覺得我們可以將默認設置覆蓋到我們自己的顏色將節省大量時間。 Thankx guys :) –

5

對於離子2,你可以改變你的導航欄的背景顏色那樣你可以T o添加自定義顏色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> 
相關問題