Header bar, pulling some buttons to right

ionic-v1
1

Hello,

Is there a possiblity to have more than one button in the right side of the header ?

Something like that:

<header class="bar bar-header bar-light">
    <button class="button icon ion-navicon button-clear">left</button>
    <h1 class="title">Header</h1>
    <button class="button pull-right">right1</button>
    <button class="button pull-right">right2</button>
    <button class="button pull-right">right3</button>
  </header>

Or maybe like this:

<header class="bar bar-header bar-light">
    <button class="button icon ion-navicon button-clear">left</button>
    <h1 class="title">Header</h1>
    <div class="bar-right">
        <button class="button">right1</button>
        <button class="button">right2</button>
        <button class="button">right3</button>
   </div>
  </header>
2

Found The solution,

<header class="bar bar-header bar-light">
    <div class="buttons">
      <button class="button icon ion-navicon button-clear">left</button>
    </div>
    <h1 class="title">header</h1>
    <div class="buttons">
      <button class="button button-clear ion-ios7-bell-outline"></button>
        <button class="button button-clear ion-ios7-location-outline"></button>
        <button class="button button-clear ion-search"></button>
    </div>
    </div>
  </header>
1 Like
3

You can also do this in your controller:

<header class="bar bar-header bar-light" right-buttons="rightButtons">

In controller:

$scope.rightButtons = [
{
  type: 'button-icon icon ion-ios7-bell-outline',
  tap: function(e) {
    console.log('Do something here');
  }
},
{
  type: 'button-icon icon ion-search',
  tap: function(e) {
    console.log('Do something here');
  }
}
];

Hard coding the buttons in your HTML doesn’t give you any flexibility to deal with user interactions. Maybe you don’t want all the buttons depending on the current app state or the type of user.

4

Actually, I found the solution by looking to the HTML generated by the controller :smile:

For now, I do not need this flexibility.

Thank you for the controller example, on the doc there is only the HTML hard coded version on the content property

5

Can I add custom button to following object?

$scope.rightButtons = [
{
  type: 'button-icon icon ion-ios7-bell-outline',
  tap: function(e) {
  }
},
{
  type: 'button-icon icon ion-search',
  tap: function(e) {    
  }
}
];

For example:

<button class="button button-block button-balanced" 
                       ng-show="(selectedContacts.length > 0)" 
                       style="top: -10px;right: 5px;bottom: 10px;">Done
</button>
6

I don’t know if you can do that in the 0.9.27 and lower versions. However, in the nightlies and future beta, the leftButtons and rightButtons are going away. So you can put whatever buttons you want in the raw HTML.

See ; https://github.com/driftyco/ionic/pull/788 and http://ajoslin.github.io/docs/nightly/api/directive/ionHeaderBar/