Change ion-view header color in ionic
Solution 1
Some ways to do this:
-
You could add the ion-nav-bar to each view.
<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>
-
You could also update the background-color (and any other properties) by using ng-style
Main navbar:
<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; }
Controller:
$scope.$on('$ionicView.beforeEnter', function() { $rootScope.viewColor = 'green'; });
Solution 2
Could not find a clean solution for this, but one hack might be to use the $stateChangeStart
event and set the class name manually.
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');
}
}
});
});
EDIT The idea is same for sidebar template,
Notice the line
<ion-nav-bar class="bar-positive">
in menu.html template, it denotes the base header color class.
but subsequent changes to pages i.e states header color needs to be changed manually in $stateChangeStart
event,
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');
}
}
});
});
- here the state name is checked to see which page is activating ex.
app.search
- then according to requirement specific color class is assigned removing other color classes.
hope this helps.
Solution 3
I modified the solution of @shakib to fit my needs, in my case the user sets the theme by clicking the app logo and thus the bar color should change. If this is your case you don't need to do the switch case
because you want to change all views
$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
}
});
Also when the user clicks the app logo I want to immediately change the bar color in order to give feedback to the user of what that button do. The above code won't do that because we haven't changed state yet, to fix this just add this code to your 'change theme' function
$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
};
In this case I just have two colors, the ionic calm and a pink one that I defined Hope this helps someone
Solution 4
We got it working in CSS with:
.title.title-center.header-item {
background-color: black;
margin: 0px;
}
This means that we just refer to the Angular generated header classes directly with this CSS. Hope this helps!
Solution 5
if you are using different states and each state has a different controller than just have a $scope variable like $scope.stateone = "true"
etc. Then on your ion-nav-bar use ng-class="{'bar-positive': stateone, 'bar-stable': statetwo, 'bar-assertive': statethree}"
. ng-class takes classes and an expression, whichever expression is true that is the class that is assigned. you can use ng-class with any boolean expression. this is how you can have a different color on each page.
Related videos on Youtube
poiuytrez
Updated on June 28, 2020Comments
-
poiuytrez almost 4 years
I am using the ionic starter menubar template. I would like to change the header background color of each page. I currently have:
<ion-view view-title="Search"> <ion-content> <h1>Search</h1> </ion-content> </ion-view>
I tried:
<ion-view view-title="Search" class="bar bar-header bar-assertive"> <ion-content> <h1>Search</h1> </ion-content> </ion-view>
But it does not work at all (content is not rendered). The header documentation does not help me. What is the correct way to do this?
-
shakib almost 9 yearsDid you change the class in
ion-nav-bar
tag located in theindex.html
file? ex.<ion-nav-bar class="bar-positive">
-
poiuytrez almost 9 yearsI am trying to have a different color for each page, not the same color for every page.
-
-
poiuytrez almost 9 yearsYour code gives an empty header with no specific color (grey).
-
poiuytrez almost 9 yearsI am using the menubar template and not the tab template. I do not care to set a class on each view directly in the html. However, where should I set the class?
-
brandyscarney almost 9 yearsUnfortunately this doesn't work for ion-nav-bar as the child ion-header-bar does not update with the parent class.
-
Jess Patton almost 9 yearsAh i see, that is unforntunate.
-
brandyscarney almost 9 yearsYou would have to add the menu button to each ion-nav-bar because you are redefining the navigation bar for each view.
-
hswner over 8 years@NiravGandhi in order to see the menu button you can use the following snippet: <ion-nav-back-button> </ion-nav-back-button> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> </button> </ion-nav-buttons>