javascript - 如何更改 ionic 头颜色

Question

我正在开发 ionic 应用程序并且有奇怪的行为。

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

现在，我可以看到应用于导航栏的背景颜色属性，但标题是透明的，并且显示 ionic View 的颜色，但不显示标题。 示例:如果我的 ionic View 是绿色而标题是黑色 - 显示的屏幕是全绿色的，包括标题。

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