How to add custom body classes depending on state?

ionic-v1
1

Hi All,

I need to style the top bar and background of specific groups of states (e.g. header bar will be one colour when not logged in, a different colour when logged and a different one in another section etc.). I would probably solve this issue adding custom body classes to define specific groups on css e.g.

.not-logged .bar {
background: red;
}
.not-logged .pane {
background-image: url(path/to/image);
}
.logged .bar {
background: blue;
}
.logged .pane {
background-image: url(path/to/another/image);
}.logged .config-section .pane {background-image: url(path/to/yet/another/image);}

So, I was wondering if this could be achieved with ionic/angular as well (it’s probably an angular question more than an ionic one). But I’m asking it here just to see if this solution is ok or if there is a more intelligent way of achieving this.

I hope that makes sense and someone can shed some light on this…

2

Yes, this can be achieved using angular. You could apply the class to the body based on a scope variable (where loggedIn is equal to ‘logged’ or ‘not-logged’):

<body class="{{ loggedIn }}">

or by using ng-class if you want to store loggedIn as a boolean

<body ng-class="loggedIn ? 'logged' : 'not-logged'">

I personally have done this in a web based project, just to change the look of different views. Here’s a codepen example where the header changes color: http://codepen.io/brandyshea/pen/WbLxRv

3

Thanks for your reply @brandyshea. It does work perfectly!

1 Like