Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS and Ionic. Buttons in header, tab view

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?

like image 844
user1121487 Avatar asked Jul 08 '14 08:07

user1121487


1 Answers

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

like image 123
V31 Avatar answered Nov 17 '22 16:11

V31