test(header): update header markup

src/components/action-sheet/test/basic/index.ts

@@ -154,12 +154,14 @@ class E2EPage {
 
 @Component({
   template: `
+    <ion-header>
       <ion-toolbar>
         <ion-buttons start>
           <button (click)="dismiss()">Close</button>
         </ion-buttons>
         <ion-title>Modal</ion-title>
       </ion-toolbar>
+    </ion-header>
     <ion-content padding>
       Hi, I'm Bob, and I'm a modal.
     </ion-content>

src/components/action-sheet/test/basic/main.html

@@ -1,9 +1,14 @@
+<ion-header>
 
-<ion-navbar *navbar>
+  <ion-navbar>
     <ion-title>Action Sheet</ion-title>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <button block class="e2eOpenActionSheet" (click)="presentActionSheet1()">Present Action Sheet 1</button>
   <button block (click)="presentActionSheet2()">Present Action Sheet 2</button>
   <button block (click)="presentActionSheet3()">Present Action Sheet 3</button>
@@ -11,4 +16,5 @@
   <pre>
     Result: {{result}}
   </pre>
+
 </ion-content>

src/components/alert/test/basic/index.ts

@@ -295,12 +295,14 @@ class E2EPage {
 
 @Component({
   template: `
+    <ion-header>
       <ion-toolbar>
         <ion-buttons>
           <button (click)="dismiss()">Close</button>
         </ion-buttons>
         <ion-title>Modal</ion-title>
       </ion-toolbar>
+    </ion-header>
     <ion-content padding>
       Hi, I'm Bob, and I'm a modal.
     </ion-content>

src/components/alert/test/basic/main.html

@@ -1,6 +1,11 @@
-<ion-navbar *navbar>
+<ion-header>
+
+  <ion-navbar>
     <ion-title>Alerts</ion-title>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
 

src/components/alert/test/dismiss/index.ts

@@ -24,7 +24,7 @@ export class E2EPage {
       ]
     });
 
-    alert.onDismiss((asdf) => {
+    alert.onDismiss(() => {
       console.log('dismiss');
       this.nav.push(AnotherPage);
     });
@@ -35,9 +35,11 @@ export class E2EPage {
 
 @Component({
   template: `
-    <ion-navbar *navbar>
+    <ion-header>
+      <ion-navbar>
         <ion-title>Another Page</ion-title>
       </ion-navbar>
+    </ion-header>
     <ion-content padding>
       <form [ngFormModel]="form" (ngSubmit)="submit(form.value)">
     		<ion-list>

src/components/alert/test/dismiss/main.html

@@ -1,8 +1,13 @@
-<ion-navbar *navbar>
+<ion-header>
+
+  <ion-navbar>
     <ion-title>
       Alert Dismiss
     </ion-title>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content>
 

src/components/app/test/animations/main.html

@@ -1,6 +1,11 @@
-<ion-navbar *navbar>
+<ion-header>
+
+  <ion-navbar>
     <ion-title>Animations</ion-title>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content>
 

src/components/app/test/cordova/index.ts

@@ -23,6 +23,7 @@ export class OtherData {
 
 @Component({
   template: `
+  <ion-header>
     <ion-toolbar>
       <ion-title>This is a modal</ion-title>
       <button menuToggle class="e2eCordovaOpenLeftMenu">
@@ -34,6 +35,7 @@ export class OtherData {
         </button>
       </ion-buttons>
     </ion-toolbar>
+  </ion-header>
   <ion-content padding>
     <p>The modal toolbar should have status bar padding.</p>
     <button block (click)="dismissModal()">Close modal</button>
@@ -97,7 +99,8 @@ class Page3 {
 
 @Component({
   template: `
-  <ion-navbar *navbar>
+  <ion-header>
+    <ion-navbar>
       <ion-title>This is a tab page</ion-title>
       <button menuToggle>
         <ion-icon name="menu"></ion-icon>
@@ -108,6 +111,7 @@ class Page3 {
         </button>
       </ion-buttons>
     </ion-navbar>
+  </ion-header>
   <ion-content padding>
     <p>The toolbar should have status bar padding.</p>
   </ion-content>

src/components/app/test/cordova/page1.html

@@ -1,4 +1,6 @@
-<ion-navbar *navbar primary>
+<ion-header>
+
+  <ion-navbar primary>
     <ion-segment [(ngModel)]="sort" light>
       <ion-segment-button value="all">All</ion-segment-button>
       <ion-segment-button value="favorites">Favorites</ion-segment-button>
@@ -14,14 +16,20 @@
     <button menuToggle="right" right>
       <ion-icon name="menu"></ion-icon>
     </button>
-</ion-navbar>
-<ion-toolbar>
+  </ion-navbar>
+
+  <ion-toolbar>
     <ion-title>I'm a toolbar</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
 
   <button block [navPush]="page2" class="e2eCordovaPage2">Go to Page 2</button>
   <button block secondary (click)="goToTabs()">Go to Tabs</button>
+
 </ion-content>

src/components/app/test/cordova/page2.html

@@ -1,4 +1,6 @@
-<ion-navbar *navbar>
+<ion-header>
+
+  <ion-navbar>
     <ion-title>Page 2</ion-title>
     <button menuToggle>
       <ion-icon name="menu"></ion-icon>
@@ -11,15 +13,21 @@
     <button menuToggle="right" right>
       <ion-icon name="menu"></ion-icon>
     </button>
-</ion-navbar>
-<ion-toolbar>
+  </ion-navbar>
+
+  <ion-toolbar>
     <ion-title>I'm a toolbar</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
 
   <button block [navPush]="page1">Go to Page 1</button>
   <button block [navPush]="page3" class="e2eCordovaPage3">Go to Page 3</button>
   <button block secondary (click)="openModal()" class="e2eCordovaOpenModal">Open Modal</button>
+
 </ion-content>

src/components/app/test/cordova/page3.html

@@ -1,10 +1,17 @@
 <ion-content padding>
+
   <h2>Page 3</h2>
   <div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
 
   <button block (click)="goBack()" class="e2eCordovaGoBack">Go Back</button>
+
 </ion-content>
 
-<ion-toolbar position="bottom">
+
+<ion-footer>
+
+  <ion-toolbar>
     <ion-title>I'm a bottom toolbar</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-footer>

src/components/app/test/gestures/main.html

@@ -1,6 +1,11 @@
-<ion-navbar *navbar>
+<ion-header>
+
+  <ion-navbar>
     <ion-title>Gestures</ion-title>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
 

src/components/app/test/typography/main.html

@@ -1,7 +1,11 @@
+<ion-header>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-title>Typography</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding>
 

src/components/badge/test/basic/main.html

@@ -1,8 +1,14 @@
-<ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
     <ion-title>Badges</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
+
   <ion-list>
     <ion-list-header>
       Badges Right
@@ -32,6 +38,7 @@
       <ion-badge item-right dark>99</ion-badge>
     </ion-item>
   </ion-list>
+
   <ion-list>
     <ion-list-header>
       Badges Left
@@ -61,4 +68,5 @@
       <ion-badge item-left dark>99</ion-badge>
     </ion-item>
   </ion-list>
+
 </ion-content>

src/components/button/test/block/main.html

@@ -1,7 +1,11 @@
+<ion-header>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-title>Block Buttons</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding style="text-align:center">
 

src/components/button/test/clear/main.html

@@ -1,7 +1,11 @@
+<ion-header>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-title>Clear Buttons</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding style="text-align:center">
 

src/components/button/test/dynamic/main.html

@@ -1,5 +1,6 @@
+<ion-header>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-buttons start>
       <button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</button>
     </ion-buttons>
@@ -7,9 +8,13 @@
     <ion-buttons end>
       <button [color]="isSecondary ? 'secondary' : 'primary'" [solid]="isSolid">Solid</button>
     </ion-buttons>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <button block [solid]="isSolid">Solid</button>
   <button block [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Danger (Outline)</button>
   <button block [color]="isSecondary ? 'secondary' : 'primary'"  [clear]="isClear">Secondary (Clear)</button>
@@ -22,4 +27,5 @@
   <hr/>
   <button block outline danger (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</button>
   <button block clear danger (click)="reset()">Reset all buttons</button>
+
 </ion-content>

src/components/button/test/full/main.html

@@ -1,6 +1,11 @@
-<ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
     <ion-title>Full Buttons</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
 
@@ -34,4 +39,5 @@
     <a button full clear dark href="#">a[button][full][clear][dark]</a>
     <button full clear dark>button[full][clear][dark]</button>
   </p>
+
 </ion-content>

src/components/button/test/icons/main.html

@@ -1,7 +1,11 @@
+<ion-header>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-title>Buttons Icons</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding>
 

src/components/button/test/raised/main.html

@@ -1,7 +1,11 @@
+<ion-header>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-title>Raised Buttons</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding style="text-align:center">
 
@@ -38,4 +42,5 @@
   <p>
     <button raised clear disabled>Clear Disabled</button>
   </p>
+
 </ion-content>

src/components/button/test/round/main.html

@@ -1,9 +1,14 @@
+<ion-header>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-title>Round Buttons</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <button round>button</button>
   <button round light>button light</button>
   <button round secondary>button secondary</button>
@@ -18,6 +23,7 @@
 
 </ion-content>
 
+
 <style>
   button {
     display: block !important;

src/components/button/test/sizes/main.html

@@ -1,7 +1,11 @@
+<ion-header>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-title>Button Sizes</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding>
 

src/components/card/test/advanced/main.html

@@ -1,5 +1,11 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Advanced Cards</ion-title>
+  </ion-toolbar>
+
+</ion-header>
 
-<ion-toolbar><ion-title>Advanced Cards</ion-title></ion-toolbar>
 
 <ion-content class="outer-content">
 
@@ -119,6 +125,7 @@
 
 </ion-content>
 
+
 <style>
   img {
     height: 100px;

src/components/card/test/basic/main.html

@@ -1,5 +1,11 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Basic Cards</ion-title>
+  </ion-toolbar>
+
+</ion-header>
 
-<ion-toolbar><ion-title>Basic Cards</ion-title></ion-toolbar>
 
 <ion-content style="background: #e5e5e5">
 

src/components/card/test/images/main.html

@@ -1,5 +1,10 @@
+<ion-header>
 
-<ion-toolbar><ion-title>Card Images</ion-title></ion-toolbar>
+  <ion-toolbar>
+    <ion-title>Card Images</ion-title>
+  </ion-toolbar>
+
+</ion-header>
 
 
 <ion-content class="outer-content">

src/components/card/test/list/main.html

@@ -1,5 +1,11 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>List Cards</ion-title>
+  </ion-toolbar>
+
+</ion-header>
 
-<ion-toolbar><ion-title>List Cards</ion-title></ion-toolbar>
 
 <ion-content class="outer-content">
 
@@ -100,5 +106,4 @@
 
   </ion-card>
 
-
 </ion-content>

src/components/card/test/map/main.html

@@ -1,11 +1,15 @@
+<ion-header>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-title>Map Card</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="map-cards">
 
-<ion-card>
+  <ion-card>
 
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     <button fab fab-right fab-top>
@@ -33,9 +37,9 @@
       </button>
     </ion-item>
 
-</ion-card>
+  </ion-card>
 
-<ion-card>
+  <ion-card>
 
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     <button danger fab fab-right fab-top>
@@ -63,9 +67,9 @@
       </button>
     </ion-item>
 
-</ion-card>
+  </ion-card>
 
-<ion-card>
+  <ion-card>
 
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     <button secondary fab fab-right fab-top>
@@ -93,10 +97,11 @@
       </button>
     </ion-item>
 
-</ion-card>
+  </ion-card>
 
 </ion-content>
 
+
 <style>
   .map-cards img {
     height: 200px;

src/components/card/test/social/main.html

@@ -1,11 +1,15 @@
+<ion-header>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-title>Social Card</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="social-cards">
 
-<ion-card>
+  <ion-card>
 
     <ion-item>
       <ion-avatar item-left>
@@ -35,10 +39,10 @@
       </ion-note>
     </ion-item>
 
-</ion-card>
+  </ion-card>
 
 
-<ion-card>
+  <ion-card>
 
     <ion-item>
       <ion-avatar item-left>
@@ -68,9 +72,9 @@
       </ion-note>
     </ion-item>
 
-</ion-card>
+  </ion-card>
 
-<ion-card>
+  <ion-card>
 
     <ion-item>
       <ion-avatar item-left>
@@ -100,10 +104,11 @@
       </ion-note>
     </ion-item>
 
-</ion-card>
+  </ion-card>
 
 </ion-content>
 
+
 <style>
   .social-cards img {
     height: 200px;

src/components/checkbox/test/basic/main.html

@@ -1,5 +1,10 @@
+<ion-header>
 
-<ion-toolbar><ion-title>Checkboxes</ion-title></ion-toolbar>
+  <ion-toolbar>
+    <ion-title>Checkboxes</ion-title>
+  </ion-toolbar>
+
+</ion-header>
 
 
 <ion-content>

src/components/chip/test/basic/main.html

@@ -1,6 +1,11 @@
-<ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
     <ion-title>Chips With Text</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding style="text-align:center">
 

src/components/chip/test/delete/main.html

@@ -1,6 +1,11 @@
-<ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
     <ion-title>Chips With Delete</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding style="text-align:center">
 

src/components/chip/test/image/main.html

@@ -1,6 +1,11 @@
-<ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
     <ion-title>Chips With Image</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding style="text-align:center">
 

src/components/datetime/test/basic/main.html

@@ -1,6 +1,11 @@
-<ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
     <ion-title>Datetime</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="outer-content">
 

src/components/datetime/test/labels/main.html

@@ -1,6 +1,11 @@
-<ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
     <ion-title>Datetime</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="outer-content">
 

src/components/grid/test/alignment/main.html

@@ -1,4 +1,11 @@
-<ion-toolbar><ion-title>Grid Alignment</ion-title></ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Grid Alignment</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="alignment-demo">
   <ion-row>

src/components/grid/test/basic/main.html

@@ -1,4 +1,11 @@
-<ion-toolbar><ion-title>Grid</ion-title></ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Grid</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="grid-demo">
   <ion-grid>

src/components/grid/test/full/main.html

@@ -1,4 +1,11 @@
-<ion-toolbar><ion-title>Grid</ion-title></ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Grid</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="grid-full">
 

src/components/icon/test/basic/main.html

@@ -1,7 +1,11 @@
+<ion-header>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-title>Icons</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
 
@@ -87,6 +91,7 @@
 
 </ion-content>
 
+
 <style>
   /*to ensure ng css encapsulation doesn't mess with icon attributes*/
   code {

src/components/infinite-scroll/test/basic/main.html

@@ -1,4 +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>
 

src/components/infinite-scroll/test/short-list/main.html

@@ -1,4 +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>
 

src/components/input/test/clear-input/main.html

@@ -1,12 +1,14 @@
+<ion-header>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-title>Clear Input</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
 
 
 <ion-content>
 
-
   <ion-list>
 
     <ion-item>
@@ -14,7 +16,6 @@
       <ion-input class="e2eClearInput" [(ngModel)]="myValue" clearInput></ion-input>
     </ion-item>
 
-
   </ion-list>
 
 </ion-content>

src/components/input/test/fixed-inline-labels/main.html

@@ -1,7 +1,11 @@
+<ion-header>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-title>Fixed Inline Label Text Input</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
 

src/components/input/test/floating-labels/main.html

@@ -1,8 +1,14 @@
+<ion-header>
 
-<ion-toolbar><ion-title>Floating Label Text Input</ion-title></ion-toolbar>
+  <ion-toolbar>
+    <ion-title>Floating Label Text Input</ion-title>
+  </ion-toolbar>
+
+</ion-header>
 
 
 <ion-content>
+
   <ion-list>
 
     <ion-item>
@@ -76,6 +82,7 @@
 
 </ion-content>
 
+
 <style>
   img {
     height: 100px;

src/components/input/test/form-inputs/main.html

@@ -1,5 +1,10 @@
+<ion-header>
 
-<ion-toolbar><ion-title>Form Inputs</ion-title></ion-toolbar>
+  <ion-toolbar>
+    <ion-title>Form Inputs</ion-title>
+  </ion-toolbar>
+
+</ion-header>
 
 
 <ion-content>

src/components/input/test/inline-labels/main.html

@@ -1,5 +1,10 @@
+<ion-header>
 
-<ion-toolbar><ion-title>Inline Label Text Input</ion-title></ion-toolbar>
+  <ion-toolbar>
+    <ion-title>Inline Label Text Input</ion-title>
+  </ion-toolbar>
+
+</ion-header>
 
 
 <ion-content>

src/components/input/test/input-focus/main.html

@@ -1,12 +1,15 @@
+<ion-header>
 
-<ion-toolbar primary>
+  <ion-toolbar primary>
     <ion-title>Inset Focus</ion-title>
     <ion-buttons end>
       <button (click)="reload()">
         Reload
       </button>
     </ion-buttons>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
 
 
 <ion-content>
@@ -179,5 +182,4 @@
 
   </ion-list>
 
-
 </ion-content>

src/components/input/test/inset-inputs/main.html

@@ -1,12 +1,14 @@
+<ion-header>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-title>Inset Inputs</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
 
 
 <ion-content class="outer-content">
 
-
   <ion-list inset>
 
     <ion-item>
@@ -67,5 +69,4 @@
 
   </ion-card>
 
-
 </ion-content>

src/components/input/test/placeholder-labels/main.html

@@ -1,7 +1,10 @@
+<ion-header>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-title>Placeholder Label Text Input</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
 
 
 <ion-content class="outer-content">

src/components/input/test/stacked-labels/main.html

@@ -1,7 +1,11 @@
 
-<ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
     <ion-title>Stacked Label Text Input</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
 
 
 <ion-content>

src/components/item/test/buttons/main.html

@@ -1,4 +1,11 @@
-<ion-toolbar><ion-title>Items as Links/Buttons</ion-title></ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Items as Links/Buttons</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
 
@@ -98,6 +105,7 @@
 
 </ion-content>
 
+
 <style>
   img {
     height: 100px;

src/components/item/test/dividers/main.html

@@ -1,6 +1,14 @@
-<ion-toolbar><ion-title>Item Divider</ion-title></ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Item Divider</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="outer-content">
+
   <ion-item-group>
     <ion-item>
       Plain Ol' div with some text

src/components/item/test/groups/index.ts

@@ -4,9 +4,11 @@ import {ionicBootstrap, NavController, NavParams} from '../../../../../src';
 
 @Component({
   template: `
-    <ion-navbar *navbar>
+    <ion-header>
+      <ion-navbar>
         <ion-title>{{session.name}}</ion-title>
       </ion-navbar>
+    </ion-header>
     <ion-content padding>
       <p>{{session.description}}</p>
       <p><button (click)="nav.pop()">Go Back</button></p>
@@ -14,7 +16,7 @@ import {ionicBootstrap, NavController, NavParams} from '../../../../../src';
   `
 })
 class SessionDetail {
-  session;
+  session: any;
 
   constructor(params: NavParams, public nav: NavController) {
     this.session = params.data;
@@ -30,11 +32,11 @@ class SessionList {
 
   constructor(public nav: NavController) {}
 
-  addFavorite(timeSlot, session, slidingItem) {
+  addFavorite(timeSlot: any, session: any, slidingItem: any) {
     console.error("addFavorite", timeSlot, session, slidingItem);
   }
 
-  openSession(session) {
+  openSession(session: any) {
     this.nav.push(SessionDetail, session);
   }
 

src/components/item/test/groups/session-list.html

@@ -1,9 +1,14 @@
-<ion-navbar *navbar>
+<ion-header>
+
+  <ion-navbar>
     <ion-title>Item Groups</ion-title>
     <ion-buttons end>
       <button (click)="reload()">Reload</button>
     </ion-buttons>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content class="outer-content">
 

src/components/item/test/icons/main.html

@@ -1,6 +1,11 @@
-<ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
     <ion-title>Item Icons</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
 

src/components/item/test/images/main.html

@@ -1,4 +1,11 @@
-<ion-toolbar><ion-title>Item Images</ion-title></ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Item Images</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
 
@@ -60,6 +67,7 @@
 
 </ion-content>
 
+
 <style>
   img {
     height: 100px;

src/components/item/test/media/main.html

@@ -1,4 +1,11 @@
-<ion-toolbar><ion-title>Item Media</ion-title></ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Item Media</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
 
@@ -61,6 +68,7 @@
 
 </ion-content>
 
+
 <style>
   img {
     height: 100px;

src/components/item/test/sliding/main.html

@@ -1,17 +1,23 @@
+<ion-header>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-title>Sliding Items</ion-title>
     <ion-buttons end>
       <button (click)="reload()">Reload</button>
     </ion-buttons>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
+
   <div padding>
     <button block (click)="toggleSliding()">Toggle sliding</button>
     <button block (click)="changeDynamic()">Change Dynamic Options</button>
     <button block (click)="closeOpened()">Close Opened Items</button>
   </div>
+
   <ion-list #myList>
 
     <ion-item-sliding #item100>
@@ -229,6 +235,7 @@
 
 </ion-content>
 
+
 <style>
   img {
     height: 100px;

src/components/item/test/text/main.html

@@ -1,4 +1,11 @@
-<ion-toolbar><ion-title>Item Text</ion-title></ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Item Text</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="outer-content">
 

src/components/list/test/headers/main.html

@@ -1,4 +1,11 @@
-<ion-toolbar><ion-title>List Headers</ion-title></ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>List Headers</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="outer-content">
 

src/components/list/test/inset/main.html

@@ -1,5 +1,10 @@
+<ion-header>
 
-<ion-toolbar><ion-title>Inset List</ion-title></ion-toolbar>
+  <ion-toolbar>
+    <ion-title>Inset List</ion-title>
+  </ion-toolbar>
+
+</ion-header>
 
 
 <ion-content class="outer-content">

src/components/list/test/no-lines/main.html

@@ -1,6 +1,14 @@
-<ion-toolbar><ion-title>List No Lines</ion-title></ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>List No Lines</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="outer-content">
+
   <ion-list no-lines>
     <ion-list-header>
       List With No Lines
@@ -148,6 +156,7 @@
       </ion-note>
     </ion-item>
   </ion-list>
+
 </ion-content>
 
 <style>

src/components/list/test/repeat-headers/main.html

@@ -1,4 +1,11 @@
-<ion-toolbar><ion-title>List Headers Borders</ion-title></ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>List Headers Borders</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="outer-content">
 
@@ -13,4 +20,5 @@
       </div>
     </ion-item>
   </ion-list>
+
 </ion-content>

src/components/loading/test/basic/index.ts

@@ -188,11 +188,14 @@ class E2EPage {
 
 @Component({
   template: `
-    <ion-navbar *navbar>
+    <ion-header>
+      <ion-navbar>
         <ion-title>Page 2</ion-title>
       </ion-navbar>
+    </ion-header>
     <ion-content padding>Some content</ion-content>
-    <ion-toolbar position="bottom">
+    <ion-footer>
+      <ion-toolbar>
         <ion-buttons end>
           <button (click)="goToPage3()">
             Navigate
@@ -200,6 +203,7 @@ class E2EPage {
           </button>
         </ion-buttons>
       </ion-toolbar>
+    </ion-footer>
   `
 })
 class Page2 {
@@ -218,9 +222,11 @@ class Page2 {
 
 @Component({
   template: `
-    <ion-navbar *navbar>
+    <ion-header>
+      <ion-navbar>
         <ion-title>Page 3</ion-title>
       </ion-navbar>
+    </ion-header>
     <ion-content padding>Some content</ion-content>
   `
 })

src/components/loading/test/basic/main.html

@@ -1,9 +1,14 @@
+<ion-header>
 
-<ion-navbar *navbar>
+  <ion-navbar>
     <ion-title>Loading</ion-title>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <button block (click)="presentLoadingIos()">iOS Spinner</button>
   <button block (click)="presentLoadingDots()">Dots Spinner</button>
   <button block (click)="presentLoadingBubbles()">Bubbles Spinner</button>
@@ -14,13 +19,19 @@
   <button block (click)="presentLoadingText()" dark>Content Only w/ Nav</button>
   <button block (click)="presentLoadingMultiple()" danger>Multiple Loading</button>
   <button block (click)="presentLoadingMultipleNav()" danger>Multiple Nav Loading</button>
+
 </ion-content>
 
-<ion-toolbar position="bottom">
+
+<ion-footer>
+
+  <ion-toolbar>
     <ion-buttons end>
       <button (click)="goToPage2()">
         Navigate
         <ion-icon name="arrow-forward"></ion-icon>
       </button>
     </ion-buttons>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-footer>

src/components/loading/test/tabs/index.ts

@@ -38,9 +38,11 @@ class E2EPage {
 
 @Component({
   template: `
-    <ion-navbar *navbar>
+    <ion-header>
+      <ion-navbar>
         <ion-title>Page 2</ion-title>
       </ion-navbar>
+    </ion-header>
     <ion-content padding>Some content</ion-content>
   `
 })

src/components/loading/test/tabs/main.html

@@ -1,9 +1,15 @@
+<ion-header>
 
-<ion-navbar *navbar>
+  <ion-navbar>
     <ion-title>Loading</ion-title>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <button block (click)="presentLoading()" class="e2eLoadingTabsContent">Loading Content</button>
   <button block (click)="presentLoadingNav()">Loading w/ Nav</button>
+
 </ion-content>

src/components/menu/test/basic/page1.html

@@ -1,5 +1,6 @@
+<ion-header>
 
-<ion-navbar *navbar>
+  <ion-navbar>
 
     <button menuToggle="left">
       <ion-icon name="menu"></ion-icon>
@@ -25,7 +26,9 @@
       <ion-icon name="menu"></ion-icon>
     </button>
 
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
 
 
 <ion-content padding>

src/components/menu/test/basic/page2.html

@@ -1,5 +1,6 @@
+<ion-header>
 
-<ion-navbar *navbar>
+  <ion-navbar>
 
     <button menuToggle>
       <ion-icon name="menu"></ion-icon>
@@ -9,7 +10,10 @@
       Menu
     </ion-title>
 
-</ion-navbar>
+  </ion-navbar>
+</ion-header>
+
+
 
 <ion-content padding>
 

src/components/menu/test/basic/page3.html

@@ -1,19 +1,18 @@
+<ion-header>
 
-<ion-navbar *navbar>
-
+  <ion-navbar>
     <button menuToggle="left">
       <ion-icon name="menu"></ion-icon>
     </button>
-
     <ion-title>
       Menu
     </ion-title>
-
     <button menuToggle="right" right>
       <ion-icon name="menu"></ion-icon>
     </button>
+  </ion-navbar>
 
-</ion-navbar>
+</ion-header>
 
 
 <ion-content padding>

src/components/menu/test/disable-swipe/page1.html

@@ -1,18 +1,18 @@
-<ion-navbar *navbar>
+<ion-header>
 
+  <ion-navbar>
     <button menuToggle="left">
       <ion-icon name="menu"></ion-icon>
     </button>
-
     <ion-title>
       Main
     </ion-title>
-
     <button menuToggle="right" right secondary>
       <ion-icon name="menu"></ion-icon>
     </button>
-</ion-navbar>
+  </ion-navbar>
 
+</ion-header>
 
 <ion-content padding>
 

src/components/menu/test/enable-disable/main.html

@@ -1,4 +1,3 @@
-
 <ion-menu [content]="content" id="menu1">
 
   <ion-toolbar secondary>

src/components/menu/test/enable-disable/page1.html

@@ -1,15 +1,19 @@
+<ion-header>
 
-<ion-navbar *navbar>
+  <ion-navbar>
     <button menuToggle="left">
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>
       Multiple Menus
     </ion-title>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
 
 
 <ion-content padding>
+
   <h3> Page 1 </h3>
 
   <p>

src/components/menu/test/enable-disable/page2.html

@@ -1,15 +1,19 @@
+<ion-header>
 
-<ion-navbar *navbar>
+  <ion-navbar>
     <button menuToggle="left">
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>
       Multiple Menus
     </ion-title>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
 
 
 <ion-content padding>
+
   <h3> Page 2 </h3>
 
   <p>

src/components/menu/test/multiple/main.html

@@ -1,4 +1,3 @@
-
 <ion-menu [content]="content" id="menu1">
 
   <ion-toolbar secondary>

src/components/menu/test/multiple/page1.html

@@ -1,12 +1,15 @@
+<ion-header>
 
-<ion-navbar *navbar>
+  <ion-navbar>
     <button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>
       Multiple Menus
     </ion-title>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
 
 
 <ion-content padding>

src/components/menu/test/overlay/page1.html

@@ -1,19 +1,18 @@
+<ion-header>
 
-<ion-navbar *navbar>
-
+  <ion-navbar>
     <button menuToggle="myMenuId">
       <ion-icon name="menu"></ion-icon>
     </button>
-
     <ion-title>
       Overlay Menu
     </ion-title>
-
     <button menuToggle="myMenuId2" end>
       <ion-icon name="menu"></ion-icon>
     </button>
+  </ion-navbar>
 
-</ion-navbar>
+</ion-header>
 
 
 <ion-content #content padding>

src/components/menu/test/push/page1.html

@@ -1,19 +1,18 @@
+<ion-header>
 
-<ion-navbar *navbar>
-
+  <ion-navbar>
     <button menuToggle="left">
       <ion-icon name="menu"></ion-icon>
     </button>
-
     <ion-title>
       Push Menu
     </ion-title>
-
     <button menuToggle="right" end>
       <ion-icon name="menu"></ion-icon>
     </button>
+  </ion-navbar>
 
-</ion-navbar>
+</ion-header>
 
 
 <ion-content #content padding>

src/components/menu/test/reveal/page1.html

@@ -1,19 +1,18 @@
+<ion-header>
 
-<ion-navbar *navbar>
-
+  <ion-navbar>
     <button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
-
     <ion-title>
       Reveal Menu
     </ion-title>
-
     <button menuToggle="right" end>
       <ion-icon name="menu"></ion-icon>
     </button>
+  </ion-navbar>
 
-</ion-navbar>
+</ion-header>
 
 
 <ion-content #content padding>

src/components/modal/test/basic/main.html

@@ -1,10 +1,14 @@
 <ion-header>
+
   <ion-navbar>
     <ion-title>Modals</ion-title>
   </ion-navbar>
+
 </ion-header>
 
+
 <ion-content padding>
+
   <p>
     <button (click)="presentModal()">Present modal, pass params</button>
   </p>
@@ -26,4 +30,5 @@
   <p>
     {{platforms | json}}
   </p>
+
 </ion-content>

src/components/nav/test/child-navs/index.ts

@@ -12,13 +12,15 @@ ionicBootstrap(E2EApp);
 
 @Component({
   template: `
-  <ion-navbar *navbar>
+  <ion-header>
+    <ion-navbar>
       <ion-title>
         Landing Page Comp
       </ion-title>
     </ion-navbar>
+  </ion-header>
 
-  <ion-content class="home">
+  <ion-content>
     <button primary (click)="goToPage()" class="nested-children-test">
       Nested Children Test
     </button>
@@ -37,13 +39,15 @@ class LandingPage{
 
 @Component({
   template: `
-  <ion-navbar *navbar>
+  <ion-header>
+    <ion-navbar>
       <ion-title>
         First Page Comp
       </ion-title>
     </ion-navbar>
+  </ion-header>
 
-  <ion-content class="home">
+  <ion-content>
     <h3>Sub Header First Page</h3>
     <ion-nav [root]="root"></ion-nav>
   </ion-content>
@@ -55,13 +59,15 @@ class FirstPage{
 
 @Component({
   template: `
-  <ion-navbar *navbar>
+  <ion-header>
+    <ion-navbar>
       <ion-title>
         Second Page Comp
       </ion-title>
     </ion-navbar>
+  </ion-header>
 
-  <ion-content class="home">
+  <ion-content>
     <h3>Sub Header Second Page</h3>
     <ion-nav [root]="root"></ion-nav>
   </ion-content>
@@ -73,13 +79,15 @@ class SecondPage{
 
 @Component({
   template: `
-  <ion-navbar *navbar>
+  <ion-header>
+    <ion-navbar>
       <ion-title>
         Third Page Comp
       </ion-title>
     </ion-navbar>
+  </ion-header>
 
-  <ion-content class="home">
+  <ion-content>
     <h3>Sub Header Third Page</h3>
     <ion-nav [root]="root"></ion-nav>
   </ion-content>

src/components/nav/test/insert-views/index.ts

@@ -4,9 +4,11 @@ import {ionicBootstrap, NavController} from '../../../../../src';
 
 @Component({
   template: `
-    <ion-navbar *navbar>
+    <ion-header>
+      <ion-navbar>
         <ion-title>Root</ion-title>
       </ion-navbar>
+    </ion-header>
 
     <ion-content padding>
       <button block (click)="pushPage()">Push Page</button>
@@ -23,9 +25,11 @@ class FirstPage {
 
 @Component({
   template: `
-    <ion-navbar *navbar>
+    <ion-header>
+      <ion-navbar>
         <ion-title>Root</ion-title>
       </ion-navbar>
+    </ion-header>
 
     <ion-content padding>
       <h1>Second page</h1>
@@ -44,9 +48,11 @@ class SecondPage {
 
 @Component({
   template: `
-    <ion-navbar *navbar>
+    <ion-header>
+      <ion-navbar>
         <ion-title>Inserted Paged</ion-title>
       </ion-navbar>
+    </ion-header>
     <ion-content padding>
       Inserted Page
     </ion-content>

src/components/nav/test/nested/index.ts

@@ -5,9 +5,11 @@ import {Config, Nav, App} from '../../../../../src';
 
 @Component({
   template: `
-    <ion-navbar *navbar>
+    <ion-header>
+      <ion-navbar>
         <ion-title>Login</ion-title>
       </ion-navbar>
+    </ion-header>
     <ion-content style="text-align:center;" padding>
       <p><button (click)="goToAccount()">Login</button></p>
       <p><button (click)="goBack()">App goBack()</button></p>
@@ -87,12 +89,14 @@ export class Account {
 
 @Component({
   template: `
-    <ion-navbar *navbar primary>
+    <ion-header>
+      <ion-navbar primary>
         <button menuToggle>
           <ion-icon name="menu"></ion-icon>
         </button>
         <ion-title>Account Dashboard</ion-title>
       </ion-navbar>
+    </ion-header>
     <ion-content padding>
       <p><button (click)="goToProfile()">Profile</button></p>
       <p><button (click)="logOut()">Logout</button></p>
@@ -122,12 +126,14 @@ export class Dashboard {
 
 @Component({
   template: `
-    <ion-navbar *navbar danger>
+    <ion-header>
+      <ion-navbar danger>
         <button menuToggle>
           <ion-icon name="menu"></ion-icon>
         </button>
         <ion-title>Account Profile</ion-title>
       </ion-navbar>
+    </ion-header>
     <ion-content padding>
       <p><button (click)="goToDashboard()">Dashboard</button></p>
       <p><button (click)="logOut()">Logout</button></p>

src/components/nav/test/routing/view1.html

@@ -1,12 +1,17 @@
+<ion-header>
 
-<ion-navbar *navbar>
+  <ion-navbar>
     <button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>First View</ion-title>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <h4>
     Window Hash: {{windowHash}}
   </h4>
@@ -22,4 +27,5 @@
   <p>
     <a href="#/3/151">Third View via href, 151 as id param</a>
   </p>
+
 </ion-content>

src/components/nav/test/routing/view2.html

@@ -1,14 +1,19 @@
+<ion-header>
 
-<ion-navbar *navbar primary>
+  <ion-navbar primary>
     <ion-title>Second View</ion-title>
     <ion-buttons end>
       <button>
         <ion-icon name="help"></ion-icon>
       </button>
     </ion-buttons>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <h4>
     Window Hash: {{windowHash}}
   </h4>
@@ -24,4 +29,5 @@
   <p>
     <a href="#/">First View via href</a>
   </p>
+
 </ion-content>

src/components/nav/test/routing/view3.html

@@ -1,9 +1,14 @@
+<ion-header>
 
-<ion-navbar *navbar primary>
+  <ion-navbar primary>
     <ion-title>Third View</ion-title>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <h4>
     Window Hash: {{windowHash}}
   </h4>
@@ -22,4 +27,5 @@
   <p>
     <a href="#/">First View via href</a>
   </p>
+
 </ion-content>

src/components/picker/test/basic/main.html

@@ -1,6 +1,11 @@
-<ion-navbar *navbar>
+<ion-header>
+
+  <ion-navbar>
     <ion-title>Picker</ion-title>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
 
@@ -27,7 +32,3 @@
   </p>
 
 </ion-content>
-
-<style>
-
-</style>

src/components/popover/test/basic/main.html

@@ -1,4 +1,6 @@
-<ion-navbar *navbar primary>
+<ion-header>
+
+  <ion-navbar primary>
     <ion-buttons left>
       <button (click)="presentRadioPopover($event)">
         <ion-icon name="person"></ion-icon>
@@ -16,9 +18,13 @@
         <ion-icon name="more"></ion-icon>
       </button>
     </ion-buttons>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content #popoverContent>
+
   <ion-list>
     <button ion-item (click)="presentListPopover($event)" class="e2eOpenListPopover">
       Present List Popover
@@ -55,9 +61,13 @@
 
     <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>
 
-<ion-toolbar position="bottom">
+
+<ion-footer>
+
+  <ion-toolbar>
     <ion-title>Popover</ion-title>
     <ion-buttons start>
       <button (click)="presentListPopover($event)">
@@ -67,4 +77,6 @@
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-footer>

src/components/radio/test/basic/main.html

@@ -1,7 +1,11 @@
 
-<ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
     <ion-title>Radio Group</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
 
 
 <ion-content>

src/components/range/test/basic/page1.html

@@ -1,18 +1,18 @@
-<ion-navbar *navbar>
+<ion-header>
 
+  <ion-navbar>
     <button menuToggle="left">
       <ion-icon name="menu"></ion-icon>
     </button>
-
     <ion-title>
       Range
     </ion-title>
-
     <button menuToggle="right" right>
       <ion-icon name="menu"></ion-icon>
     </button>
+  </ion-navbar>
 
-</ion-navbar>
+</ion-header>
 
 
 <ion-content>

src/components/refresher/test/basic/main.html

@@ -1,4 +1,11 @@
-<ion-toolbar><ion-title>Pull To Refresh</ion-title></ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Pull To Refresh</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
 

src/components/scroll/test/basic/main.html

@@ -1,7 +1,13 @@
-<!-- <ion-view nav-title="Pull to refresh"> -->
-  <ion-toolbar><ion-title>Scroll</ion-title></ion-toolbar>
+<ion-header>
 
-  <ion-content>
+  <ion-toolbar>
+    <ion-title>Scroll</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content>
 
   <h2>Horizontal</h2>
   <ion-scroll scroll-x="true" style="height: 200px">
@@ -18,9 +24,9 @@
     <div style="height: 2500px; width: 2500px; background: url('eight_horns.png') repeat"></div>
   </ion-scroll>
 
-  </ion-content>
+</ion-content>
+
 
-<!-- </ion-view> -->
 <style>
   f { display: block; height: 400px; width: 100%; background-color: #387ef5; margin-bottom: 15px; }
   #counter {

src/components/searchbar/test/nav/detail.html

@@ -1,7 +1,15 @@
-<ion-navbar *navbar>
+
+<ion-header>
+
+  <ion-navbar>
     <ion-title>Detail</ion-title>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <h1>City: {{city}}</h1>
+
 </ion-content>

src/components/searchbar/test/nav/main.html

@@ -1,7 +1,14 @@
-<ion-navbar *navbar>
+<ion-header>
+
+  <ion-navbar>
     <ion-title>First Page</ion-title>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <button block (click)="goToSecond()">Go to Searchbar Page</button>
+
 </ion-content>

src/components/searchbar/test/nav/search.html

@@ -1,17 +1,25 @@
-<ion-navbar *navbar>
-  <ion-title>Searchbar</ion-title>
-</ion-navbar>
+<ion-header>
 
-<ion-toolbar>
+  <ion-navbar>
+    <ion-title>Searchbar</ion-title>
+  </ion-navbar>
+
+  <ion-toolbar>
     <ion-searchbar primary (ionInput)="getItems($event)" placeholder="Filter Schedules">
     </ion-searchbar>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content>
+
   <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
+
   <ion-list>
     <button ion-item *ngFor="let item of items" (click)="showDetail(item)" class="e2eSearchbarNavItem">
       {{ item }}
     </button>
   </ion-list>
+
 </ion-content>

src/components/searchbar/test/toolbar/main.html

@@ -1,8 +1,14 @@
-<ion-navbar *navbar>
+<ion-header>
+
+  <ion-navbar>
     <ion-title>Test</ion-title>
-</ion-navbar>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content>
+
   <h5 padding-left padding-top> Search - Default Toolbar </h5>
   <ion-toolbar>
     <ion-searchbar [(ngModel)]="defaultToolbarSearch"></ion-searchbar>

src/components/segment/test/basic/main.html

@@ -1,4 +1,6 @@
-<ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
     <ion-segment id="segment" [(ngModel)]="relationship" (ionChange)="onSegmentChanged($event)">
       <ion-segment-button value="friends" (ionSelect)="onSegmentSelected($event)" class="e2eSegmentFriends">
         Friends
@@ -7,9 +9,9 @@
         Enemies
       </ion-segment-button>
     </ion-segment>
-</ion-toolbar>
+  </ion-toolbar>
 
-<ion-toolbar>
+  <ion-toolbar>
     <ion-buttons end>
       <button>
         <ion-icon name="search"></ion-icon>
@@ -23,9 +25,13 @@
         <ion-icon name="bookmark"></ion-icon>
       </ion-segment-button>
     </ion-segment>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding>
+
   <div>Are we friends or enemies? <b>{{ relationship }}</b></div>
 
   <h4>Map mode: NgControl</h4>
@@ -91,9 +97,13 @@
   </ion-segment>
 
   <button block dark (click)="toggleDisabled()">Toggle Disabled</button>
+
 </ion-content>
 
-<ion-toolbar position="bottom" primary>
+
+<ion-footer>
+
+  <ion-toolbar primary>
     <ion-segment [(ngModel)]="appType" light>
       <ion-segment-button value="paid">
         Primary
@@ -105,9 +115,9 @@
         Light Segment
       </ion-segment-button>
     </ion-segment>
-</ion-toolbar>
+  </ion-toolbar>
 
-<ion-toolbar position="bottom">
+  <ion-toolbar>
     <ion-segment [(ngModel)]="appType" danger>
       <ion-segment-button value="paid">
         Default
@@ -119,9 +129,9 @@
         Danger Segment
       </ion-segment-button>
     </ion-segment>
-</ion-toolbar>
+  </ion-toolbar>
 
-<ion-toolbar position="bottom">
+  <ion-toolbar>
     <ion-segment [(ngModel)]="appType" dark [disabled]="isDisabled">
       <ion-segment-button value="paid">
         Default
@@ -133,4 +143,7 @@
         Dark Segment
       </ion-segment-button>
     </ion-segment>
-</ion-toolbar>
+
+  </ion-toolbar>
+
+</ion-footer>

src/components/segment/test/nav/index.ts

@@ -20,7 +20,8 @@ class SegmentPage {
 
 @Component({
   template: `
-    <ion-navbar *navbar hideBackButton>
+    <ion-header>
+      <ion-navbar hideBackButton>
         <button menuToggle>
           <ion-icon name="menu"></ion-icon>
         </button>
@@ -28,6 +29,7 @@ class SegmentPage {
           Second Page
         </ion-title>
       </ion-navbar>
+    </ion-header>
 
     <ion-content>
       <h1>Page 2</h1>

src/components/segment/test/nav/main.html

@@ -1,9 +1,12 @@
-<ion-navbar *navbar>
+<ion-header>
+
+  <ion-navbar>
     <ion-title>
       Segment under Navbar
     </ion-title>
-</ion-navbar>
-<ion-toolbar>
+  </ion-navbar>
+
+  <ion-toolbar>
     <ion-segment [(ngModel)]="signInType">
       <ion-segment-button value="new">
         New
@@ -15,7 +18,10 @@
         Test
       </ion-segment-button>
     </ion-segment>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding>
 

src/components/segment/test/swipe/main.html

@@ -1,9 +1,12 @@
-<ion-navbar *navbar>
+<ion-header>
+
+  <ion-navbar>
     <ion-title>
       Segment Swipeable under Navbar
     </ion-title>
-</ion-navbar>
-<ion-toolbar>
+  </ion-navbar>
+
+  <ion-toolbar>
     <ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
       <ion-segment-button value="first">
         First
@@ -15,7 +18,10 @@
         Third
       </ion-segment-button>
     </ion-segment>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content padding>
 
@@ -27,6 +33,7 @@
 
 </ion-content>
 
+
 <style>
   ion-scroll {
     width: 100%;

src/components/select/test/multiple-value/main.html

@@ -1,6 +1,11 @@
-<ion-toolbar>
+<ion-header>
+
+  <ion-toolbar>
     <ion-title>Select Item: Multiple Value</ion-title>
-</ion-toolbar>
+  </ion-toolbar>
+
+</ion-header>
+
 
 <ion-content class="outer-content">