header-footer-ionic

Header

Start a blank app using


ionic start hf blank

Then go to hf folder using


cd hd

Use ionic serve command to preview your app


ionic serve  --lab

By default Ionic created a header in the blank app. Go to www folder , open the index.html file in your editor(use Brackets editor). It's, as usual, a HTML file. The structure looks like below

-HTML

-Body

    - Ion-pane

    - Ion-content

Ion content tag is like a body in HTML for the application. We will write all our component inside ion content(<ion-content>) tag.


<ion-header-bar class="bar-stable">

      <h1 class="title">Ionic Blank Starter</h1>

</ion-header-bar>

Inside <ion-pane>, the ion-header-bar is placed. By default, it looks plain. We can change the color of the header by using custom CSS or predefined Ionic classes. Ionic offers the below predefined classes.

bar-light

bar-stable

bar-positive

bar-calm

bar-balanced

bar-energized

bar-assertive

bar-royal bar-dark

To give dark background to your header, use bar-dark class.


<ion-header-bar class="bar-dark">

       <h1 class="title">Ionic Blank Starter</h1>

     </ion-header-bar>

 

Subheader

We can create sub header using bar-subheader class. Place the below code after header


<ion-header-bar class=" bar-subheader">

       <h2 class="title">Sub Header</h2>

</ion-header-bar>

If you want to color your subheader use the above predefined Ionic CSS classes or use your custom CSS.

To apply Ionic royal class for subheader.


<ion-header-bar class=" bar-subheader bar-royal">

       <h2 class="title">Sub Header</h2>

</ion-header-bar>

Important: If you use subheader, you must include the has-subheader class in the ion-content tag.


<ion-content class=”has-subheader”>

 

Footer

To create footer.


<ion-footer-bar class="bar-royal">

       <h6 class="title">AmpersandAcademy.com</h6>

</ion-footer-bar>

Ionic Footer has the same color options as the Ionic header. So, we can use the above-mentioned color classes even in the footer.

Both header and footer are fixed at top and bottom of your application respectively.

By default iOS header and footer are center aligned. If you want to align manually use text-align CSS.