.

111 Ionic1 Header and Footer

Ion-header-bar

Adds a fixed header bar above some content.
Can also be a subheader (lower down) if the ‘bar-subheader’ class is applied.

<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 class="has-header">  Some content! </ion-content>

Ref: http://ionicframework.com/docs/v1/api/directive/ionHeaderBar/

Sub Header

A secondary header bar can be placed below the original header bar. There are quite a few more ways to customize Headers.

<div class="bar bar-header">  <h1 class="title">Header</h1> </div> <div class="bar bar-subheader">  <h2 class="title">Sub Header</h2> </div>

Also, remember to include the has-subheader CSS class to your ion-content directive.

Ref: http://ionicframework.com/docs/v1/components/#subheader

Ion-footer-bar

Adds a fixed footer bar below some content.
Can also be a subfooter (higher up) if the ‘bar-subfooter’ class is applied.

<ion-content class="has-footer">  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>

Ref:

http://ionicframework.com/docs/v1/api/directive/ionFooterBar/

http://ionicframework.com/docs/v1/components/#footer 

.