Changer la couleur de l'en-tête ion-view dans ionic

N'a pas pu trouver de solution propre pour cela, mais un hack pourrait être d'utiliser l'événement $stateChangeStart et de définir le nom de la classe manuellement.

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

Violon

Modifier L'idée est la même pour le modèle de barre latérale,

Mis à Jour le violon

Notez la ligne

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

Dans le menu.modèle html, il désigne la classe de couleur d'en-tête de base. mais les modifications ultérieures aux pages, c'est-à-dire la couleur d'en-tête des États, doivent être modifiées manuellement dans $stateChangeStart événement,

Code:

.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. ici, le nom de l'état est vérifié pour voir quelle page active ex. app.search
2. ensuite, selon la classe de couleur spécifique de l'exigence est assignée en supprimant d'autres classes de couleur.

Options de couleur ionique

J'espère que cela aide.

Si vous utilisez des états différents et que chaque État a un contrôleur différent, il suffit d'avoir une variable $ scope comme $scope.stateone = "true" etc. Ensuite, sur votre barre d'ion-nav, utilisez ng-class="{'bar-positive': stateone, 'bar-stable': statetwo, 'bar-assertive': statethree}". ng-class prend des classes et une expression, quelle que soit l'expression true qui est la classe assignée. vous pouvez utiliser ng-class avec n'importe quelle expression booléenne. c'est comment vous pouvez avoir une couleur différente sur chaque page.

J'ai modifié la solution de @shakib pour répondre à mes besoins, dans mon cas l'utilisateur définit le thème en cliquant sur le logo de l'application et donc la couleur de la barre devrait changer. Si c'est votre cas, vous n'avez pas besoin de faire le switch case parce que vous voulez changer toutes les vues

$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

          }
      });

Aussi, lorsque l'utilisateur clique sur le logo de l'application, je veux changer immédiatement la couleur de la barre afin de donner des commentaires à l'utilisateur de ce que ce bouton fait. Le code ci-dessus ne le fera pas parce que nous n'avons pas encore changé d'État, pour résoudre ce problème, ajoutez simplement ce code à votre fonction 'changer de thème'

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

Dans ce cas, j'ai juste deux couleurs, le calme ionique et un rose que j'ai défini J'espère que cela aide quelqu'un

Nous l'avons fait fonctionner en CSS avec:

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

Cela signifie que nous nous référons simplement aux classes D'en-tête générées angulaires directement avec ce CSS. Espérons que cette aide!

Essayez d'utiliser le code suivant:

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

Vous pouvez remplacer $bar-stable-text color (extrait de _variables.scss de ionic lib)

Par exemple, dans votre scss changer

$bar-stable-text: green !default;

Si vous souhaitez modifier le ion-nav-bar cela fonctionne ici comme un charme:

1 . Créez un contrôleur principal pour prendre soin de votre page d'index et de toutes les vues qui s'y trouvent. 2. Ajoutez cette fonction au contrôleur:

$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 . add on-select à votre onglet ion-tab afin qu'il appelle la fonction chaque fois que votre onglet est choisi: <ion-tab href="#addr" on-select="setNavColor('PUT_YOUR_COLOR_HERE')> </ion-tab>

4 . add on-désélectionnez-vous aussi ion-tab Si vous voulez que la couleur revienne à une certaine valeur lorsque vous partez.

5 . Amuse-toi bien!

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

Mettez ces lignes dans votre style.css sous /www/css/ répertoire de votre ionique projet

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

Si vous utilisez scss dans votre application, vous pouvez créer votre propre classe de barre personnalisée et Y utiliser les mixins de barre d'ionic.

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

Après avoir défini votre classe, vous pouvez utiliser votre nouvelle classe de barre personnalisée avec la directive ion-nav-bar.

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