WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - Header


This chapter will show you how to start with Ionic Framework. The following table contains the list of components needed to start with Ionic.

Adding Header

If you want to create a header, you need to add bar-header after your main bar class. Open your www/index.html file and add the header class inside your body tag. We are adding a header to the index.html body because we want it to be available on every screen in the app.
<div class = "bar bar-header">
   <h1 class = "title">Header</h1>
</div>

Blank App

If you want to start from the scratch, you can install the Ionic blank template. We will use the same steps that have been explained above with the addition of ionic start myApp blank instead of ionic start myApp tabs

Header Colors

you just need to add the appropriate color class to it. When you style your elements, you need to add your main element class as prefix to your color class. we are styling the header bar, the prefix class will be bar and the color class that we want to use in this example is positive (blue).
<div class = "bar bar-header bar-positive">
   <h1 class = "title">Header</h1>
</div>

Header Elements

The following code is an example to add a menu button and a home button inside a header.
<div class = "bar bar-header bar-positive">
   <button class = "button icon ion-navicon"></button>
   <h1 class = "title">Header Buttons</h1>
   <button class = "button icon ion-home"></button>
</div>

Sub Header

You can create a sub header that will be located just below the header bar. The following example will show how to add a header and a sub header to your app. Here, we have styled the sub header with an "assertive" (red) color class.

<div class = "bar bar-header bar-positive">
   <button class = "button icon ion-navicon"></button>
   <h1 class = "title">Header Buttons</h1>
   <button class = "button icon ion-home"></button>
</div>

<div class = "bar bar-subheader bar-assertive">
   <h2 class = "title">Sub Header</h2>
</div>
The above code will produce the following screen

To fix this you need to add a ‘has-header’ or a ‘has-subheader’ class to the ion-content tags of your screens. Open one of your HTML files from www/templates and add the has-subheader class to the ion-content. If you only use header in your app, you will need to add the has-header class instead.

<ion-content class = "padding has-subheader">