Ionic Head and Bottom

From WikiOD

Ionic head and bottom[edit | edit source]

Header[edit | edit source]

Header is a component that is fixed at the top of the screen and can include functions such as a title and left and right buttons.

Ionic provides many color styles by default, you can call different style names, of course, you can also customize one.

Bar-light[edit | edit source]
 <code><div class="bar bar-header bar-light"></code>
   <code><h1 class="title">bar-light</h1></code>
Bar-stable[edit | edit source]
 <code><div class="bar bar-header bar-stable"></code>
   <code><h1 class="title">bar-stable</h1></code>
Bar-positive[edit | edit source]
 <code><div class="bar bar-header bar-positive"></code>
   <code><h1 class="title">bar-positive</h1></code>
Bar-calm[edit | edit source]
 <code><div class="bar bar-header bar-calm"></code>
   <code><h1 class="title">bar-calm</h1></code>
Bar-balanced[edit | edit source]
 <code><div class="bar bar-header bar-balanced"></code>
   <code><h1 class="title">bar-balanced</h1></code>
Bar-energized[edit | edit source]
 <code><div class="bar bar-header bar-energized"></code>
   <code><h1 class="title">bar-energized</h1></code>
Bar-assertive[edit | edit source]
 <code><div class="bar bar-header bar-assertive"></code>
   <code><h1 class="title">bar-assertive</h1></code>
Bar-royal[edit | edit source]
 <code><div class="bar bar-header bar-royal"></code>
   <code><h1 class="title">bar-royal</h1></code>
Bar-dark[edit | edit source]
 <code><div class="bar bar-header bar-dark"></code>
   <code><h1 class="title">bar-dark</h1></code>

Sub Header[edit | edit source]

The Sub Header is also fixed at the top, just below the Header. Even if the Header is not written, the Sub Header style will have a Header distance from the top. The color style is the same as Header.

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

Footer (bottom)[edit | edit source]

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

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

Footer is the same as the header above, except that the style name bar-header is replaced by bar-footer.

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

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

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