IONIC Header Footer Button & Tabs

Header (head)

Header is a component that is fixed at the top of the screen and can be wrapped like a title and left and right function buttons.

The default is a variety of color styles, and you can call a different style name, and of course you can customize one.

bar-light

 <div class = "bar bar-header bar-light">
   <h1 class = "title"> bar-light </ h1>
 </ div>

bar-stable

 <div class = "bar bar-header bar-stable">
   <h1 class = "title"> bar-stable </ h1>
 </ div>

bar-positive

 <div class = "bar bar-header bar-positive">
   <h1 class = "title"> bar-positive </ h1>
 </ div>

bar-calm

 <div class = "bar bar-header bar-light">
   <h1 class = "title"> bar-light </ h1>
 </ div>

bar-balanced

 <div class = "bar bar-header bar-balanced">
   <h1 class = "title"> bar-balanced </ h1>
 </ div>

bar-energized

 <div class = "bar bar-header bar-energized">
   <h1 class = "title"> bar-energized </ h1>
 </ div>

bar-assertive

 <div class = "bar bar-header bar-assertive">
   <h1 class = "title"> bar-assertive </ h1>
 </ div>

bar-royal

 <div class = "bar bar-header bar-royal">
   <h1 class = "title"> bar-royal </ h1>
 </ div>

bar-dark

 <div class = "bar bar-header bar-dark">
   <h1 class = "title"> bar-dark </ h1>
 </ div>

Sub Header

Sub Header is also fixed at the top, but in the header below, even if not write Header this, Sub Header this style will be from the top of a header distance. Color style with header.

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

Footer (bottom)

Footer is at the bottom of the screen and can contain multiple content types.

 <div class = "bar bar-footer bar-balanced">
   <div class = "title"> Footer </ div>
 </ div>

Footer with the above header, just the style bar-header for bar-footer.

 <div class = "bar bar-footer">
   <button class = "button button-clear"> Left </ button>
   <div class = "title"> Title </ div>
   <button class = "button button-clear"> Right </ button>
 </ div>

Also, if there is no title at the bottom, but also need the right button, you need to add a pull-right button on the right button:

 <div class = "bar bar-footer">
   <button class = "button button-clear pull-right"> Right </ button>
 </ div>

Simplidigital