I'm new to Ionic. I want to add custom items to the header bar.
It seems the header bar is generated by the framework inside the ion-nav-bar element.
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
I see, that the view-title from the tab template gets automatically put into the header bar.
<ion-view view-title="Home">
Here is the code I am working on: This is taken from the ionic documentation: /
The header-bar documentation says, to add the header bar element before the ion-content element (see the home template), but it does not get displayed.
<ion-view view-title="Home">
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">Custom Header</h1>
</ion-header-bar>
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
How can I add my own elements to the header bar, depending on currently displayed tab, or have a header bar in each template?
I'm new to Ionic. I want to add custom items to the header bar.
It seems the header bar is generated by the framework inside the ion-nav-bar element.
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
I see, that the view-title from the tab template gets automatically put into the header bar.
<ion-view view-title="Home">
Here is the code I am working on: https://plnkr.co/edit/39XMp3FylDHofwJcFZmr?p=preview This is taken from the ionic documentation: http://ionicframework./docs/api/directive/ionTabs/
The header-bar documentation says, to add the header bar element before the ion-content element (see the home template), but it does not get displayed.
<ion-view view-title="Home">
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">Custom Header</h1>
</ion-header-bar>
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
How can I add my own elements to the header bar, depending on currently displayed tab, or have a header bar in each template?
Share Improve this question asked Apr 17, 2016 at 6:01 CranescannerCranescanner 1011 silver badge7 bronze badges 2- What it is exactly that you want to add to header? Is it text content or buttons and such? – Aditya Singh Commented Apr 17, 2016 at 9:58
- Buttons and such (with text or an icon or both). The solution I found is already satisfactory for my purpose. Thanks. – Cranescanner Commented Apr 17, 2016 at 12:36
1 Answer
Reset to default 6After more searching I found this: http://codepen.io/calendee/pen/hIkoJ
It looks, like I have to add an ion-nav-bar to my template:
<ion-view view-title="Home">
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button" ng-click="baz()">
RightButton!
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content class="padding">
<p>{{lol}}
Updated plnkr: https://plnkr.co/edit/33YSRvp2H92dbeliEaj6?p=preview