css - change - Cambiar el color del encabezado ion-view en iónico

ionic header color

Question

Estoy usando la plantilla de menú de inicio iónico. Me gustaría cambiar el color de fondo del encabezado de cada página. Actualmente tengo:

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

Lo intenté:

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

Pero no funciona en absoluto (el contenido no se representa). La documentación del encabezado no me ayuda. ¿Cuál es la forma correcta de hacer esto?

Answer 1

Algunas formas de hacer esto:

1. Puede agregar la barra de navegación de iones a cada vista.

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

   Ejemplo de Codepen

2. También puede actualizar el color de fondo (y cualquier otra propiedad) utilizando ng-style

   Barra de navegación principal:

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

   Controlador:

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

   Ejemplo de Codepen

Answer 2

Intenta usar el siguiente código:

<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

Lo conseguimos trabajando en CSS con:

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

Esto significa que solo nos referimos a las clases de encabezado generadas Angular directamente con este CSS. ¡Espero que esto ayude!

Answer 4

Modifiqué la solución de @shakib para adaptarla a mis necesidades, en mi caso el usuario configura el tema haciendo clic en el logotipo de la aplicación y, por lo tanto, el color de la barra debería cambiar. Si este es su caso, no necesita hacer la switch case del switch case porque quiere cambiar todas las vistas

$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

          }
      });

Además, cuando el usuario hace clic en el logotipo de la aplicación, quiero cambiar inmediatamente el color de la barra para dar feedback al usuario sobre lo que hace ese botón. El código anterior no hará eso porque todavía no hemos cambiado el estado, para solucionarlo simplemente agregue este código a su función ''cambiar tema''

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

En este caso, solo tengo dos colores, la calma iónica y una rosa que definí Espero que esto ayude a alguien

Answer 5

No se pudo encontrar una solución limpia para esto, pero un truco podría ser usar el evento $stateChangeStart y establecer el nombre de clase manualmente.

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

EDITAR La idea es la misma para la plantilla de la barra lateral,

Fiddle actualizado

Observe la línea

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

en la plantilla menu.html, denota la clase de color del encabezado base. pero los cambios posteriores a las páginas, es decir, el color del encabezado de estados, deben cambiarse manualmente en el evento $stateChangeStart ,

código:

.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. aquí se verifica el nombre del estado para ver qué página se está activando, por ej. app.search
2. luego, según el requisito, se asigna una clase de color específica para eliminar otras clases de color.

opciones de color iónico

espero que esto ayude.

Answer 6

Puede anular el $bar-stable-text color (tomado de _variables.scss de ionic lib )

Por ejemplo, en tu cambio de scss

$bar-stable-text: green !default;

Answer 7

Si está utilizando scss dentro de su aplicación, puede crear su propia clase de barra personalizada y usar mixins de barra iónica en ella.

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

Después de definir su clase, puede usar su nueva clase de barra personalizada con la directiva ion-nav-bar.

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

Answer 8

Si quieres cambiar el ion-nav-bar aquí funciona como un encanto:

1. Cree un controlador principal para cuidar su página de índice y todas las vistas dentro de ella. 2. Agregue esta función al controlador:

$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 a su ion-tab para que llame a la función cada vez que elija su pestaña: <ion-tab href="#addr" on-select="setNavColor(''PUT_YOUR_COLOR_HERE'')> </ion-tab>

4. agregue on-deseleccionar a su ion-tab también si desea que el color regrese a algún valor cuando se vaya.

5. ¡Que te diviertas!

Answer 9

ponga estas líneas en su style.css en /www/css/ directory de su proyecto iónico

.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

si está usando estados diferentes y cada estado tiene un controlador diferente a solo tener una variable $ scope como $scope.stateone = "true" etc. Luego, en su barra de ion-nav use ng-class="{''bar-positive'': stateone, ''bar-stable'': statetwo, ''bar-assertive'': statethree}" . ng-class toma clases y una expresión, cualquiera que sea la expresión verdadera que es la clase que se le asigna. puedes usar ng-class con cualquier expresión booleana. así es como puede tener un color diferente en cada página.

Answer 11

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