From 33672aef62bc0c040b0b69c551235361bd301785 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 17 Jun 2016 11:39:59 -0500
Subject: [PATCH] demos(header): update header markup

---
 demos/action-sheet/main.html                 |  13 +-
 demos/alert/main.html                        |  13 +-
 demos/button/main.html                       |  10 +-
 demos/checkbox/main.html                     |  12 +-
 demos/config/main.html                       |  12 +-
 demos/datetime/main.html                     |  12 +-
 demos/events/login.html                      |  21 +-
 demos/hide-when/main.html                    |  13 +-
 demos/icon/main.html                         |  13 +-
 demos/infinite-scroll/main.html              |  11 +-
 demos/input/main.html                        |  13 +-
 demos/item-sliding/main.html                 |  12 +-
 demos/label/main.html                        |  13 +-
 demos/list/main.html                         |  13 +-
 demos/loading/main.html                      |  33 ++--
 demos/local-storage/main.html                |  11 +-
 demos/menu/page1.html                        |  20 +-
 demos/modal/main.html                        |  14 +-
 demos/modal/modal-content.html               |  18 +-
 demos/nav-params/main.html                   |  14 +-
 demos/nav-params/page-2.html                 |  13 +-
 demos/navigation/main.html                   |  13 +-
 demos/navigation/page-2.html                 |  13 +-
 demos/platform/main.html                     |  12 +-
 demos/popover/main.html                      |  23 ++-
 demos/radio/main.html                        |  12 +-
 demos/range/main.html                        |  13 +-
 demos/refresher/main.html                    |  11 +-
 demos/scroll/main.html                       |  13 +-
 demos/searchbar/main.html                    |  42 ++--
 demos/segment/main.html                      | 193 ++++++++++---------
 demos/select/main.html                       |  11 +-
 demos/show-when/main.html                    |  13 +-
 demos/tabs/main.html                         |  12 +-
 demos/textarea/main.html                     |  14 +-
 demos/toast/main.html                        |  13 +-
 demos/toggle/main.html                       |  12 +-
 demos/toolbar/main.html                      |  18 +-
 src/components/button/test/outline/main.html |  10 +-
 src/components/chip/test/icon/main.html      |  11 +-
 40 files changed, 509 insertions(+), 254 deletions(-)

diff --git a/demos/action-sheet/main.html b/demos/action-sheet/main.html
index efb9d9ac3f..75d31e7f45 100644
--- a/demos/action-sheet/main.html
+++ b/demos/action-sheet/main.html
@@ -1,7 +1,14 @@
-<ion-navbar *navbar>
-  <ion-title>Action Sheet</ion-title>
-</ion-navbar>
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Action Sheet</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <button block (click)="present()">Basic Action Sheet</button>
+
 </ion-content>
diff --git a/demos/alert/main.html b/demos/alert/main.html
index 88560381e6..4465d7061b 100644
--- a/demos/alert/main.html
+++ b/demos/alert/main.html
@@ -1,11 +1,18 @@
-<ion-navbar *navbar>
-  <ion-title>Alert</ion-title>
-</ion-navbar>
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Alert</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <button block (click)="doAlert()">Basic Alert</button>
   <button light block (click)="doConfirm()">Confirm Alert</button>
   <button secondary block (click)="doPrompt()">Prompt Alert</button>
   <button danger block (click)="doRadio()">Radio Alert</button>
   <button dark block (click)="doCheckbox()">Checkbox Alert</button>
+
 </ion-content>
diff --git a/demos/button/main.html b/demos/button/main.html
index 2ce4c2493e..b6ae83b3e5 100644
--- a/demos/button/main.html
+++ b/demos/button/main.html
@@ -1,7 +1,11 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Button</ion-title>
+  </ion-toolbar>
+
+</ion-header>
 
-<ion-toolbar>
-  <ion-title>Button</ion-title>
-</ion-toolbar>
 
 <ion-content text-center>
 
diff --git a/demos/checkbox/main.html b/demos/checkbox/main.html
index 9e263297d0..bb4caebdb4 100644
--- a/demos/checkbox/main.html
+++ b/demos/checkbox/main.html
@@ -1,8 +1,14 @@
-<ion-toolbar>
-  <ion-title>Checkbox</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Checkbox</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
+
   <ion-list>
 
     <ion-item>
