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
| Attribute | Type | Description |
|---|---|---|
| align-title (optional) | string | This aligns the title. If not set, it will default to the phone's default layout (iOS defaults to center, Android defaults to left). Its values can be 'left', 'center', 'right'. |
| no-tap-scroll (optional) | boolean | By default, the header bar will scroll the content to the top when tapped. Set no-tap-scroll to true to disable this behavior. Its value is a boolean (true/false). |
ion-footer-bar
Understanding ion-footer-bar is much easier once you know ion-header-bar! The ion-footer-bar is simply 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
| Attribute | Type | Description |
|---|---|---|
| align-title (optional) | string | This aligns the title. If not set, it will default to the phone's default layout (iOS defaults to center, Android defaults to left). Its values can be 'left', 'center', 'right'. |