ionic head and bottom
Header(Header)
Header is a component fixed at the top of the screen, which can include titles and left and right function buttons.
ionic provides many color styles by default. You can call different style names, 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-calm"> <h1 class="title">bar-calm</h1> </div>
<div class="bar bar-header bar-balanced">
<h1 class="title">bar-balanced</h1>
</div>
<div class="bar bar-header bar-energized">
<h1 class="title">bar-energized</h1>
</div>
<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 is also fixed at the top, but It is below the Header. Even if the Header is not written, the Sub Header style will be one Header away 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>
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 is the same as Header above, except that the style name bar-header is replaced by 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>
In addition, if there is no title at the bottom, but you need a button on the right, you need to add pull-right to the button on the right such as:
<div class="bar bar-footer"> <button class="button button-clear pull-right">Right</button> </div>
