在離子狀態下更改離子視圖標題顏色

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>