diff --git a/demos/config/main.html b/demos/config/main.html
index aa235d1e66..d7a4295e73 100644
--- a/demos/config/main.html
+++ b/demos/config/main.html
@@ -1,8 +1,14 @@
-<ion-navbar *navbar>
-  <ion-title>Config</ion-title>
-</ion-navbar>
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Config</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content class="config-demo">
+
   <ion-list>
     <ion-item>
       <ion-label>Back Button Icon</ion-label>
diff --git a/demos/datetime/main.html b/demos/datetime/main.html
index 8c23fca162..691a8f57e9 100644
--- a/demos/datetime/main.html
+++ b/demos/datetime/main.html
@@ -1,8 +1,14 @@
-<ion-navbar *navbar>
-  <ion-title>DateTime</ion-title>
-</ion-navbar>
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>DateTime</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content class="outer-content">
+
   <ion-list>
     <ion-list-header>Web Release Dates</ion-list-header>
 
diff --git a/demos/events/login.html b/demos/events/login.html
index 515e289c15..539d74a9ca 100644
--- a/demos/events/login.html
+++ b/demos/events/login.html
@@ -1,15 +1,19 @@
+<ion-header>
 
-<ion-navbar *navbar>
-  <button menuToggle>
-    <ion-icon name="menu"></ion-icon>
-  </button>
+  <ion-navbar>
+    <button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>
+      Events
+    </ion-title>
+  </ion-navbar>
+
+</ion-header>
 
-  <ion-title>
-    Events
-  </ion-title>
-</ion-navbar>
 
 <ion-content #content>
+
   <h3 margin-left>Login</h3>
   <p margin>Click the login button to use the credentials below. Then, toggle the menu to see the menu items change.</p>
 
@@ -28,4 +32,5 @@
     <button block (click)="login()">Login</button>
     <button block secondary menuToggle>Toggle Menu</button>
   </div>
+
 </ion-content>
diff --git a/demos/hide-when/main.html b/demos/hide-when/main.html
index 15270b11f4..2b0cc60e85 100644
--- a/demos/hide-when/main.html
+++ b/demos/hide-when/main.html
@@ -1,8 +1,14 @@
-<ion-toolbar>
-  <ion-title>HideWhen</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>HideWhen</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="hide-when-demo">
+
   <h5 margin>Hide Icon Per Platform</h5>
   <p margin>In this example we're using the <code>hideWhen</code> directive to decide whether to hide an icon based on the platform.</p>
 
@@ -32,6 +38,7 @@
       </ion-col>
     </ion-row>
   </ion-grid>
+
 </ion-content>
 
 <style>
diff --git a/demos/icon/main.html b/demos/icon/main.html
index 90a33d23bd..880b37c7f8 100644
--- a/demos/icon/main.html
+++ b/demos/icon/main.html
@@ -1,8 +1,14 @@
-<ion-toolbar>
-  <ion-title>Icon</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Icon</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content text-center class="icon-demo">
+
   <ion-row>
     <ion-col><ion-icon name="ionic" primary></ion-icon></ion-col>
     <ion-col><ion-icon name="logo-angular"></ion-icon></ion-col>
@@ -49,6 +55,7 @@
     <ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
     <ion-col><ion-icon name="rainy" primary></ion-icon></ion-col>
   </ion-row>
+
 </ion-content>
 
 <style>
diff --git a/demos/infinite-scroll/main.html b/demos/infinite-scroll/main.html
index 72859491ac..9b5be159d8 100644
--- a/demos/infinite-scroll/main.html
+++ b/demos/infinite-scroll/main.html
@@ -1,6 +1,11 @@
-<ion-toolbar>
-  <ion-title>Infinite Scroll</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Infinite Scroll</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
 
diff --git a/demos/input/main.html b/demos/input/main.html
index 2a2c1d3c2e..afe16c577c 100644
--- a/demos/input/main.html
+++ b/demos/input/main.html
@@ -1,8 +1,14 @@
-<ion-toolbar>
-  <ion-title>Input</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Input</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
+
   <ion-list>
     <ion-item>
       <ion-label primary>Inline Label</ion-label>
@@ -37,4 +43,5 @@
       <ion-input placeholder="Clear Input" clearInput></ion-input>
     </ion-item>
   </ion-list>
+
 </ion-content>
