web-dev-qa-db-fra.com

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

J'utilise le modèle de barre de menu du démarreur ionique. Je voudrais changer la couleur de fond d'en-tête de chaque page. J'ai actuellement:

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

J'ai essayé:

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

Mais cela ne fonctionne pas du tout (le contenu n'est pas rendu). La documentation header ne m'aide pas. Quelle est la bonne façon de faire cela? 

cssionic-frameworkionic
23
poiuytrez

Quelques manières de faire ceci:

  1. Vous pouvez ajouter la barre de navigation ionique à chaque vue. 

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

    Exemple Codepen

  2. Vous pouvez également mettre à jour la couleur de fond (et toutes autres propriétés) en utilisant ng-style

    Barre de navigation principale: 

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

    Manette:

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

    Exemple Codepen

56
brandyshea

Impossible de trouver une solution propre à cela, mais un hack pourrait consister à utiliser l'événement $stateChangeStart et à définir manuellement le nom de la classe.

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

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

Violon mis à jour

Remarquez la ligne

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

dans le modèle menu.html, il désigne la classe de couleur d'en-tête de base . mais les modifications ultérieures apportées aux pages i.e indiquent la couleur d'en-tête doit être modifiée manuellement dans l'événement $stateChangeStart

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 est en train d'activer ex. app.search
  2. puis, en fonction des besoins, une classe de couleur spécifique est affectée, supprimant d'autres classes de couleur.

options de couleur ionique

j'espère que cela t'aides.

3
shakib

Nous l'avons obtenu 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 par Angular directement avec ce CSS. J'espère que cela t'aides!

1
hooligan

J'ai modifié la solution de @shakib pour l'adapter à mes besoins. Dans mon cas, l'utilisateur définit le thème en cliquant sur le logo de l'application. La couleur de la barre doit donc changer. Si tel est votre cas, vous n'avez pas besoin de faire le switch case car vous souhaitez modifier 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

          }
      });

De plus, lorsque l'utilisateur clique sur le logo de l'application, je souhaite modifier immédiatement la couleur de la barre afin de pouvoir informer l'utilisateur de la fonction de ce bouton. Le code ci-dessus ne le fera pas car nous n'avons pas encore changé d'état. Pour résoudre ce problème, ajoutez ce code à votre fonction 'changer le 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, je n'ai que deux couleurs, le calme ionique et le rose que j'ai défini J'espère que cela aidera quelqu'un

1
Tenoch G

si vous utilisez des états différents et que chaque état a un contrôleur différent de celui ayant simplement une variable $ scope telle que $scope.stateone = "true" etc. Utilisez ensuite ng-class="{'bar-positive': stateone, 'bar-stable': statetwo, 'bar-assertive': statethree}" sur votre ion-nav-bar ng-class prend des classes et une expression, quelle que soit l'expression qui correspond à la classe affectée. vous pouvez utiliser ng-class avec n'importe quelle expression booléenne. Voici comment vous pouvez avoir une couleur différente sur chaque page. 

1
Jess Patton
//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%;
 }
0
user4423251

Si vous voulez changer le ion-nav-bar cela fonctionne ici comme un charme:

1 . Créez un contrôleur principal pour prendre en charge votre page d’index et toutes les vues qu’elle contient . 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 ajoutez on-select à votre onglet ion-tab pour 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 ajoutez on-désélectionnez vous aussi ion-tab si vous voulez que la couleur reprenne une valeur lorsque vous partez.

5 S'amuser!

0
Marcelo Lazaroni

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

Vous pouvez remplacer $bar-stable-text color (tiré de _variables.scss à partir de ionic lib) 

Par exemple, dans votre changement scss 

$bar-stable-text: green !default;
0
nium

placez ces lignes dans votre style.css dans le répertoire /www/css/ de votre projet ionique

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

Si vous utilisez scss dans votre application, vous pouvez créer votre propre classe de barres et y utiliser les barres de mixage 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 barres 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>
0
Önder Ceylan