イオンヘッダーの色を変更するには

Question

私はイオン性のアプリケーションを開発しており、奇妙な動作があります。

<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に適用されるが、ヘッダーには透明であり、イオンビューではなく、ヘッダの色を示しています。 例：イオンビューが緑色で、ヘッダーが黒色の場合、ヘッダーを含めて完全に緑色に表示されます。

Answer 1

カスタムスタイル（私の場合は赤）を追加します。

.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; 
}