diff --git a/demos/item-sliding/main.html b/demos/item-sliding/main.html
index ab8513fc41..61536c8996 100644
--- a/demos/item-sliding/main.html
+++ b/demos/item-sliding/main.html
@@ -1,8 +1,14 @@
-<ion-toolbar>
-  <ion-title>Item Sliding</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Item Sliding</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="outer-content">
+
   <ion-list class="chat-sliding-demo">
     <ion-list-header>
       Chats
diff --git a/demos/label/main.html b/demos/label/main.html
index 96bf6cbbd0..ae0e028aef 100644
--- a/demos/label/main.html
+++ b/demos/label/main.html
@@ -1,8 +1,14 @@
-<ion-toolbar>
-  <ion-title>Label</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Label</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="label-demo">
+
   <ion-list>
     <ion-item no-lines>
       <ion-avatar item-left>
@@ -53,6 +59,7 @@ United States">
       <ion-label primary>Add to Favorites</ion-label>
     </button>
   </ion-list>
+
 </ion-content>
 
 <style>
diff --git a/demos/list/main.html b/demos/list/main.html
index 3aafe47a96..9fd653a584 100644
--- a/demos/list/main.html
+++ b/demos/list/main.html
@@ -1,8 +1,14 @@
-<ion-toolbar>
-  <ion-title>{{demo}}</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>{{demo}}</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="outer-content">
+
   <ion-list>
     <ion-list-header>
       Settings
@@ -79,4 +85,5 @@
       <button outline item-right>Uninstall</button>
     </ion-item>
   </ion-list>
+
 </ion-content>
diff --git a/demos/loading/main.html b/demos/loading/main.html
index d08da061f7..af6f0a24a1 100644
--- a/demos/loading/main.html
+++ b/demos/loading/main.html
@@ -1,8 +1,14 @@
-<ion-toolbar>
-  <ion-title>Loading</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Loading</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="outer-content">
+
   <ion-list>
     <ion-list-header>
       Spinner Loading Indicators
@@ -47,11 +53,16 @@
 
 </ion-content>
 
-<ion-toolbar position="bottom">
-  <ion-buttons end>
-    <button (click)="goToPage2()">
-      Show Loading and Navigate
-      <ion-icon name="arrow-forward"></ion-icon>
-    </button>
-  </ion-buttons>
-</ion-toolbar>
+
+<ion-footer>
+
+  <ion-toolbar>
+    <ion-buttons end>
+      <button (click)="goToPage2()">
+        Show Loading and Navigate
+        <ion-icon name="arrow-forward"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+
+</ion-footer>
\ No newline at end of file
diff --git a/demos/local-storage/main.html b/demos/local-storage/main.html
index f06f6fff2f..64b4f1d3ad 100644
--- a/demos/local-storage/main.html
+++ b/demos/local-storage/main.html
@@ -1,6 +1,10 @@
-<ion-toolbar>
-  <ion-title>Local Storage</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Local Storage</ion-title>
+  </ion-toolbar>
+
+</ion-header>
 
 
 <ion-content class="local-storage-demo outer-content">
@@ -60,4 +64,5 @@
     <h5>Local Storage:</h5>
     <pre>local: {{ localStorageDemo | cleanLocalData }}</pre>
   </div>
+
 </ion-content>
diff --git a/demos/menu/page1.html b/demos/menu/page1.html
index 21a88709c8..9195d7290b 100644
--- a/demos/menu/page1.html
+++ b/demos/menu/page1.html
@@ -1,11 +1,15 @@
-<ion-navbar *navbar>
-  <button [menuToggle]="activeMenu">
-    <ion-icon name="menu"></ion-icon>
-  </button>
-  <ion-title>
-    Menu
-  </ion-title>
-</ion-navbar>
+<ion-header>
+
+  <ion-navbar>
+    <button [menuToggle]="activeMenu">
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>
+      Menu
+    </ion-title>
+  </ion-navbar>
+
+</ion-header>
 
 
 <ion-content padding>
diff --git a/demos/modal/main.html b/demos/modal/main.html
index 0d998c33de..909afb4f8c 100644
--- a/demos/modal/main.html
+++ b/demos/modal/main.html
@@ -1,11 +1,16 @@
-<ion-navbar *navbar>
-  <ion-title>Modals</ion-title>
-</ion-navbar>
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Modals</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content>
+
   <div padding>
     <button block (click)="openBasicModal()">Open Basic Modal</button>
