ionic Header and Footer
ion-header-bar
This is a header title bar fixed at the top of the screen. If you add the 'bar-subheader' class to it, it becomes a subheader.
Usage
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-content>
Some content!
</ion-content>
API
| Attributes | Type | Description |
|---|---|---|
|
align-title
(optional)
|
string
|
This aligns the title. If not set, it follows the mobile device's default layout (iOS default is center, Android default is left). Its value can be 'left', 'center', 'right'. |
|
no-tap-scroll
(optional)
|
boolean
|
By default, in the header title bar, when the screen is tapped, the content scrolls to the header. You can set no-tap-scroll to true to disable this behavior. Its value is a boolean (true/false). |
ion-footer-bar
Once you know ion-header-bar, understanding ion-footer-bar becomes much easier! The only difference is that ion-footer-bar is at the bottom of the screen.
Usage
<ion-content>
Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
API
Unlike ion-header-bar, ion-footer-bar only has the align-title API.| Attributes | Type | Description |
|---|---|---|
|
align-title
(optional)
|
string
|
This aligns the title. If not set, it follows the mobile device's default layout (iOS default is center, Android default is left). Its value can be 'left', 'center', 'right'. |