如何更改离子头颜色

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

现在，我可以看到应用于导航栏的背景颜色属性，但标题是透明的，并且显示 ion-view 的颜色，但不显示标题。 示例：如果我的 ion-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; 
}