在离子状态下更改离子视图标题颜色

Question

我正在使用离子启动器菜单栏模板。我想更改每个页面的页眉背景颜色。我目前有：

<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-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. 你也可以更新背景颜色（和任何其他属性）使用毫微克式

   主要导航栏：

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

   控制器：

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

   Codepen example

Answer 2

尝试使用下面的代码：

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

Answer 3

找不到这一个干净的解决方案，而是一个黑客可能使用$stateChangeStart事件和手动设置的类名。

angular.module('starter') 
.run(function ($rootScope) { 
    var element; 
    $rootScope.$on('$stateChangeStart', function (event, next) { 
     if (next.name) { 
      element = angular.element(document.querySelectorAll('ion-header-bar')); 
      switch(next.name) { 
       case 'tab.chats': 
        element.removeClass('bar-positive'); 
        element.removeClass('bar-balanced'); 
        element.addClass('bar-calm'); 
        break; 
       case 'tab.dash': 
        element.removeClass('bar-calm'); 
        element.removeClass('bar-balanced'); 
        element.addClass('bar-positive'); 
        break; 
       default : 
        element.removeClass('bar-calm'); 
        element.removeClass('bar-positive'); 
        element.addClass('bar-balanced'); 
      } 
     } 
    }); 
}); 

fiddle

编辑 的想法是一样的侧边栏模板，

Updated fiddle

通知行

<ion-nav-bar class="bar-positive"> 

在menu.html模板，它表示基本的标题颜色类。 但后续更改页面即国家标题颜色必须在$stateChangeStart事件手动更改，

代码：

.run(function ($rootScope) { 
    var element; 
    $rootScope.$on('$stateChangeStart', function (event, next) { 
     if (next.name) { 
      element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar')); 
      console.log(element); 
      switch(next.name) { 
       case 'app.search': 
        element.removeClass('bar-positive'); 
        element.removeClass('bar-energized'); 
        element.removeClass('bar-dark'); 
        element.addClass('bar-assertive'); 
        break; 
       case 'app.browse': 
        element.removeClass('bar-calm'); 
        element.removeClass('bar-assertive'); 
        element.removeClass('bar-dark'); 
        element.addClass('bar-energized'); 
        break; 
       default : 
        element.removeClass('bar-positive'); 
        element.removeClass('bar-energized'); 
        element.removeClass('bar-assertive'); 
        element.addClass('bar-dark'); 
      } 
     } 
    }); 
}); 

1. 这里的状态名称进行检查，查看哪个页面激活前。 app.search
2. 然后根据需要特定的颜色类别被分配去除其他颜色类别。

ionic color options

希望这会有所帮助。

Answer 4

如果您正在使用不同的状态，并且每个国家都有不同的控制器不仅仅是有一个$ scope变量像$scope.stateone = "true"等，然后在你的离子nav-酒吧使用ng-class="{'bar-positive': stateone, 'bar-stable': statetwo, 'bar-assertive': statethree}"。 ng-class需要类和表达式，无论哪个表达式都是真的，这是分配的类。你可以用任何布尔表达式来使用ng-class。这是你如何在每个页面上拥有不同的颜色。

Answer 5

您可以覆盖$bar-stable-text color

例如（从_variables.scss从ionic lib取），在SCSS变化

$bar-stable-text: green !default; 

Answer 6

我修改@shakib的解决方案来满足我的需求，我的情况下，用户通过点击应用程序徽标来设置主题，从而栏的颜色应该改变。如果您遇到这种情况，当用户点击该应用程序的标志我想立即更改栏的颜色，以反馈给你不因为你想改变这一切的观点

$rootScope.$on("$stateChangeStart", function (event, toState) { 
      var element; 
      if (toState.name){ 
       element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar')); 
       if (debugMode) console.log(element); 
       // I get the bar-class from my localStorage where I keep the user settings 
       var saved_bar_class = $localStorage.get('bar-class','bar-calm'); 

       element.removeClass('bar-pink'); 
       element.removeClass('bar-calm'); 
       element.addClass(saved_bar_class); 
      // Here We could use a Switch Case on toState.name to put a different color to each state 

      } 
     }); 

