Ionic CSS

---o0o---

Original link

1. Header

• Headers are fixed regions at the top of a screen
• Can contain:
  • a title label
  • left/rights buttons for navigation or to carry out various actions

a) Style for headers

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

• bar: notify that <div> is a bar
• bar-header: notify that bar is in header
• bar-light: style for this header bar
• title: center <h1> in screen

You can change style or color for heardes by choose one of those below classes

• bar-light
• bar-stable
• bar-positive
• bar-calm
• bar-balanced
• bar-energized
• bar-assertive
• bar-royal
• bar-dark

b) Button in headers

Default

<div class="bar bar-header">
	<button class="button icon ion-navicon"></button>
	<h1 class="title">This is header bar</h1>
	<button class="button">Edit</button>
</div>
		

• ion-navicon: add navicon icon
Simple button:
• Add button-icon
• Add button-clear to remove the background button color and border

2. Sub Headers

a) Position of sub headers bar

• Can be placed below the original header bar. That mean, put below class after bar-header <div>
• Use bar-subheader class to defines sub headers

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

3. Footer

• Footers are regions at the bottom of a screen
• Footers have the same color options as the headers

a) Simple footer

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

• bar-footer: notify that bar is in footer
• bar-balanced: style for this footer bar

b) Footer with buttons

If no title is present, you'll need to add pull-right or pull-left classes to set position

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

If a title, any buttons will automatically be placed on the correct side of the title in relation to how the markup was written