如何更換離子頭顏色

我正在開發離子應用並有奇怪的行爲。如何更換離子頭顏色

<ion-nav-bar class="bar-calm nav-title-slide-ios7"> 
      <ion-nav-back-button ng-click="clickMe()" class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back </ion-nav-back-button> 
     </ion-nav-bar>

我打算有自定義背景標題顏色。因此我將代碼更改爲

<ion-nav-bar class="bar-calm nav-title-slide-ios7" ng-style="HeaderColor"> 
      <ion-nav-back-button ng-click="clickMe()" class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back </ion-nav-back-button> 
     </ion-nav-bar>

此處HeaderColor屬性具有爲背景顏色定義的樣式。還添加 -

.nav-bar-block .bar { 
    background-color:inherit !important; 
}

現在，我能夠看到施加到NAV-酒吧，但標頭是透明的，示出了離子視圖的顏色而不是標題背景顏色屬性。示例：如果我的離子視圖爲綠色且標題爲黑色，則屏幕顯示爲完全綠色，包括標題。

來源

2017-04-12 Anand

你能發表一個有效的例子嗎？ – Nick

如何在控制器中設置HeaderColor？ –

我認爲你的酒吧冷靜是你的情況負責任的類.... –

添加自定義風格（在我的案例紅色）：

.bar.bar-custom { 
    border-color: #f40428; 
    background-color: #f40428; 
    background-image: linear-gradient(0deg, #f40428, #f40428 50%, transparent 50%); 
    color: #fff; 
}

和HTML：

<ion-nav-bar class="bar-custom"> 
    <ion-nav-back-button> 
    </ion-nav-back-button> 
</ion-nav-bar>

見Demo

您還可以更改標題顏色：

.bar.bar-custom .title { 
     color: #fff; 
}

來源

2017-04-12 11:56:44

謝謝..它的工作原理...一個快速信息..我的背景顏色頭是動態的，並從服務器檢索..什麼是可以的達到這個目標的最佳方式 – Anand

@Anand它與這個問題無關，（歡迎你加入）無論如何，你有固定的顏色列表嗎？如果是的話，使用'ng-class'並定義每個類的所有樣式。如果不是，請使用'ng-style'。通常所有的造型都使用一種顏色 –

。同意:) .. regd。查詢：這是顏色選擇器..所以任何顏色可以來..我嘗試ng樣式但背景不適用..我正在添加ng樣式的navbar ..我認爲。酒吧。酒吧定製？怎麼樣。酒吧可以在這裏實現角度？ – Anand

如何更換離子頭顏色

回答

相關問題