还需要做switch case该按钮的用户。上面的代码不会做，因为我们没有改变状态的是，解决这个问题只需将此代码添加到您的“改变主题”功能

$scope.changeAppTheme = function() { 
     var element; 
     element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar')); 
      // some code to select the theme 
      element.removeClass('bar-pink'); 
      element.removeClass('bar-calm'); 
      element.addClass('bar-pink'); 
      // some other code 
    }; 

在这种情况下，我只是有两种颜色，离子平静

1：如果你想改变这个ion-nav-bar这里就像一个魅力，我所定义 粉色一个希望这可以帮助别人

Answer 7

。创建一个主控制器来照顾你的索引页面和其中的所有视图。 2.将此功能添加到控制器：

$scope.setNavColor = function(color){ 
    for(var i =0; i < document.getElementsByTagName("ion-header-bar").length; i++){ 
     classNames = document.getElementsByTagName("ion-header-bar")[i].className; 
     classNames = classNames.replace(/(bar-light|bar-stable|bar-positive|bar-calm|bar-balanced|bar-energized|bar-assertive|bar-royal|bar-dark)/g, color); 
     document.getElementsByTagName("ion-header-bar")[i].className = classNames; 
    } 
    } 

3。添加选择到您的ion-tab选项卡，因此它会调用该功能，只要您的选项卡被选中： <ion-tab href="#addr" on-select="setNavColor('PUT_YOUR_COLOR_HERE')> </ion-tab>

4。如果你想让颜色在你离开时返回一些价值，也可以加上取消选择ion-tab。

5。玩的开心！

Answer 8

我们得到了它在CSS工作与：

.title.title-center.header-item { 
    background-color: black; 
    margin: 0px; 
} 

这意味着，我们只是参考角生成的头类直接用这个CSS。希望这可以帮助！

Answer 9

把这些线在你的style.css /www/css/目录中的离子项目下

.title.title-center.header-item { 
    background-color:#4a87ee;//#F38023!important; // for bg color 
    margin:0px!important; 
    margin-left:0px!important; 
    color: #ffffff!important; 
    text-align: center !important; 
    width: 100%; 
} 

Answer 10

//add these lines in your style.css file under /www/css/ yoyr project directory 
.title.title-center.header-item { 
    background-color:#30393A;//#F38023!important; // for bg color 
    margin:0px!important; 
    margin-left:0px!important; 
    color: #ffffff!important; 
    text-align: center !important; 
    width: 100%; 
} 

Answer 11

如果你使用你的应用程序中SCSS，你可以创建自己的自定义栏类，并使用离子型的吧mixin在里面。

$bar-custom-bg: #ccc; 
$bar-custom-border: #eee; 
$bar-custom-text: #fff; 
$bar-custom-active-border: darken($bar-custom-border, 10%); 
$bar-custom-active-bg: darken($bar-custom-bg, 10%); 

.bar { 
    &.bar-custom { 
     @include bar-style($bar-custom-bg, $bar-custom-border, $bar-custom-text); 
     &.bar-footer{ 
      background-image: linear-gradient(180deg, $bar-custom-border, $bar-custom-border 50%, transparent 50%); 
     } 

     .button { 
      @include button-style($bar-custom-bg, $bar-custom-border, $bar-custom-active-bg, $bar-custom-active-border, $bar-custom-text); 
      @include button-clear(#fff, $bar-title-font-size); 
     } 
    } 
} 

定义您的课程后，您可以使用您的新的自定义栏类与ion-nav-bar指令。

<ion-nav-bar class="bar-custom"> 
    <ion-nav-back-button></ion-nav-back-button> 
</ion-nav-bar>