AngularJS and Ionic. Buttons in header, tab view

6
votes

I'm all new to Ionic, and this is my first project. I'm creating a little app with tab navigation in the bottom.

One tab view looks like this:

<ion-view title="Account">
  <ion-content class="has-header padding">
    <h1>Account</h1>
  </ion-content>
</ion-view>

I want to add a button in the header next to Account, and according to documentation you use the ion-nav-bar elements, but no button shows up when I try this. Can anyone give me a clue how to add buttons in the header, in a tab view?

1
angularjsviewionic-framework

1 Answers

20
votes

You can make use of ion-nav-button like this:

<ion-view title="Account">
  <ion-nav-buttons side="left">
      <button class="button" ng-click="doSomething()">
        I'm a button on the left of the navbar!
      </button>
   </ion-nav-buttons>
  <ion-content class="has-header padding">
    <h1>Account</h1>
  </ion-content>
</ion-view>

Example 1 Example 2