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

现在，我可以看到应用于导航栏的背景颜色属性，但标题是透明的，并显示离子视图的颜色，但不显示标题。示例：如果我的离子视图为绿色且标题为黑色 - 显示的屏幕为绿色，包括标题。

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

如何改变离子头颜色

1 个答案: