Individual header at each site

1

Hey guys,

how do you build separate headers for each site?
I’m using tabs and want to change the header, but i don’t really know how.

For testing: i just want and “Add” button in the right corner of this “chats example”.

<ion-view view-title="Chats">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
        <img ng-src="{{chat.face}}">
        <h2>{{chat.name}}</h2>
        <p>{{chat.lastText}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>

        <ion-option-button class="button-assertive" ng-click="remove(chat)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>
2

I think you can set in all you views.

But it depends, if you have a global nav-bar and so on.
So you can set navbuttons and titles on your on for each view:
http://ionicframework.com/docs/api/directive/ionNavButtons/
http://ionicframework.com/docs/api/directive/ionNavTitle/

1 Like
3

and how do i found out if the nav-bar is global? :smile:

4

a navbar is always “global”… because it is there for the whole app:

Your app-structure should be something like that:
http://ionicframework.com/docs/api/directive/ionNavBar/

One navbar and then a nav-view, where you hang in your views

1 Like
5

i build it like that (tab-chats.html):

<ion-view view-title="Chats">
  <ion-content>
    <ion-nav-buttons side="right">
      <button class="button">I'm a button</button>
    </ion-nav-buttons>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
        <img ng-src="{{chat.face}}">
        <h2>{{chat.name}}</h2>
        <p>{{chat.lastText}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>

        <ion-option-button class="button-assertive" ng-click="remove(chat)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

But i didn’t see any button.

6

you have to set it outside of your ion-content (in a perfect world above^^).

1 Like
7

Ah, now i got it :slight_smile: thanks!
Outside of the ion-content, but inside of the ion-view.