WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - Javascript Header


This is the Ionic directive, which will add the header bar.

Using JavaScript Header

To create a JavaScript header bar, we want to use the ion-header-bar directive within the hypertext mark-up language file. Since the default header is white, we'll add title, thus it'll be showed on white background. we'll add it to our index.html file.
<ion-header-bar>
   <h1 class = "title">Title!</h1>
</ion-header-bar>

Styling Header

we need to add a color class with a bar prefix. Therefore, if we want to use a blue header, we will add a bar-positive class. We can also move the title to one side of the screen by adding the align-title attribute. The values for this attribute can be center, left or right.
<ion-header-bar align-title = "left" class = "bar-positive">
   <h1 class = "title">Title!</h1>
</ion-header-bar>

Adding Elements

following example shows the way to place a button on the left facet associated an icon to the correct facet of the ion-header-bar.
<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
   
   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

Adding Sub Header

A Sub header is made once a bar-subheader category is side to the ion-header-bar.
<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
   
   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

<ion-header-bar class = "bar-subheader bar-assertive">
   <h1 class = "title">Subheader</h1>
</ion-header-bar>