Header vs Nav Bar? Also how do I customize it?

ionic-v1
1

I’m not sure I understand the difference between the header and nav bar. (ie. has-header=true and/or hide-nav-bar=false)

The “nav-bar” in my app index.html just wasn’t providing the ability to customize and add a logo/buttons etc. So I just made a div and styled it. But of course it’s missing the support of hiding/showing per view using hide-nav-bar.

So I guess the question is, how do I take

<nav-bar type="bar-positive" 
             animation="nav-title-slide-ios7" 
             back-button-type="button-icon" 
             back-button-icon="ion-ios7-arrow-back"></nav-bar>

And make it work like

<div class="bar bar-header bar-positive">
<button class="button icon-left ion-chevron-left button-clear icon" onclick="window.history.back();">/button>
<div class="logo-small"></div>
<button class="button button-clear icon ion-navicon" onclick="window.location.href='#/nav'"></button>
</div>

I tried simplyl wrapping within <nav-bar> but nope.

2

The <ion-nav-bar> and <ion-view> go hand in hand. The ion-nav-bar is for the general app container, the ion-view is for each individual state. The view is nested below the nav-bar.

Here’s a good example of this:

http://codepen.io/ionic/pen/HjnFx

1 Like
3

I’m not sure I follow; if ion-nav-bar is the “main app nav bar”, and ion-view is the “sub nav bar for each page”, why when i delete ion-nav-bar, does the “sub nav bar” also delete.

Maybe I should try explaining my problem a bit better.

I have 2 core pages that I want no nav bar (this is easy enough by saying hide-nav-bar="true" when using the ion-nav-bar default).

Then I have a landing (list) page which I would like to have the core nav bar (styled with logo in the center and “home” button on the right hand side), no back button. (currently default behaviour injects a back button that I don’t want)

Then on the detail page I’d like to have the same nav, now including a back button.

So I guess the core of my problem lies with the inability to style ion-nav-bar the way I want it. I can do this in html/css just fine (as noted in my original post) but it doesn’t have nav-bar functionality to be able to show/hide using hide-nav-bar (because well, it’s not a nav bar, just an html element that looks like one)

I thought it would be as simple as wrapping my code with the nav-bar directive to style it/use it.

4

i also was dealing with the differences between and
at the end i settled with everywhere (i rewrite it in every view, with all the icons and titles i want…
AFAIK has just the advantages to manage natively the navigation history…
but hasn’t all the customization features of .
so i’m managing the “back buttons” with $window.history.back();
(see my in-dev app https://github.com/krur/Silo_app )

5

In a view, you can hide the back button like this:

<ion-view title="navTitle" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true">

On the controller for your view, you can pass in an array of buttons :

    $scope.rightButtons = [{
        type: 'button-icon icon ion-plus',
        tap: function(e) {
            $state.go('main.manageMember', { 'membersId' : 'new' });
        }
    }];

    $scope.rightButtons = [{
        type: 'button-icon icon ion-home',
        tap: function(e) {
            $state.go('main.home', { 'membersId' : 'new' });
        }
    }];

Then, the nav controller will automatically add a back button (or not) depending on hide-back-button

If you post a code sample of what you’re trying to do, it will be easier to help.

3 Likes
6

So in a view, we can hide or show the left and right buttons as well as the back button.
But what about other stuff like colours? Are are we able to customise the background colour within ion-view?

Any guidance here would be welcomed :smile:

Thanks.

7

This is really helpful, however I was wondering where this info is in the docs?

I’ve looked high and low and am worried I’m missing out on some important APIs that aren’t documented. In order to use $scope.rightButtons do I need to include right button somehow in the ion-nav-bar markup?

8

left-buttons and right-buttons are still on the navBarController in the Ionic source. However, I think it’d be wise to avoid them. This was a VERY old method of assigning buttons in Ionic. I think the code is still there simply for the framework to do stuff with.

The correct way now is to use ionNavButtons and declare them in the view as being primary or secondary : http://ionicframework.com/docs/api/directive/ionNavButtons/

1 Like