-    <!-- <button block secondary (click)="openCustomAnimationModal()">Open with Custom Animation</button> -->
   </div>
 
   <ion-list no-margin>
@@ -28,4 +33,5 @@
   <div padding>
     <button block danger (click)="openModalWithParams()">Open with Parameters</button>
   </div>
+
 </ion-content>
diff --git a/demos/modal/modal-content.html b/demos/modal/modal-content.html
index b165744b1e..5edca41cc9 100644
--- a/demos/modal/modal-content.html
+++ b/demos/modal/modal-content.html
@@ -1,9 +1,14 @@
-<ion-navbar *navbar>
-  <ion-buttons start>
-    <button (click)="dismiss()">Close</button>
-  </ion-buttons>
-  <ion-title>Modals</ion-title>
-</ion-navbar>
+<ion-header>
+
+  <ion-navbar>
+    <ion-buttons start>
+      <button (click)="dismiss()">Close</button>
+    </ion-buttons>
+    <ion-title>Modals</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
   <div [hidden]="!myParam">
@@ -18,4 +23,5 @@
     <p>No parameters passed.</p>
   </div>
   <button danger full (click)="dismiss()">Close Modal</button>
+
 </ion-content>
diff --git a/demos/nav-params/main.html b/demos/nav-params/main.html
index fe07acd865..538ffb86e2 100644
--- a/demos/nav-params/main.html
+++ b/demos/nav-params/main.html
@@ -1,8 +1,14 @@
-<ion-navbar *navbar>
-  <ion-title>Nav Params</ion-title>
-</ion-navbar>
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Nav Params</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content>
+
   <ion-list no-margin>
     <ion-list-header>
       Enter Parameters to Pass to the Next Page
@@ -17,7 +23,9 @@
       </ion-select>
     </ion-item>
   </ion-list>
+
   <div padding>
     <button secondary block (click)="pushParams()">Navigate with Parameters</button>
   </div>
+
 </ion-content>
diff --git a/demos/nav-params/page-2.html b/demos/nav-params/page-2.html
index b630155c16..8713bdac67 100644
--- a/demos/nav-params/page-2.html
+++ b/demos/nav-params/page-2.html
@@ -1,8 +1,14 @@
-<ion-navbar *navbar>
-  <ion-title>Nav Params</ion-title>
-</ion-navbar>
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Nav Params</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <div>
     <h5>Parameters passed:</h5>
 
@@ -11,4 +17,5 @@
 ]</pre>
 
   </div>
+
 </ion-content>
diff --git a/demos/navigation/main.html b/demos/navigation/main.html
index c5a5378ebf..6a0b55a706 100644
--- a/demos/navigation/main.html
+++ b/demos/navigation/main.html
@@ -1,7 +1,14 @@
-<ion-navbar *navbar>
-  <ion-title>Navigation</ion-title>
-</ion-navbar>
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Navigation</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <button block (click)="push()">Push New Page</button>
+
 </ion-content>
diff --git a/demos/navigation/page-2.html b/demos/navigation/page-2.html
index e44aa2d63f..4f9f164048 100644
--- a/demos/navigation/page-2.html
+++ b/demos/navigation/page-2.html
@@ -1,8 +1,15 @@
-<ion-navbar *navbar>
-  <ion-title>Page {{pageNum}}</ion-title>
-</ion-navbar>
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Page {{pageNum}}</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <button block (click)="push()">Push Another Page</button>
   <button secondary block (click)="pop()">Pop This Page</button>
+
 </ion-content>
diff --git a/demos/platform/main.html b/demos/platform/main.html
index 771df1434f..1b6574c178 100644
--- a/demos/platform/main.html
+++ b/demos/platform/main.html
@@ -1,8 +1,14 @@
-<ion-toolbar>
-  <ion-title>Platform</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Platform</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="platform-demo">
+
   <p margin class="note">Change devices to see the platform values change.</p>
 
   <ion-grid>
