ionic head with bottom

ionic head with bottom

Header (Head)

Header is a component fixed to the top of the screen that can be packaged with function buttons such as title and left and right.

ionic provides many color styles by default, and you can call different style names, or you can customize one.

bar-light

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

Try it out . . .

bar-stable

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

Try it out . . .

bar-positive

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

Try it out . . .

bar-calm

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

Try it out . . .

bar-balanced

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

Try it out . . .

bar-energized

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

Try it out . . .

bar-assertive

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

Try it out . . .

bar-royal

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

Try it out . . .

bar-dark

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

Try it out . . .

Sub Header (subtitle)

Sub Header is also fixed to the top, but under Header, and even without writing Header, the Sub Header style will be a Header distance from the top. The color style is the same as Header.

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

Try it out . . .

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>

Try it out . . .

Footer, like Header above, just changed the style name bar-header to 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>

Try it out . . .

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

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

Try it out . . .