demos(header): update header markup

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>

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>

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>
 

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>

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>

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>
 

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>

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>

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>

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>
 

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>

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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

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>

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..."

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;

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 {

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>

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">
 

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>

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>

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>

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>

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>

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>

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">
 

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">