Merge remote-tracking branch 'origin/master'

# Conflicts: # ionic/components/segment/segment.ts
2026-03-13 10:22:08 +08:00 · 2015-12-16 15:47:07 -05:00
parent 2b44dcaaf9 3b035a0d23
commit 67f0d3c7dd
93 changed files with 1019 additions and 103 deletions
--- a/demos/attr/index.ts
+++ b/demos/attr/index.ts
@@ -0,0 +1,17 @@
+import {App} from 'ionic/ionic';
+
+@App({
+  templateUrl: 'main.html'
+})
+
+class DemoApp {
+
+  constructor() {
+    this.isHidden = false;
+  }
+
+  toggle() {
+    this.isHidden = !this.isHidden;
+  }
+
+}
--- a/demos/attr/main.html
+++ b/demos/attr/main.html
@@ -0,0 +1,30 @@
+
+<ion-toolbar>
+  <ion-title>attr</ion-title>
+</ion-toolbar>
+
+<ion-content padding style="text-align:center">
+
+
+
+  <ion-row>
+    <ion-col>
+      <b>[attr.hidden]="isHidden ? '' : null"</b>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <b>isHidden:</b> {{isHidden}}
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <icon ionic [attr.hidden]="isHidden ? '' : null" style="font-size: 52px; text-align: center;"></icon>
+    </ion-col>
+  </ion-row>
+
+  <button (click)="toggle()">Toggle Icon</button>
+
+</ion-content>
--- a/demos/buttons/index.html
+++ b/demos/buttons/index.html
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-
-  <link href="../../css/ionic.css" rel="stylesheet">
-</head>
-<body>
-
-  <ion-app>
-    <ion-loading-icon></ion-loading-icon>
-  </ion-app>
-
-  <script src="../../js/ionic.bundle.js"></script>
-
-  <script>System.import("index");</script>
-
-</body>
-</html>
--- a/demos/checkbox/main.html
+++ b/demos/checkbox/main.html
@@ -54,4 +54,4 @@
    </ion-checkbox>

  </ion-list>