diff --git a/demos/popover/main.html b/demos/popover/main.html
index f52dafec3a..8d07872ac5 100644
--- a/demos/popover/main.html
+++ b/demos/popover/main.html
@@ -1,13 +1,19 @@
-<ion-navbar *navbar primary>
-  <ion-title>Popover</ion-title>
-  <ion-buttons end>
-    <button (click)="presentRadioPopover($event)">
-      <ion-icon name="more"></ion-icon>
-    </button>
-  </ion-buttons>
-</ion-navbar>
+<ion-header>
+
+  <ion-navbar primary>
+    <ion-title>Popover</ion-title>
+    <ion-buttons end>
+      <button (click)="presentRadioPopover($event)">
+        <ion-icon name="more"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content #popoverContent padding>
+
   <div #popoverText class="text-to-change">
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum in purus mollis dictum eget vitae purus. Nulla ultrices est odio, a maximus velit pretium ac. Donec vel elementum mi. Proin elementum pulvinar neque, in lacinia nibh tempus auctor. Nam sapien velit, commodo ac nibh a, maximus ullamcorper nunc. Integer luctus tortor dignissim, dictum neque at, scelerisque purus. Vivamus nec erat vel magna posuere euismod. Sed ac augue eu tellus tincidunt fermentum eget sit amet nunc. Donec sit amet mi libero. Cras nunc arcu, ultrices nec sapien eu, convallis posuere libero. Pellentesque vulputate lacus eros, at lobortis lorem egestas et. Vestibulum tempus quam in efficitur lobortis. Maecenas consectetur consequat sem pharetra aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
 
@@ -19,4 +25,5 @@
 
     <div>Aenean rhoncus urna at interdum blandit. Donec ac massa nec libero vehicula tincidunt. Sed sit amet hendrerit risus. Aliquam vitae vestibulum ipsum, non feugiat orci. Vivamus eu rutrum elit. Nulla dapibus tortor non dignissim pretium. Nulla in luctus turpis. Etiam non mattis tortor, at aliquet ex. Nunc ut ante varius, auctor dui vel, volutpat elit. Nunc laoreet augue sit amet ultrices porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum pellentesque lobortis est, ut tincidunt ligula mollis sit amet. In porta risus arcu, quis pellentesque dolor mattis non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</div>
   </div>
+
 </ion-content>
diff --git a/demos/radio/main.html b/demos/radio/main.html
index 01272a0470..a352925d23 100644
--- a/demos/radio/main.html
+++ b/demos/radio/main.html
@@ -1,8 +1,14 @@
-<ion-toolbar>
-  <ion-title>Radio</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Radio</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="outer-content">
+
   <ion-list radio-group>
     <ion-list-header>
       Language
diff --git a/demos/range/main.html b/demos/range/main.html
index 2803d69670..886b2741eb 100644
--- a/demos/range/main.html
+++ b/demos/range/main.html
@@ -1,8 +1,14 @@
-<ion-toolbar>
-  <ion-title>Range</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Range</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="outer-content">
+
   <ion-list>
     <ion-list-header>
       Brightness
@@ -55,6 +61,7 @@
       </ion-range>
     </ion-item>
   </ion-list>
+
 </ion-content>
 
 <style>
diff --git a/demos/refresher/main.html b/demos/refresher/main.html
index f6646871e1..add4df7b7f 100644
--- a/demos/refresher/main.html
+++ b/demos/refresher/main.html
@@ -1,9 +1,14 @@
-<ion-toolbar>
-  <ion-title>Refresher</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Refresher</ion-title>
+  </ion-toolbar>
+
+</ion-header>
 
 
 <ion-content>
+
   <ion-refresher (ionRefresh)="doRefresh($event)" (ionPull)="doPulling($event)">
     <ion-refresher-content
       pullingText="Pull to refresh..."
diff --git a/demos/scroll/main.html b/demos/scroll/main.html
index 698669bdab..8796f28ec1 100644
--- a/demos/scroll/main.html
+++ b/demos/scroll/main.html
@@ -1,14 +1,21 @@
-<ion-toolbar>
-  <ion-title>Scroll</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Scroll</ion-title>
+  </ion-toolbar>
+
+</ion-header>
 
 
 <ion-content>
+
   <ion-scroll scrollX="true" scrollY="true" style="width: 100%; height: 100%">
     <div class="map-div"></div>
   </ion-scroll>
+
 </ion-content>
 
