css - 在 ionic 中更改 ionic View 标题颜色

Question

我正在使用 ionic 入门菜单栏模板。我想更改每个页面的标题背景颜色。我目前有:

<ion-view view-title="Search">
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

我试过:

<ion-view view-title="Search" class="bar bar-header bar-assertive">
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

但它根本不起作用(内容未呈现)。 header documentation对我没有帮助。这样做的正确方法是什么？

Answer 1

一些方法可以做到这一点:

1. 您可以将 ion-nav-bar 添加到每个 View 。

   <ion-view view-title="Page 1">
     <ion-nav-bar class="bar-balanced">
       <ion-nav-back-button></ion-nav-back-button>
     </ion-nav-bar>
     <ion-content>
       ...
     </ion-content>
   </ion-view>
   

   Codepen example

2. 您还可以使用 ng-style 更新背景颜色(和任何其他属性)

   主导航栏:

    <ion-nav-bar class="bar-positive" ng-style="{'background-color': viewColor}">
       <ion-nav-back-button></ion-nav-back-button>
     </ion-nav-bar>
   

   CSS:

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

   Controller :

   $scope.$on('$ionicView.beforeEnter', function() {
       $rootScope.viewColor = 'green';
   }); 
   

   Codepen example