-<ion-content>
+</ion-content>
--- a/demos/component-docs/helpers.ts
+++ b/demos/component-docs/helpers.ts
@@ -101,7 +101,7 @@ export function getPageFor(hash) {
        'segment': inputs.SegmentPage,
        'select': inputs.SelectPage,
        'switch': inputs.SwitchPage,
-        'search': inputs.SearchPage,
+        'searchbar': inputs.SearchPage,

        'inputs': labels.BasicPage,
        'fixed-inline-labels': labels.FixedInlinePage,
--- a/demos/component-docs/inputs/search/template.html
+++ b/demos/component-docs/inputs/search/template.html
@@ -1,6 +1,6 @@
 <ion-navbar *navbar hide-back-button class="android-attr">
  <ion-title>
-    Search
+    Searchbar
  </ion-title>
 </ion-navbar>

--- a/demos/component-docs/menus/basic/menu-events.html
+++ b/demos/component-docs/menus/basic/menu-events.html
@@ -1,7 +1,7 @@

 <ion-navbar *navbar hide-back-button class="android-attr">

-  <button menu-toggle>
+  <button menuToggle>
    <icon menu></icon>
  </button>

--- a/demos/component-docs/menus/basic/menu-friends.html
+++ b/demos/component-docs/menus/basic/menu-friends.html
@@ -1,6 +1,6 @@
 <ion-navbar *navbar hide-back-button class="android-attr">

-  <button menu-toggle="leftMenu">
+  <button menuToggle="leftMenu">
    <icon menu></icon>
  </button>

--- a/demos/component-docs/menus/basic/menu-home.html
+++ b/demos/component-docs/menus/basic/menu-home.html
@@ -1,6 +1,6 @@
 <ion-navbar *navbar hide-back-button class="android-attr">

-  <button menu-toggle>
+  <button menuToggle>
    <icon menu></icon>
  </button>

@@ -12,5 +12,5 @@


 <ion-content padding>
-  <button block menu-toggle>Toggle Menu</button>
+  <button block menuToggle>Toggle Menu</button>
 </ion-content>
--- a/demos/component-docs/menus/basic/menu-places.html
+++ b/demos/component-docs/menus/basic/menu-places.html
@@ -1,6 +1,6 @@
 <ion-navbar *navbar hide-back-button class="android-attr">

-  <button menu-toggle="leftMenu">
+  <button menuToggle="leftMenu">
    <icon menu></icon>
  </button>

--- a/demos/config/app.html
+++ b/demos/config/app.html
@@ -0,0 +1,2 @@
+<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
+<ion-overlay></ion-overlay>
--- a/demos/config/config-demo.js
+++ b/demos/config/config-demo.js
@@ -0,0 +1,66 @@
+if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length > 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+
+if (window.localStorage.getItem('configDemo')) {
+  CONFIG_DEMO = JSON.parse(window.localStorage.getItem('configDemo'));
+} else {
+  CONFIG_DEMO = null;
+}
--- a/demos/config/index.html
+++ b/demos/config/index.html
@@ -4,8 +4,9 @@
  <meta charset="UTF-8" />
  <!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-
+  <script type="text/javascript" src="config-demo.js"></script>
  <link href="../../css/ionic.css" rel="stylesheet">
+
 </head>
 <body>

@@ -13,9 +14,20 @@
    <ion-loading-icon></ion-loading-icon>
  </ion-app>

-  <script src="../../js/ionic.bundle.js"></script>
+  <script src="bundle.js"></script>
+  <!-- <script src="../../js/ionic.bundle.js"></script>

-  <script>System.import("index");</script>
+  <script>
+    System.config({
+      "paths": {
+        "*": "*.js",
+        "ionic/*": "ionic/*",
+        "angular2/*": "angular2/*",
+        "rx": "rx"
+      }
+    })
+    System.import("index");
+  </script> -->

 </body>
 </html>
--- a/demos/config/index.ts
+++ b/demos/config/index.ts
@@ -0,0 +1,53 @@
+import {App, Page, IonicApp, Platform} from 'ionic/ionic';
+
+@App({
+  templateUrl: 'app.html',
+  config: CONFIG_DEMO || {}
+})
+class ApiDemoApp {
+
+  constructor() {
+    this.rootPage = TabPage;
+  }
+}
+
+@Page({
+  templateUrl: 'tabs.html'
+})
+export class TabPage {
+  constructor() {
+    this.tabOne = InitialPage;
+  }
+}
+
+
+@Page({
+  templateUrl: 'main.html'
+})
+export class InitialPage {
+  constructor(platform: Platform) {
+    this.platform = platform;
+    if (window.localStorage.getItem('configDemo') !== null) {
+      this.config = JSON.parse(window.localStorage.getItem('configDemo')); 
+    }
+    else if (platform.is('ios')) {
+      this.config = {
+        'backButtonIcon': 'ion-ios-arrow-back',
+        'iconMode': 'ios',
+        'tabbarPlacement': 'bottom'
+      };
+    } else {
+      this.config = {
+        'backButtonIcon': 'ion-md-arrow-back',
+        'iconMode': 'md',
+        'tabbarPlacement': 'top'
+      };
+    }
+  }
+
+  load() {
+    window.localStorage.setItem('configDemo', JSON.stringify(this.config));
+    window.location.reload();
+  } 
+}
+
--- a/demos/config/main.html
+++ b/demos/config/main.html
@@ -0,0 +1,64 @@
+<ion-navbar *navbar>
+  <ion-title>Config</ion-title>
+</ion-navbar>
+
+<ion-content padding>
+
+  <ion-row>
+  @App({
+  </ion-row>
+
+  <ion-row>
+
+    <ion-col>
+      config: {
+
+        <ion-row>
+          <ion-col>
+          backButtonIcon: 
+            <select [(ng-model)]="config.backButtonIcon">
+              <option value="ion-ios-arrow-back">ion-ios-arrow-back</option>
+              <option value="ion-md-arrow-back">ion-md-arrow-back</option>
+            </select>
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col>
+          iconMode: 
+            <select [(ng-model)]="config.iconMode">
+              <option value="ios">ios</option>
+              <option value="md">md</option>
+            </select>
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col>
+          tabbarPlacement: 
+            <select [(ng-model)]="config.tabbarPlacement">
+              <option value="bottom">bottom</option>
+              <option value="top">top</option>
+            </select>
+          </ion-col>
+        </ion-row>
+
+
+
+      }
+    </ion-col>
+
+  </ion-row>
+
+  <ion-row>
+  })
+  </ion-row>
+
+  <ion-row>
+    <button full (click)="load()">
+      <icon refresh></icon>
+      Reload Config
+    </button>
+  </ion-row>
+
+<ion-content>
--- a/demos/config/tabs.html
+++ b/demos/config/tabs.html
@@ -0,0 +1,5 @@
+<ion-tabs>
+  <ion-tab tab-title="Music" [root]="tabOne"></ion-tab>
+  <ion-tab tab-title="Movies" [root]="tabOne"></ion-tab>
+  <ion-tab tab-title="Games" [root]="tabOne"></ion-tab>
+</ion-tabs>
--- a/demos/hide-when/main.html
+++ b/demos/hide-when/main.html
@@ -3,7 +3,7 @@
 </ion-navbar>

 <ion-content padding>
-  <p hide-when="android">
-    <b>(hide-when="android")</b> This text is hidden on Android only. Click the Android tab to hide this text.
+  <p hideWhen="android">
+    <b>(hideWhen="android")</b> This text is hidden on Android only. Click the Android tab to hide this text.
  </p>
 <ion-content>
--- a/demos/icons/index.html
+++ b/demos/icons/index.html
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-
-  <link href="../../css/ionic.css" rel="stylesheet">
-</head>
-<body>
-
-  <ion-app>
-    <ion-loading-icon></ion-loading-icon>
-  </ion-app>
-
-  <script src="../../js/ionic.bundle.js"></script>
-
-  <script>System.import("index");</script>
-
-</body>
-</html>
--- a/demos/label/app.html
+++ b/demos/label/app.html
@@ -0,0 +1,2 @@
+<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
+<ion-overlay></ion-overlay>
--- a/demos/label/index.ts
+++ b/demos/label/index.ts
@@ -0,0 +1,20 @@
+import {App, Page, IonicApp} from 'ionic/ionic';
+
+@App({
+  templateUrl: 'app.html'
+})
+class ApiDemoApp {
+
+  constructor() {
+    this.rootPage = InitialPage;
+  }
+}
+
+@Page({
+  templateUrl: 'main.html'
+})
+export class InitialPage {
+  constructor() {
+  }
+}
+
--- a/demos/label/main.html
+++ b/demos/label/main.html
@@ -0,0 +1,32 @@
+<ion-navbar *navbar>
+  <ion-title>Label</ion-title>
+</ion-navbar>
+
+<ion-content>
+  <ion-row>
+    <ion-input>
+      <input type="text" placeholder="Placeholder Label">
+    </ion-input>
+  </ion-row>
+
+  <ion-row>
+    <ion-input fixed-label>
+      <ion-label>Fixed Label</ion-label>
+      <input type="text" value="">
+    </ion-input>
+  </ion-row>
+
+  <ion-row>
+    <ion-input floating-label>
+      <ion-label>Floating Label</ion-label>
+      <input type="text" value="">
+    </ion-input>
+  </ion-row>
+
+  <ion-row>
+    <ion-input stacked-label>
+      <ion-label>Stacked Label</ion-label>
+      <input type="text" value="">
+    </ion-input>
+  </ion-row>
+<ion-content>
--- a/demos/list/basic-list.html
+++ b/demos/list/basic-list.html
@@ -1,7 +1,7 @@

 <ion-navbar *navbar class="show-navbar">

-  <button menu-toggle="leftMenu">
+  <button menuToggle="leftMenu">
    <icon menu></icon>
  </button>

--- a/demos/list/inset-list.html
+++ b/demos/list/inset-list.html
@@ -1,7 +1,7 @@

 <ion-navbar *navbar class="show-navbar">

-  <button menu-toggle="leftMenu">
+  <button menuToggle="leftMenu">
    <icon menu></icon>
  </button>

--- a/demos/list/list-headers.html
+++ b/demos/list/list-headers.html
@@ -1,7 +1,7 @@

 <ion-navbar *navbar class="show-navbar">

-  <button menu-toggle="leftMenu">
+  <button menuToggle="leftMenu">
    <icon menu></icon>
  </button>

--- a/demos/list/no-lines-list.html
+++ b/demos/list/no-lines-list.html
@@ -1,7 +1,7 @@

 <ion-navbar *navbar class="show-navbar">

-  <button menu-toggle="leftMenu">
+  <button menuToggle="leftMenu">
    <icon menu></icon>
  </button>

--- a/demos/list/sliding-items.html
+++ b/demos/list/sliding-items.html
@@ -1,7 +1,7 @@

 <ion-navbar *navbar class="show-navbar">

-  <button menu-toggle="leftMenu">
+  <button menuToggle="leftMenu">
    <icon menu></icon>
  </button>

--- a/demos/material/index.ts
+++ b/demos/material/index.ts
@@ -5,7 +5,7 @@ import {App, ActionSheet, IonicApp, IonicView, Register} from 'ionic/ionic';
@IonicView({
  template: '<ion-navbar *navbar primary>' +
    '<ion-title>Heading</ion-title>' +
-    '<button menu-toggle="menu">' +
+    '<button menuToggle="menu">' +
      '<icon menu></icon>' +
    '</button>' +
    '<ion-buttons end>' +
--- a/demos/menu/index.ts
+++ b/demos/menu/index.ts
@@ -1,11 +1,11 @@
-import {App, IonicApp, IonicView} from 'ionic/ionic';
+import {App, IonicApp, Page} from 'ionic/ionic';


-@IonicView({templateUrl: 'page1.html'})
+@Page({templateUrl: 'page1.html'})
 class Page1 {}


-@IonicView({templateUrl: 'page2.html'})
+@Page({templateUrl: 'page2.html'})
 class Page2 {}


--- a/demos/menu/main.html
+++ b/demos/menu/main.html
@@ -12,7 +12,7 @@
        {{p.title}}
      </button>

-      <button ion-item menu-toggle>
+      <button ion-item menuToggle>
        Close Menu
      </button>

--- a/demos/menu/page1.html
+++ b/demos/menu/page1.html
@@ -1,7 +1,7 @@

 <ion-navbar *navbar>

-  <button menu-toggle>
+  <button menuToggle>
    <icon menu></icon>
  </button>

@@ -17,7 +17,7 @@
  <h3>Page 1</h3>

  <p>
-    <button menu-toggle>Toggle Menu</button>
+    <button menuToggle>Toggle Menu</button>
  </p>

    <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
--- a/demos/menu/page2.html
+++ b/demos/menu/page2.html
@@ -1,7 +1,7 @@

 <ion-navbar *navbar>

-  <button menu-toggle>
+  <button menuToggle>
    <icon menu></icon>
  </button>

@@ -16,7 +16,7 @@
  <h3>Page 2</h3>

  <p>
-    <button menu-toggle>Toggle Menu</button>
+    <button menuToggle>Toggle Menu</button>
  </p>

 </ion-content>
--- a/demos/native/pages/battery.ts
+++ b/demos/native/pages/battery.ts
@@ -4,7 +4,7 @@ import {IonicView, Battery} from 'ionic/ionic';
@IonicView({
  template: `
  <ion-navbar *navbar>
-    <button menu-toggle>
+    <button menuToggle>
      <icon menu></icon>
    </button>
    <ion-title>Battery</ion-title>
--- a/demos/native/pages/camera.ts
+++ b/demos/native/pages/camera.ts
@@ -5,7 +5,7 @@ import {Camera} from 'ionic/ionic';
@IonicView({
  template: `
  <ion-navbar *navbar>
-    <button menu-toggle>
+    <button menuToggle>
      <icon menu></icon>
    </button>
    <ion-title>Camera</ion-title>
--- a/demos/native/pages/contacts.ts
+++ b/demos/native/pages/contacts.ts
@@ -5,7 +5,7 @@ import {Contacts} from 'ionic/ionic';
@IonicView({
  template: `
  <ion-navbar *navbar>
-    <button menu-toggle>
+    <button menuToggle>
      <icon menu></icon>
    </button>
    <ion-title>Contacts</ion-title>
--- a/demos/native/pages/device-motion.ts
+++ b/demos/native/pages/device-motion.ts
@@ -4,7 +4,7 @@ import {IonicView, DeviceMotion} from 'ionic/ionic';
@IonicView({
  template: `
  <ion-navbar *navbar>
-    <button menu-toggle>
+    <button menuToggle>
      <icon menu></icon>
    </button>
    <ion-title>Device Motion</ion-title>
--- a/demos/native/pages/device-orientation.ts
+++ b/demos/native/pages/device-orientation.ts
@@ -4,7 +4,7 @@ import {IonicView, DeviceOrientation} from 'ionic/ionic';
@IonicView({
  template: `
  <ion-navbar *navbar>
-    <button menu-toggle>
+    <button menuToggle>
      <icon menu></icon>
    </button>
    <ion-title>Device Orientation</ion-title>
--- a/demos/native/pages/device.ts
+++ b/demos/native/pages/device.ts
@@ -4,7 +4,7 @@ import {IonicView, Device} from 'ionic/ionic';
@IonicView({
  template: `
  <ion-navbar *navbar>
-    <button menu-toggle>
+    <button menuToggle>
      <icon menu></icon>
    </button>
    <ion-title>Device</ion-title>
--- a/demos/native/pages/dialogs.ts
+++ b/demos/native/pages/dialogs.ts
@@ -4,7 +4,7 @@ import {IonicView, Dialogs} from 'ionic/ionic';
@IonicView({
  template: `
  <ion-navbar *navbar>
-    <button menu-toggle>
+    <button menuToggle>
      <icon menu></icon>
    </button>
    <ion-title>Dialogs</ion-title>
--- a/demos/native/pages/geolocation.ts
+++ b/demos/native/pages/geolocation.ts
@@ -5,7 +5,7 @@ import {Geolocation} from 'ionic/ionic';
@IonicView({
  template: `
  <ion-navbar *navbar>
-    <button menu-toggle>
+    <button menuToggle>
      <icon menu></icon>
    </button>
    <ion-title>Geolocation</ion-title>
--- a/demos/native/pages/statusbar.ts
+++ b/demos/native/pages/statusbar.ts
@@ -5,7 +5,7 @@ import {StatusBar} from 'ionic/ionic';
@IonicView({
  template: `
  <ion-navbar *navbar>
-    <button menu-toggle>
+    <button menuToggle>
      <icon menu></icon>
    </button>
    <ion-title>StatusBar</ion-title>
--- a/demos/native/pages/vibration.ts
+++ b/demos/native/pages/vibration.ts
@@ -5,7 +5,7 @@ import {Vibration} from 'ionic/ionic';
@IonicView({
  template: `
  <ion-navbar *navbar>
-    <button menu-toggle>
+    <button menuToggle>
      <icon menu></icon>
    </button>
    <ion-title>Vibration</ion-title>
--- a/demos/platform/app.html
+++ b/demos/platform/app.html
@@ -0,0 +1,2 @@
+<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
+<ion-overlay></ion-overlay>
--- a/demos/platform/index.ts
+++ b/demos/platform/index.ts
@@ -0,0 +1,23 @@
+import {App, Page, IonicApp, Platform} from 'ionic/ionic';
+
+@App({
+  templateUrl: 'app.html'
+})
+class ApiDemoApp {
+
+  constructor() {
+    this.rootPage = InitialPage;
+  }
+}
+
+@Page({
+  templateUrl: 'main.html'
+})
+export class InitialPage {
+  constructor(platform: Platform) {
+    this.isIos = platform.is('ios');
+    this.isAndroid = platform.is('android');
+    this.userAgent = platform.userAgent();
+  }
+}
+
--- a/demos/platform/main.html
+++ b/demos/platform/main.html
@@ -0,0 +1,16 @@
+<ion-navbar *navbar>
+  <ion-title>Platform</ion-title>
+</ion-navbar>
+
+<ion-content padding>
+
+  <ion-row>
+    <b>.is('android'):</b> {{isAndroid}}
+  </ion-row>
+  <ion-row>
+    <b>.is('ios'):</b> {{isIos}}
+  </ion-row>
+  <ion-row>
+    <b>.userAgent():</b> {{userAgent}}
+  </ion-row>
+<ion-content>
--- a/demos/radio/index.ts
+++ b/demos/radio/index.ts
@@ -0,0 +1,10 @@
+import {App} from 'ionic/ionic';
+
+@App({
+  templateUrl: 'main.html'
+})
+
+class DemoApp {
+  blur() {
+  }
+}
--- a/demos/radio/main.html
+++ b/demos/radio/main.html
@@ -0,0 +1,65 @@
+<ion-navbar *navbar>
+
+  <ion-title>
+    Radio
+  </ion-title>
+
+</ion-navbar>
+
+<ion-content>
+  <ion-list radio-group>
+
+    <ion-list-header>
+      Language
+    </ion-list-header>
+
+    <ion-radio checked="true">
+      Go
+    </ion-radio>
+
+    <ion-radio>
+      Rust
+    </ion-radio>
+
+    <ion-radio>
+      Python
+    </ion-radio>
+
+    <ion-radio>
+      Ruby
+    </ion-radio>
+
+    <ion-radio>
+      Clojure
+    </ion-radio>
+
+    <ion-radio>
+      Java
+    </ion-radio>
+
+    <ion-radio>
+      PHP
+    </ion-radio>
+
+    <ion-radio>
+      .NET
+    </ion-radio>
+
+    <ion-radio>
+      C++
+    </ion-radio>
+
+    <ion-radio>
+      Scala
+    </ion-radio>
+
+    <ion-radio>
+      Haskell
+    </ion-radio>
+
+    <ion-radio>
+      Erlang
+    </ion-radio>
+
+  </ion-list>
+</ion-content>
--- a/demos/refresher/app.html
+++ b/demos/refresher/app.html
@@ -0,0 +1,2 @@
+<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
+<ion-overlay></ion-overlay>
--- a/demos/refresher/index.ts
+++ b/demos/refresher/index.ts
@@ -0,0 +1,36 @@
+import {App, Page, IonicApp} from 'ionic/ionic';
+
+@App({
+  templateUrl: 'app.html'
+})
+class ApiDemoApp {
+
+  constructor() {
+    this.rootPage = InitialPage;
+  }
+}
+
+@Page({
+  templateUrl: 'main.html'
+})
+export class InitialPage {
+  constructor() {
+  }
+
+  doRefresh(refresher) {
+    console.log('DOREFRESH', refresher)
+
+    setTimeout(() => {
+      refresher.complete();
+    })
+  }
+
+  doStarting() {
+    console.log('DOSTARTING');
+  }
+
+  doPulling(amt) {
+    console.log('DOPULLING', amt);
+  }
+}
+
--- a/demos/refresher/main.html
+++ b/demos/refresher/main.html
@@ -0,0 +1,32 @@
+<ion-navbar *navbar>
+  <ion-title>Refresher</ion-title>
+</ion-navbar>
+
+<ion-content>
+  <ion-refresher (starting)="doStarting()" (refresh)="doRefresh($event, refresher)" (pulling)="doPulling($event, amt)">
+  </ion-refresher>
+
+  <ion-list>
+    <ion-item>Item 1</ion-item>
+    <ion-item>Item 2</ion-item>
+    <ion-item>Item 3</ion-item>
+    <ion-item>Item 4</ion-item>
+    <ion-item>Item 5</ion-item>
+    <ion-item>Item 6</ion-item>
+    <ion-item>Item 7</ion-item>
+    <ion-item>Item 8</ion-item>
+    <ion-item>Item 9</ion-item>
+    <ion-item>Item 10</ion-item>
+    <ion-item>Item 11</ion-item>
+    <ion-item>Item 12</ion-item>
+    <ion-item>Item 13</ion-item>
+    <ion-item>Item 14</ion-item>
+    <ion-item>Item 15</ion-item>
+    <ion-item>Item 16</ion-item>
+    <ion-item>Item 17</ion-item>
+    <ion-item>Item 18</ion-item>
+    <ion-item>Item 19</ion-item>
+    <ion-item>Item 20</ion-item>
+  </ion-list>
+
+<ion-content>
--- a/demos/scroll/index.ts
+++ b/demos/scroll/index.ts
@@ -0,0 +1,10 @@
+import {App} from 'ionic/ionic';
+
+@App({
+  templateUrl: 'main.html'
+})
+
+class DemoApp {
+  blur() {
+  }
+}
--- a/demos/scroll/main.html
+++ b/demos/scroll/main.html
@@ -0,0 +1,16 @@
+<ion-navbar *navbar>
+
+  <ion-title>
+    Scroll
+  </ion-title>
+
+</ion-navbar>
+
+<ion-content>
+
+  <ion-scroll scroll-x="true" scroll-y="true" style="width: 100%; height: 100%">
+      <div style="width: 3460px; height: 3008px; background: url('https://upload.wikimedia.org/wikipedia/commons/3/32/Paris_7th_arrondissement_map_with_listings.png') repeat"></div>
+  </ion-scroll>
+
+</ion-content>
+
--- a/demos/segment/img/thumbnail-duckling-1.jpg
+++ b/demos/segment/img/thumbnail-duckling-1.jpg
--- a/demos/segment/img/thumbnail-duckling-2.jpg
+++ b/demos/segment/img/thumbnail-duckling-2.jpg
--- a/demos/segment/img/thumbnail-duckling-3.jpg
+++ b/demos/segment/img/thumbnail-duckling-3.jpg
--- a/demos/segment/img/thumbnail-duckling-4.jpg
+++ b/demos/segment/img/thumbnail-duckling-4.jpg
--- a/demos/segment/img/thumbnail-kitten-1.jpg
+++ b/demos/segment/img/thumbnail-kitten-1.jpg
--- a/demos/segment/img/thumbnail-kitten-2.jpg
+++ b/demos/segment/img/thumbnail-kitten-2.jpg
--- a/demos/segment/img/thumbnail-kitten-3.jpg
+++ b/demos/segment/img/thumbnail-kitten-3.jpg
--- a/demos/segment/img/thumbnail-kitten-4.jpg
+++ b/demos/segment/img/thumbnail-kitten-4.jpg
--- a/demos/segment/img/thumbnail-puppy-1.jpg
+++ b/demos/segment/img/thumbnail-puppy-1.jpg
--- a/demos/segment/img/thumbnail-puppy-2.jpg
+++ b/demos/segment/img/thumbnail-puppy-2.jpg
--- a/demos/segment/img/thumbnail-puppy-3.jpg
+++ b/demos/segment/img/thumbnail-puppy-3.jpg
--- a/demos/segment/img/thumbnail-puppy-4.jpg
+++ b/demos/segment/img/thumbnail-puppy-4.jpg
--- a/demos/segment/index.ts
+++ b/demos/segment/index.ts
@@ -0,0 +1,13 @@
+import {App, Platform} from 'ionic/ionic';
+
+@App({
+  templateUrl: 'main.html'
+})
+
+class DemoApp {
+  constructor(platform: Platform) {
+    this.platform = platform;
+    this.pet = "puppies";
+    this.isAndroid = platform.is('android');
+  }
+}
--- a/demos/segment/main.html
+++ b/demos/segment/main.html
@@ -0,0 +1,115 @@
+<ion-navbar *navbar hide-back-button class="android-attr">
+
+  <ion-title>
+    Segment
+  </ion-title>
+
+</ion-navbar>
+
+<ion-toolbar [attr.primary]="isAndroid ? '' : null">
+  <ion-segment [(ng-model)]="pet">
+    <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-content>
+
+<!--   <div padding>
+
+  </div>  -->
+
+  <div [ng-switch]="pet">
+    <ion-list *ng-switch-when="'puppies'">
+      <ion-item>
+        <ion-thumbnail item-left>
+          <img src="img/thumbnail-puppy-1.jpg">
+        </ion-thumbnail>
+        <h2>Ruby</h2>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail item-left>
+          <img src="img/thumbnail-puppy-2.jpg">
+        </ion-thumbnail>
+        <h2>Oscar</h2>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail item-left>
+          <img src="img/thumbnail-puppy-4.jpg">
+        </ion-thumbnail>
+        <h2>Zoey</h2>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail item-left>
+          <img src="img/thumbnail-puppy-3.jpg">
+        </ion-thumbnail>
+        <h2>Otto</h2>
+      </ion-item>
+    </ion-list>
+
+    <ion-list *ng-switch-when="'kittens'">
+      <ion-item>
+        <ion-thumbnail item-left>
+          <img src="img/thumbnail-kitten-1.jpg">
+        </ion-thumbnail>
+        <h2>Luna</h2>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail item-left>
+          <img src="img/thumbnail-kitten-3.jpg">
+        </ion-thumbnail>
+        <h2>Milo</h2>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail item-left>
+          <img src="img/thumbnail-kitten-4.jpg">
+        </ion-thumbnail>
+        <h2>Bandit</h2>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail item-left>
+          <img src="img/thumbnail-kitten-2.jpg">
+        </ion-thumbnail>
+        <h2>Nala</h2>
+      </ion-item>
+    </ion-list>
+
+    <ion-list *ng-switch-when="'ducklings'">
+      <ion-item>
+        <ion-thumbnail item-left>
+          <img src="img/thumbnail-duckling-1.jpg">
+        </ion-thumbnail>
+        <h2>Daffy</h2>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail item-left>
+          <img src="img/thumbnail-duckling-2.jpg">
+        </ion-thumbnail>
+        <h2>Huey</h2>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail item-left>
+          <img src="img/thumbnail-duckling-3.jpg">
+        </ion-thumbnail>
+        <h2>Dewey</h2>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail item-left>
+          <img src="img/thumbnail-duckling-4.jpg">
+        </ion-thumbnail>
+        <h2>Louie</h2>
+      </ion-item>
+    </ion-list>
+  </div>
+
+  
+</ion-content> 
+
--- a/demos/show-when/main.html
+++ b/demos/show-when/main.html
@@ -3,7 +3,7 @@
 </ion-navbar>

 <ion-content padding>
-  <p show-when="ios">
-    <b>(show-when="ios")</b> This text is shown on iOS only. Click the Android tab to hide this text.
+  <p showWhen="ios">
+    <b>(showWhen="ios")</b> This text is shown on iOS only. Click the Android tab to hide this text.
  </p>
 <ion-content>
--- a/demos/toolbar/app.html
+++ b/demos/toolbar/app.html
@@ -0,0 +1,2 @@
+<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
+<ion-overlay></ion-overlay>
--- a/demos/toolbar/index.ts
+++ b/demos/toolbar/index.ts
@@ -0,0 +1,20 @@
+import {App, Page, IonicApp} from 'ionic/ionic';
+
+@App({
+  templateUrl: 'app.html'
+})
+class ApiDemoApp {
+
+  constructor() {
+    this.rootPage = InitialPage;
+  }
+}
+
+@Page({
+  templateUrl: 'main.html'
+})
+export class InitialPage {
+  constructor() {
+  }
+}
+
--- a/demos/toolbar/main.html
+++ b/demos/toolbar/main.html
@@ -0,0 +1,148 @@
+<ion-navbar *navbar>
+  <ion-title>Toolbar</ion-title>
+</ion-navbar>
+
+<ion-content>
+  
+  <ion-toolbar>
+    <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
+  </ion-toolbar>
+
+
+  <ion-toolbar>
+    <ion-buttons start>
+      <button>
+        <icon ios=contact></icon>
+      </button>
+      <button>
+        <icon search></icon>
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <button secondary>
+        <icon more></icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Defaults</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons start>
+      <button solid>
+        <icon contact></icon>
+      </button>
+      <button solid>
+        <icon contact></icon>
+        Solid
+      </button>
+    </ion-buttons>
+    <ion-title>Solid</ion-title>
+    <ion-buttons end>
+      <button solid secondary>
+        Help
+        <icon help-circle></icon>
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+
+
+  <ion-toolbar>
+    <ion-buttons start>
+      <button outline>
+        <icon contact></icon>
+      </button>
+      <button outline>
+        <icon star></icon>
+        Star
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <button secondary outline>
+        <icon contact></icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Outline</ion-title>
+  </ion-toolbar>
+
+
+  <ion-toolbar>
+    <ion-buttons start>
+      <button>
+        <icon contact></icon>
+        Clear
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <button>
+        Edit
+        <icon create></icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Icon/Color Attr</ion-title>
+  </ion-toolbar>
+
+
+  <ion-toolbar>
+    <button menuToggle>
+      <icon menu></icon>
+    </button>
+    <ion-buttons start>
+      <button>
+        <icon star></icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Left side menu toggle</ion-title>
+  </ion-toolbar>
+
+
+  <ion-toolbar>
+  <ion-buttons end>
+    <button #button1 (click)="buttonClick(button1)">
+      <icon star></icon>
+    </button>
+  </ion-buttons>
+    <ion-title>Right side menu toggle</ion-title>
+    <button menuToggle right>
+      <icon menu></icon>
+    </button>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons end>
+      <button #button2 (click)="buttonClick(button2)">
+        <icon search></icon>
+      </button>
+    </ion-buttons>
+    <ion-segment secondary>
+      <ion-segment-button>
+        Something
+      </ion-segment-button>
+      <ion-segment-button>
+        Else
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-segment>
+      <ion-segment-button>
+        Light
+      </ion-segment-button>
+      <ion-segment-button>
+        Toolbar
+      </ion-segment-button>
+      <ion-segment-button>
+        Default Segment
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+
+
+  <style>
+    .toolbar {
+      border-bottom: 1px solid black;
+      background: #eee !important;
+    }
+  </style>
+
+<ion-content>
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -441,8 +441,11 @@ gulp.task('build.demos', function(){
  function createIndexHTML() {
    return through2.obj(function(file, enc, next) {
      var indexTemplate = baseIndexTemplate;
+      var customTemplateFp = file.path.split('/').slice(0, -1).join('/') + '/index.html';
      if (file.path.indexOf('component-docs') > -1) {
        indexTemplate = docsIndexTemplate;
+      } else if (fs.existsSync(customTemplateFp)) {
+        indexTemplate = _.template(fs.readFileSync(customTemplateFp))();
      }
      this.push(new VinylFile({
        base: file.base,
--- a/ionic/components/app/id.ts
+++ b/ionic/components/app/id.ts
@@ -72,6 +72,7 @@ export class IdRef {
 * // toggle the no-lines attributes based on whether isAndroid is true or false
 * <ion-list [attr.no-lines]="isAndroid ? '' : null">
 * ```
+ * @demo /docs/v2/demos/attr/
 */
@Directive({
  selector: '[attr]',
--- a/ionic/components/item/item-sliding.ts
+++ b/ionic/components/item/item-sliding.ts
@@ -23,6 +23,8 @@ import {List} from '../list/list';
 *   </ion-item>
 * </ion-list>
 * ```
+ * @see {@link /docs/v2/components#lists List Component Docs}
+ * @see {@link ../../list/List List API Docs}
 */
@Component({
  selector: 'ion-item-sliding',
@@ -37,6 +39,9 @@ export class ItemSliding {
    elementRef.nativeElement.$ionSlide = ++slideIds;
  }

+/**
+ * @private
+ */
  close() {
    this.list.closeSlidingItems();
  }
--- a/ionic/components/list/list.ts
+++ b/ionic/components/list/list.ts
@@ -76,6 +76,22 @@ export class List extends Ion {
    this.itemTemplate = item;
  }

+  /**
+   * Enable sliding items if your page has them
+   *
+   * ```ts
+   * export class MyClass {
+   *    constructor(app: IonicApp){
+   *      this.app = app;
+   *      this.list = this.app.getComponent('my-list');
+   *    }
+   *    stopSliding(){
+   *      this.list.enableSlidingItems(false);
+   *    }
+   * }
+   * ```
+   * @param {Boolean} shouldEnable whether the item-sliding should be enabled or not
+   */
  enableSlidingItems(shouldEnable) {
    if (this._enableSliding !== shouldEnable) {
      this._enableSliding = shouldEnable;
@@ -94,6 +110,23 @@ export class List extends Ion {
    }
  }

+  /**
+   * Enable sliding items if your page has
+   *
+   * ```ts
+   * export class MyClass {
+   *    constructor(app: IonicApp){
+   *      this.app = app;
+   *      this.list = this.app.getComponent('my-list');
+   *    }
+   *    // Here we have some method that will close the items
+   *    // when called
+   *    closeItmes(){
+   *      this.list.closeSlidingItems();
+   *    }
+   * }
+   * ```
+   */
  closeSlidingItems() {
    this.slidingGesture && this.slidingGesture.closeOpened();
  }
--- a/ionic/components/menu/menu-close.ts
+++ b/ionic/components/menu/menu-close.ts
@@ -6,6 +6,7 @@ import {Menu} from './menu';

 /**
 * TODO
+* @demo /docs/v2/demos/menu/
 * @see {@link /docs/v2/components#menus Menu Component Docs}
 * @see {@link ../../menu/Menu Menu API Docs}
 */
--- a/ionic/components/menu/menu-toggle.ts
+++ b/ionic/components/menu/menu-toggle.ts
@@ -8,6 +8,7 @@ import {Menu} from './menu';

 /**
 * TODO
+* @demo /docs/v2/demos/menu/
 * @see {@link /docs/v2/components#menus Menu Component Docs}
 * @see {@link ../../menu/Menu Menu API Docs}
 */
--- a/ionic/components/menu/menu.ts
+++ b/ionic/components/menu/menu.ts
@@ -50,6 +50,9 @@ import * as gestures from  './menu-gestures';
 * ```html
 * <ion-menu [content]="contentRef" type="overlay"></ion-menu>
 * ```
+ *
+ * @demo /docs/v2/demos/menu/
+ *
 * @see {@link /docs/v2/components#menus Menu Component Docs}
 * @see {@link /docs/v2/components#navigation Navigation Component Docs}
 * @see {@link ../../nav/Nav Nav API Docs}
--- a/ionic/components/nav/nav-controller.ts
+++ b/ionic/components/nav/nav-controller.ts
@@ -851,6 +851,7 @@ export class NavController extends Ion {
      if (this.keyboard.isOpen()) {
        // the keyboard is still open!
        // no problem, let's just close for them
+        this.keyboard.close();
        this.keyboard.onClose(() => {
          // keyboard has finished closing, transition complete
          this._transComplete();
--- a/ionic/components/nav/test/basic/index.ts
+++ b/ionic/components/nav/test/basic/index.ts
@@ -32,6 +32,12 @@ class MyCmpTest{}
        <button ion-item class="e2eFrom1To2" (click)="pushFullPage()">Push to FullPage</button>
        <button ion-item (click)="pushPrimaryHeaderPage()">Push to PrimaryHeaderPage</button>
        <button ion-item (click)="pushAnother()">Push to AnotherPage</button>
+
+        <ion-input>
+          <ion-label>Text Input</ion-label>
+          <textarea></textarea>
+        </ion-input>
+        
        <button ion-item [navPush]="[pushPage, {id: 42}]">Push FullPage w/ [navPush] array</button>
        <button ion-item [navPush]="pushPage" [navParams]="{id:40}">Push w/ [navPush] and [navParams]</button>
        <button ion-item [navPush]="[\'FirstPage\', {id: 22}]">Push w/ [navPush] array and string view name</button>
@@ -198,15 +204,23 @@ class PrimaryHeaderPage {
    <ion-navbar *navbar hideBackButton>
      <ion-title>Another Page Header</ion-title>
    </ion-navbar>
-    <ion-content padding>
-      <p>Back button hidden w/ <code>ion-navbar hideBackButton</code></p>
-      <p><button (click)="nav.pop()">Pop</button></p>
-      <p><button (click)="pushFullPage()">Push to FullPage</button></p>
-      <p><button (click)="pushPrimaryHeaderPage()">Push to PrimaryHeaderPage</button></p>
-      <p><button (click)="pushFirstPage()">Push to FirstPage</button></p>
-      <p><button (click)="setRoot()">setRoot(FirstPage)</button></p>
-      <p><button (click)="toggleBackButton()">Toggle hideBackButton</button></p>
-      <p><button (click)="setBackButtonText()">Set Back Button Text</button></p>
+    <ion-content>
+      <ion-list>
+
+        <ion-input>
+          <ion-label>Text Input</ion-label>
+          <textarea></textarea>
+        </ion-input>
+
+        <ion-item>Back button hidden w/ <code>ion-navbar hideBackButton</code></ion-item>
+        <button ion-item (click)="nav.pop()">Pop</button>
+        <button ion-item (click)="pushFullPage()">Push to FullPage</button>
+        <button ion-item (click)="pushPrimaryHeaderPage()">Push to PrimaryHeaderPage</button>
+        <button ion-item (click)="pushFirstPage()">Push to FirstPage</button>
+        <button ion-item (click)="setRoot()">setRoot(FirstPage)</button>
+        <button ion-item (click)="toggleBackButton()">Toggle hideBackButton</button>
+        <button ion-item (click)="setBackButtonText()">Set Back Button Text</button>
+      </ion-list>
    </ion-content>
  `
 })
--- a/ionic/components/navbar/navbar.ts
+++ b/ionic/components/navbar/navbar.ts
@@ -60,7 +60,10 @@ class ToolbarBackground {
  }
 }

-
+/**
+ * @name Navbar
+ * @see {@link ../../toolbar/Toolbar/ Toolbar API Docs}
+ */
@Component({
  selector: 'ion-navbar',
  template:
--- a/ionic/components/radio/radio.ts
+++ b/ionic/components/radio/radio.ts
@@ -42,6 +42,7 @@ import {Form} from '../../util/form';
 *
 * </ion-list>
 * ```
+ * @demo /docs/v2/demos/radio/
 * @see {@link /docs/v2/components#radio Radio Component Docs}
 */
@Directive({
@@ -164,7 +165,7 @@ export class RadioGroup extends Ion {
 *   Radio Label
 * </ion-radio>
 * ```
- *
+ * @demo /docs/v2/demos/radio/
 * @see {@link /docs/v2/components#radio Radio Component Docs}
 */
@Component({
--- a/ionic/components/scroll/pull-to-refresh.ts
+++ b/ionic/components/scroll/pull-to-refresh.ts
@@ -47,6 +47,7 @@ import {raf, ready, CSS} from '../../util/dom';
 *    }
 *  }
 *  ```
+ *  @demo /docs/v2/demos/refresher/
 *
 *  @property {string} [pullingIcon] - the icon you want to display when you begin to pull down
 *  @property {string} [pullingText] - the text you want to display when you begin to pull down
--- a/ionic/components/scroll/scroll.ts
+++ b/ionic/components/scroll/scroll.ts
@@ -27,6 +27,7 @@ import * as util from '../../util';
 *@property {boolean} [scroll-y] - whether to enable scrolling along the Y axis
 *@property {boolean} [zoom] - whether to enable zooming
 *@property {number} [max-zoom] - set the max zoom amount for ion-scroll
+ * @demo /docs/v2/demos/scroll/
 */
@Component({
  selector: 'ion-scroll',
--- a/ionic/components/segment/segment.ts
+++ b/ionic/components/segment/segment.ts
@@ -45,6 +45,7 @@ import {Config} from '../../config/config';
 *
 * @property {Any} [change] - expression to evaluate when a segment button has been changed
 *
+ * @demo /docs/v2/demos/segment/
 * @see {@link /docs/v2/components#segment Segment Component Docs}
 * @see [Angular 2 Forms](http://learnangular2.com/forms/)
 */
@@ -168,6 +169,7 @@ export class Segment extends Ion {
 *
 * @property {Any} [click] - expression to evaluate when a segment button has been clicked
 *
+ * @demo /docs/v2/demos/segment/
 * @see {@link /docs/v2/components#segment Segment Component Docs}
 * @see {@link /docs/v2/api/components/segment/Segment/ Segment API Docs}
 */
--- a/ionic/components/show-hide-when/show-hide-when.ts
+++ b/ionic/components/show-hide-when/show-hide-when.ts
@@ -56,9 +56,9 @@ export class DisplayWhen {

 /**
 *
- * The `show-when` attribute takes a string that represents a plaform or screen orientation.
+ * The `showWhen` attribute takes a string that represents a plaform or screen orientation.
 * The element the attribute is added to will only be shown when that platform or screen orientation is active.
- * Complements the [hide-when attribute](../HideWhen).
+ * Complements the [hideWhen attribute](../HideWhen).
 * @usage
 * ```html
 * <div showWhen="ios">I am only visible on iOS!</div>
@@ -93,9 +93,9 @@ export class ShowWhen extends DisplayWhen {

 /**
 *
- * The `hide-when` attribute takes a string that represents a plaform or screen orientation.
+ * The `hideWhen` attribute takes a string that represents a plaform or screen orientation.
 * The element the attribute is added to will only be hidden when that platform or screen orientation is active.
- * Complements the [show-when attribute](../ShowWhen).
+ * Complements the [showWhen attribute](../ShowWhen).
 * @usage
 * ```html
 * <div hideWhen="android">I am hidden on Android!</div>
--- a/ionic/components/text-input/label.ts
+++ b/ionic/components/text-input/label.ts
@@ -18,6 +18,7 @@ import {Form} from '../../util/form';
 * </ion-input>
 * ```
 *
+ * @demo /docs/v2/demos/label/
 * @see {@link ../../../../components#inputs Input Component Docs}
 * @see {@link ../Input Input API Docs}
 *
@@ -49,6 +50,9 @@ export class Label {
    this.container = container;
  }

+/**
+ * @private
+ */
  ngOnInit() {
    if (!this.id) {
      this.id = 'lbl-' + this.form.nextId();
--- a/ionic/components/toolbar/toolbar.ts
+++ b/ionic/components/toolbar/toolbar.ts
@@ -76,6 +76,8 @@ export class ToolbarBase extends Ion  {
 *
 *  <ion-content></ion-content>
 *  ```
+ * @demo /docs/v2/demos/toolbar/
+ * @see {@link ../../navbar/Navbar/ Navbar API Docs}
 */
@Component({
  selector: 'ion-toolbar',
@@ -120,6 +122,7 @@ export class Toolbar extends ToolbarBase {
 *   <ion-title>SubHeader</ion-title>
 * </ion-toolbar>
 *  ```
+ * @demo /docs/v2/demos/toolbar/
 */
@Component({
  selector: 'ion-title',
--- a/ionic/config/bootstrap.ts
+++ b/ionic/config/bootstrap.ts
@@ -20,7 +20,6 @@ import {TapClick} from '../components/tap-click/tap-click';
 import {ClickBlock} from '../util/click-block';
 import {ready, closest} from '../util/dom';

-
 /**
 * @private
 */
--- a/ionic/config/config.ts
+++ b/ionic/config/config.ts
@@ -10,6 +10,9 @@ import {Platform} from '../platform/platform';
 import {isObject, isDefined, isFunction, isArray, extend} from '../util/util';

 /**
+ * @name Config
+ * @demo /docs/v2/demos/config/
+ * @description
 * Config lets you change multiple or a single value in an apps mode configuration. Things such as tab placement, icon changes, and view animations can be set here.
 *
 * ```ts
--- a/ionic/config/directives.ts
+++ b/ionic/config/directives.ts
@@ -34,6 +34,7 @@ import {ShowWhen, HideWhen} from '../components/show-hide-when/show-hide-when';

 /**
 * @name IONIC_DIRECTIVES
+ * @private
 * @description
 * The core Ionic directives as well as Angular's CORE_DIRECTIVES and
 * FORM_DIRECTIVES.  Automatically available in every [@Page](../Page/) template.
@@ -100,7 +101,6 @@ import {ShowWhen, HideWhen} from '../components/show-hide-when/show-hide-when';
 *
 * -  ShowWhen
 * -  HideWhen
-
 */
 export const IONIC_DIRECTIVES = [
  // Angular
--- a/ionic/platform/platform.ts
+++ b/ionic/platform/platform.ts
@@ -2,8 +2,6 @@
 +* @ngdoc service
 +* @name platform
 +* @module ionic
-+* @description
-+* Platform returns the availble information about your current platform
 +*/


@@ -12,7 +10,10 @@ import {ready, windowDimensions, flushDimensionCache} from '../util/dom';


 /**
- * TODO
+ * @name Platform
+ * @description
+ * Platform returns the availble information about your current platform.
+ * @demo /docs/v2/demos/platform/
 */
 export class Platform {

--- a/ionic/util/form.ts
+++ b/ionic/util/form.ts
@@ -51,6 +51,7 @@ export class Form {

  focusOut() {
    console.debug('focusOut');
+    document.activeElement && document.activeElement.blur();
    this._blur.focus();
  }

--- a/ionic/util/keyboard.ts
+++ b/ionic/util/keyboard.ts
@@ -4,6 +4,21 @@ import {Config} from '../config/config';
 import {Form} from './form';
 import {hasFocusedTextInput, raf, rafFrames} from './dom';

+/**
+ * @name Keyboard
+ * @description
+ * The `Keyboard` class allows you to work with the keyboard events provide by the Ionic keyboard plugin.
+ *
+ * @usage
+ * ```ts
+ * export class MyClass{
+ *  constructor(keyboard: Keyboard){
+ *    this.keyboard = keyboard;
+ *  }
+ * }
+ *
+ * ```
+ */

@Injectable()
 export class Keyboard {
@@ -17,12 +32,51 @@ export class Keyboard {
    });
  }

+
+/**
+ * Chech to see if the keyboard is open or not.
+ *
+ * ```ts
+ * export class MyClass{
+ *  constructor(keyboard: Keyboard){
+ *    this.keyboard = keyboard;
+ *  }
+ *  keyboardCheck(){
+ *    setTimeout(()  => console.log('is the keyboard open ', this.keyboard.isOpen()));
+ *  }
+ * }
+ *
+ * ```
+ *
+ * @return {Bool} returns a true or flase value if the keyboard is open or not
+ */
  isOpen() {
    return hasFocusedTextInput();
  }

+/**
+ * When the keyboard is closed, call any methods you want
+ *
+ * ```ts
+ * export class MyClass{
+ *  constructor(keyboard: Keyboard){
+ *    this.keyboard = keyboard;
+ *    this.keyboard.onClose(this.closeCallback);
+ *  }
+ *  closeCallback(){
+ *     // call what ever functionality you want on keyboard close
+ *     console.log('Closing time");
+ *  }
+ * }
+ *
+ * ```
+ * @param {Function} callback method you want to call when the keyboard has been closed
+ * @return {Function} returns a callback that gets fired when the keyboard is closed
+ */
  onClose(callback, pollingInternval=KEYBOARD_CLOSE_POLLING) {
+    console.debug('keyboard onClose');
    const self = this;
+    let checks = 0;

    let promise = null;

@@ -34,7 +88,8 @@ export class Keyboard {
    self.zone.runOutsideAngular(() => {

      function checkKeyboard() {
-        if (!self.isOpen()) {
+        console.debug('keyboard isOpen', self.isOpen(), checks);
+        if (!self.isOpen() || checks > 100) {
          rafFrames(30, () => {
            self.zone.run(() => {
              console.debug('keyboard closed');
@@ -45,6 +100,7 @@ export class Keyboard {
        } else {
          setTimeout(checkKeyboard, pollingInternval);
        }
+        checks++;
      }

      setTimeout(checkKeyboard, pollingInternval);
@@ -53,7 +109,12 @@ export class Keyboard {
    return promise;
  }

+/**
+ * Progamatically close they keyboard
+ *
+ */
  close() {
+    console.debug('keyboard close()');
    raf(() => {
      if (hasFocusedTextInput()) {
        // only focus out when a text input has focus
@@ -62,6 +123,9 @@ export class Keyboard {
    });
  }

+/**
+ * @private
+ */
  focusOutline(setting, document) {
    /* Focus Outline
     * --------------------------------------------------
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
    "tooling"
  ],
  "dependencies": {
-    "angular2": "2.0.0-alpha.54",
+    "angular2": "2.0.0-beta.0",
    "colors": "^1.1.2",
    "es6-promise": "^3.0.2",
    "es6-shim": "0.33.6",