+
 <style>
   .map-div {
     width: 2600px;
diff --git a/demos/searchbar/main.html b/demos/searchbar/main.html
index 86af559a67..6f78dfcebb 100644
--- a/demos/searchbar/main.html
+++ b/demos/searchbar/main.html
@@ -1,20 +1,26 @@
-<ion-toolbar>
-  <ion-title>Searchbar</ion-title>
-</ion-toolbar>
+<ion-header>
 
-<ion-toolbar>
-  <ion-searchbar placeholder="Default Toolbar"></ion-searchbar>
-</ion-toolbar>
+  <ion-toolbar>
+    <ion-title>Searchbar</ion-title>
+  </ion-toolbar>
 
-<ion-toolbar primary>
-  <ion-searchbar placeholder="Primary Toolbar"></ion-searchbar>
-</ion-toolbar>
+  <ion-toolbar>
+    <ion-searchbar placeholder="Default Toolbar"></ion-searchbar>
+  </ion-toolbar>
+
+  <ion-toolbar primary>
+    <ion-searchbar placeholder="Primary Toolbar"></ion-searchbar>
+  </ion-toolbar>
+
+  <ion-toolbar secondary>
+    <ion-searchbar placeholder="Secondary Toolbar"></ion-searchbar>
+  </ion-toolbar>
+
+</ion-header>
 
-<ion-toolbar secondary>
-  <ion-searchbar placeholder="Secondary Toolbar"></ion-searchbar>
-</ion-toolbar>
 
 <ion-content class="searchbar-demo">
+
   <p padding-left padding-right>Searchbars can be placed in a toolbar or anywhere in the content.</p>
 
   <ion-searchbar placeholder="Default Searchbar"></ion-searchbar>
@@ -30,9 +36,15 @@
 
 </ion-content>
 
-<ion-toolbar danger position="bottom">
-  <ion-searchbar placeholder="Danger Toolbar"></ion-searchbar>
-</ion-toolbar>
+
+<ion-footer>
+
+  <ion-toolbar danger>
+    <ion-searchbar placeholder="Danger Toolbar"></ion-searchbar>
+  </ion-toolbar>
+
+</ion-footer>
+
 
 <style>
   .searchbar-demo hr {
diff --git a/demos/segment/main.html b/demos/segment/main.html
index c4d5e5476b..8753f26c6e 100644
--- a/demos/segment/main.html
+++ b/demos/segment/main.html
@@ -1,61 +1,67 @@
-<ion-toolbar>
-  <ion-title>Segment</ion-title>
-</ion-toolbar>
+<ion-header>
 
-<ion-toolbar>
-  <ion-segment [(ngModel)]="appType">
-    <ion-segment-button value="paid">
-      Paid
-    </ion-segment-button>
-    <ion-segment-button value="free">
-      Free
-    </ion-segment-button>
-    <ion-segment-button value="top">
-      Top
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
+  <ion-toolbar>
+    <ion-title>Segment</ion-title>
+  </ion-toolbar>
 
-<ion-toolbar>
-  <ion-segment [(ngModel)]="news" secondary>
-    <ion-segment-button value="worldwide">
-      Worldwide
-    </ion-segment-button>
-    <ion-segment-button value="local">
-      Local
-    </ion-segment-button>
-    <ion-segment-button value="headlines">
-      Headlines
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
+  <ion-toolbar>
+    <ion-segment [(ngModel)]="appType">
+      <ion-segment-button value="paid">
+        Paid
+      </ion-segment-button>
+      <ion-segment-button value="free">
+        Free
+      </ion-segment-button>
+      <ion-segment-button value="top">
+        Top
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
 
-<ion-toolbar>
-  <ion-segment [(ngModel)]="safari" dark class="icon-segment-demo">
-    <ion-segment-button value="bookmarks">
-      <ion-icon name="book"></ion-icon>
-    </ion-segment-button>
-    <ion-segment-button value="history">
-      <ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon>
-    </ion-segment-button>
-    <ion-segment-button value="links">
-      <ion-icon ios="ios-at-outline" md="md-at"></ion-icon>
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
+  <ion-toolbar>
+    <ion-segment [(ngModel)]="news" secondary>
+      <ion-segment-button value="worldwide">
+        Worldwide
+      </ion-segment-button>
+      <ion-segment-button value="local">
+        Local
+      </ion-segment-button>
+      <ion-segment-button value="headlines">
+        Headlines
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-segment [(ngModel)]="safari" dark class="icon-segment-demo">
+      <ion-segment-button value="bookmarks">
+        <ion-icon name="book"></ion-icon>
+      </ion-segment-button>
+      <ion-segment-button value="history">
+        <ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon>
+      </ion-segment-button>
+      <ion-segment-button value="links">
+        <ion-icon ios="ios-at-outline" md="md-at"></ion-icon>
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-segment [(ngModel)]="favorites" danger>
+      <ion-segment-button value="featured">
+        Featured
+      </ion-segment-button>
+      <ion-segment-button value="recent">
+        Recent
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+
+</ion-header>
 
-<ion-toolbar>
-  <ion-segment [(ngModel)]="favorites" danger>
-    <ion-segment-button value="featured">
-      Featured
-    </ion-segment-button>
-    <ion-segment-button value="recent">
-      Recent
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
 
 <ion-content padding>
+
   <p>Segments can be placed in a toolbar or anywhere in the content.</p>
 
   <ion-segment [(ngModel)]="purchased" primary margin-bottom>
@@ -93,44 +99,49 @@
 
 </ion-content>
 
-<ion-toolbar position="bottom" primary>
-  <ion-segment [(ngModel)]="pet" light>
-    <ion-segment-button value="puppies">
-      Puppies
-    </ion-segment-button>
-    <ion-segment-button value="kittens">
-      Kittens
-    </ion-segment-button>
-    <ion-segment-button value="ducklings">
-      Ducklings
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
 
-<ion-toolbar position="bottom" dark>
-  <ion-segment [(ngModel)]="calendar" primary>
-    <ion-segment-button value="list">
-      List
-    </ion-segment-button>
-    <ion-segment-button value="day">
-      Day
-    </ion-segment-button>
-    <ion-segment-button value="month" checked>
-      Month
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
+<ion-footer>
 
-<ion-toolbar position="bottom" danger>
-  <ion-segment [(ngModel)]="proxy" light>
-    <ion-segment-button value="off">
-      Off
-    </ion-segment-button>
-    <ion-segment-button value="manual">
-      Manual
-    </ion-segment-button>
-    <ion-segment-button value="auto">
-      Auto
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
+  <ion-toolbar primary>
+    <ion-segment [(ngModel)]="pet" light>
+      <ion-segment-button value="puppies">
+        Puppies
+      </ion-segment-button>
+      <ion-segment-button value="kittens">
+        Kittens
+      </ion-segment-button>
+      <ion-segment-button value="ducklings">
+        Ducklings
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+
+  <ion-toolbar dark>
+    <ion-segment [(ngModel)]="calendar" primary>
+      <ion-segment-button value="list">
+        List
+      </ion-segment-button>
+      <ion-segment-button value="day">
+        Day
+      </ion-segment-button>
+      <ion-segment-button value="month" checked>
+        Month
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+
+  <ion-toolbar danger>
+    <ion-segment [(ngModel)]="proxy" light>
+      <ion-segment-button value="off">
+        Off
+      </ion-segment-button>
+      <ion-segment-button value="manual">
+        Manual
+      </ion-segment-button>
+      <ion-segment-button value="auto">
+        Auto
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+
+</ion-footer>
\ No newline at end of file
diff --git a/demos/select/main.html b/demos/select/main.html
index 291b83607c..710cd62ee9 100644
--- a/demos/select/main.html
+++ b/demos/select/main.html
@@ -1,6 +1,11 @@
-<ion-toolbar>
-  <ion-title>Select</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Select</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="outer-content">
 
diff --git a/demos/show-when/main.html b/demos/show-when/main.html
index ea75e93525..c6c8f5d8ce 100644
--- a/demos/show-when/main.html
+++ b/demos/show-when/main.html
@@ -1,8 +1,14 @@
-<ion-toolbar>
-  <ion-title>ShowWhen</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>ShowWhen</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="show-when-demo">
+
   <h5 margin>Show Icon Per Platform</h5>
   <p margin>In this example we're using the <code>showWhen</code> directive to decide whether to show an icon based on the platform.</p>
 
@@ -32,6 +38,7 @@
       </ion-col>
     </ion-row>
   </ion-grid>
+
 </ion-content>
 
 <style>
diff --git a/demos/tabs/main.html b/demos/tabs/main.html
index 4a09a91c59..28ab8fd2fd 100644
--- a/demos/tabs/main.html
+++ b/demos/tabs/main.html
@@ -1,6 +1,11 @@
-<ion-toolbar>
-  <ion-title>Tabs</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Tabs</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
   <!-- Text -->
@@ -65,4 +70,5 @@
     <ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab>
     <ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>
   </ion-tabs>
+
 </ion-content>
diff --git a/demos/textarea/main.html b/demos/textarea/main.html
index 9dd4454949..350e665893 100644
--- a/demos/textarea/main.html
+++ b/demos/textarea/main.html
@@ -1,9 +1,16 @@
-<ion-toolbar>
-  <ion-title>Textarea</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Textarea</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
+
   <ion-list>
+
     <ion-item>
       <ion-label primary>Inline Label</ion-label>
       <ion-textarea placeholder="Textarea"></ion-textarea>
@@ -29,4 +36,5 @@
     </ion-item>
 
   </ion-list>
+
 </ion-content>
diff --git a/demos/toast/main.html b/demos/toast/main.html
index c3dfa386eb..57fd7b5777 100644
--- a/demos/toast/main.html
+++ b/demos/toast/main.html
@@ -1,8 +1,14 @@
-<ion-toolbar>
-  <ion-title>Toast</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Toast</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <button block (click)="showToast('bottom')">Show Toast Bottom Position</button>
   <button block (click)="showToast('top')">Show Toast Top Position</button>
   <button block (click)="showToast('middle')">Show Toast Middle Position</button>
@@ -10,4 +16,5 @@
 
   <button block (click)="showDismissDurationToast()">Show Custom Duration Toast</button>
   <button block (click)="showToastWithCloseButton()">Show Close Button Toast</button>
+
 </ion-content>
diff --git a/demos/toggle/main.html b/demos/toggle/main.html
index 852cdca313..0885dfd058 100644
--- a/demos/toggle/main.html
+++ b/demos/toggle/main.html
@@ -1,8 +1,14 @@
-<ion-toolbar>
-  <ion-title>Toggle</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Toggle</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
+
   <ion-list>
 
     <ion-item>
diff --git a/demos/toolbar/main.html b/demos/toolbar/main.html
index c36149593e..ab82e1de99 100644
--- a/demos/toolbar/main.html
+++ b/demos/toolbar/main.html
@@ -1,6 +1,11 @@
-<ion-toolbar>
-  <ion-title>{{demo}}</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>{{demo}}</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
 
@@ -8,7 +13,6 @@
     <ion-title>Long title that never ends. It just goes on and on my friend.</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar>
     <ion-buttons start>
       <button>
@@ -26,7 +30,6 @@
     <ion-title>Default Buttons</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar>
     <ion-buttons start>
       <button danger>
@@ -44,7 +47,6 @@
     <ion-title>Colored Buttons</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar>
     <ion-buttons start>
       <button solid>
@@ -60,7 +62,6 @@
     </ion-buttons>
   </ion-toolbar>
 
-
   <ion-toolbar>
     <ion-buttons start>
       <button outline>
@@ -76,8 +77,6 @@
     <ion-title>Outline</ion-title>
   </ion-toolbar>
 
-
-
   <ion-toolbar>
     <button menuToggle>
       <ion-icon name="menu"></ion-icon>
@@ -85,7 +84,6 @@
     <ion-title>Left Menu</ion-title>
   </ion-toolbar>
 
-
   <ion-toolbar>
     <ion-title>Right Menu</ion-title>
     <button menuToggle right>
diff --git a/src/components/button/test/outline/main.html b/src/components/button/test/outline/main.html
index e93b6d9dea..50043c3284 100644
--- a/src/components/button/test/outline/main.html
+++ b/src/components/button/test/outline/main.html
@@ -1,7 +1,11 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Outline Buttons</ion-title>
+  </ion-toolbar>
+
+</ion-header>
 
-<ion-toolbar>
-  <ion-title>Outline Buttons</ion-title>
-</ion-toolbar>
 
 <ion-content padding style="text-align:center" class="outer-content">
 
diff --git a/src/components/chip/test/icon/main.html b/src/components/chip/test/icon/main.html
index 45d9e40254..caf3c7d085 100644
--- a/src/components/chip/test/icon/main.html
+++ b/src/components/chip/test/icon/main.html
@@ -1,6 +1,11 @@
-<ion-toolbar>
-  <ion-title>Chips With Icon</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Chips With Icon</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding style="text-align:center">