refactor(demos): give each component section its own view

demos/component-docs/actionSheet/actionSheet.html

@@ -0,0 +1,9 @@
+<ion-navbar *navbar class="show-navbar">
+  <ion-title>Action Sheet</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo padding">
+    <button block (click)="openMenu()">
+      Show Actionsheet
+    </button>
+</ion-content>

demos/component-docs/actionSheet/actionSheet.ts

@@ -0,0 +1,64 @@
+import {IonicPlatform, IonicView, ActionSheet} from 'ionic/ionic';
+
+@IonicView({
+  templateUrl: 'actionSheet/actionSheet.html',
+})
+export class ActionSheetPage {
+
+  constructor(actionSheet: ActionSheet, platform: IonicPlatform) {
+    this.actionSheet = actionSheet;
+    this.platform = platform;
+  }
+
+  openMenu() {
+    if (this.platform.is('android')) {
+      var androidSheet = {
+
+        buttons: [
+          { text: 'Share', icon: 'share' },
+          { text: 'Play', icon: 'arrow-dropright-circle'},
+          { text: 'Favorite', icon: 'ion-md-heart-outline'}
+        ],
+        destructiveText: 'Delete',
+        titleText: 'Purchased',
+        cancelText: 'Cancel',
+        cancel: function() {
+          console.log('Canceled');
+        },
+        destructiveButtonClicked: () => {
+          console.log('Destructive clicked');
+        },
+        buttonClicked: function(index) {
+          console.log('Button clicked', index);
+          if (index == 1) { return false; }
+          return true;
+        }
+      };
+    }
+
+    this.actionSheet.open(androidSheet || {
+      buttons: [
+        { text: 'Share This' },
+        { text: 'Move' }
+      ],
+      destructiveText: 'Delete',
+      titleText: 'You Opened Action Sheet',
+      cancelText: 'Cancel',
+      cancel: function() {
+        console.log('Canceled');
+      },
+      destructiveButtonClicked: () => {
+        console.log('Destructive clicked');
+      },
+      buttonClicked: function(index) {
+        console.log('Button clicked', index);
+        if (index == 1) { return false; }
+        return true;
+      }
+
+    }).then(actionSheetRef => {
+      this.actionSheetRef = actionSheetRef;
+    });
+  }
+
+}

demos/component-docs/buttons/block.html

@@ -0,0 +1,26 @@
+<ion-navbar *navbar>
+  <ion-title>Block Buttons</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo padding">
+  <p>
+    <button block>Default</button>
+  </p>
+
+  <p>
+    <button secondary block>Secondary</button>
+  </p>
+
+  <p>
+    <button danger block>Danger</button>
+  </p>
+
+  <p>
+    <button light block>Light</button>
+  </p>
+
+  <p>
+    <button dark block>Dark</button>
+  </p>
+</ion-content>
+

demos/component-docs/buttons/buttons.html

@@ -0,0 +1,27 @@
+<ion-navbar *navbar>
+  <ion-title>Buttons</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo padding">
+  <p>
+    <button>Default</button>
+  </p>
+
+  <p>
+    <button secondary>Secondary</button>
+  </p>
+
+  <p>
+    <button danger>Danger</button>
+  </p>
+
+  <p>
+    <button light>Light</button>
+  </p>
+
+  <p>
+    <button dark>Dark</button>
+  </p>
+</ion-content>
+
+

demos/component-docs/buttons/buttons.ts

@@ -0,0 +1,73 @@
+import {IonicPlatform, IonicView} from 'ionic/ionic';
+
+@IonicView({
+  templateUrl: 'buttons/buttons.html',
+})
+export class ButtonsPage {
+    constructor() {
+
+    }
+}
+
+@IonicView({
+  templateUrl: 'buttons/block.html',
+})
+export class BlockButtonsPage {
+    constructor() {
+
+    }
+}
+
+@IonicView({
+  templateUrl: 'buttons/full.html',
+})
+export class FullButtonsPage {
+    constructor() {
+
+    }
+}
+
+@IonicView({
+  templateUrl: 'buttons/outline.html',
+})
+export class OutlineButtonsPage {
+    constructor() {
+
+    }
+}
+
+@IonicView({
+  templateUrl: 'buttons/round.html',
+})
+export class RoundButtonsPage {
+    constructor() {
+
+    }
+}
+
+@IonicView({
+  templateUrl: 'buttons/fab.html',
+})
+export class FabPage {
+    constructor() {
+
+    }
+}
+
+@IonicView({
+  templateUrl: 'buttons/sizes.html',
+})
+export class ButtonSizesPage {
+    constructor() {
+
+    }
+}
+
+@IonicView({
+  templateUrl: 'buttons/icons.html',
+})
+export class IconButtonsPage {
+    constructor() {
+
+    }
+}

demos/component-docs/buttons/fab.html

@@ -0,0 +1,15 @@
+<ion-navbar *navbar>
+  <ion-title>Floating Action Buttons</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo">
+  <p>
+    <button fab fab-top fab-right>
+      <icon add></icon>
+    </button>
+  </p>
+</ion-content>
+
+
+
+

demos/component-docs/buttons/full.html

@@ -0,0 +1,29 @@
+<ion-navbar *navbar>
+  <ion-title>Full Buttons</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo">
+  <p>
+    <button full>Default</button>
+  </p>
+
+  <p>
+    <button secondary full>Secondary</button>
+  </p>
+
+  <p>
+    <button danger full>Danger</button>
+  </p>
+
+  <p>
+    <button light full>Light</button>
+  </p>
+
+  <p>
+    <button dark full>Dark</button>
+  </p>
+</ion-content>
+
+
+
+

demos/component-docs/buttons/icons.html

@@ -0,0 +1,44 @@
+
+<ion-navbar *navbar>
+  <ion-title>Icon Buttons</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo padding">
+  <p>
+    <button>
+      <icon home></icon>
+      Home
+    </button>
+  </p>
+
+  <p>
+    <button secondary>
+      <icon people></icon>
+      Friends
+    </button>
+  </p>
+
+  <p>
+    <button danger>
+      <icon close></icon>
+    </button>
+  </p>
+
+  <p>
+    <button light>
+      <icon arrow-back></icon>
+      Back
+    </button>
+  </p>
+
+  <p>
+    <button dark>
+      <icon hammer></icon>
+    </button>
+  </p>
+
+</ion-content>
+
+
+
+

demos/component-docs/buttons/outline.html

@@ -0,0 +1,29 @@
+<ion-navbar *navbar>
+  <ion-title>Outline Buttons</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo padding">
+  <p>
+    <button outline>Default</button>
+  </p>
+
+  <p>
+    <button secondary outline>Secondary</button>
+  </p>
+
+  <p>
+    <button danger outline>Danger</button>
+  </p>
+
+  <p>
+    <button light outline>Light</button>
+  </p>
+
+  <p>
+    <button dark outline>Dark</button>
+  </p>
+</ion-content>
+
+
+
+

demos/component-docs/buttons/round.html

@@ -0,0 +1,29 @@
+<ion-navbar *navbar>
+  <ion-title>Round Buttons</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo padding">
+  <p>
+    <button round>Default</button>
+  </p>
+
+  <p>
+    <button secondary round>Secondary</button>
+  </p>
+
+  <p>
+    <button danger round>Danger</button>
+  </p>
+
+  <p>
+    <button light round>Light</button>
+  </p>
+
+  <p>
+    <button dark round>Dark</button>
+  </p>
+</ion-content>
+
+
+
+

demos/component-docs/buttons/sizes.html

@@ -0,0 +1,29 @@
+<ion-navbar *navbar>
+  <ion-title>Button Sizes</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo padding">
+  <p>
+    <button small>Default</button>
+  </p>
+
+  <p>
+    <button secondary small>Secondary</button>
+  </p>
+
+  <p>
+    <button danger small>Danger</button>
+  </p>
+
+  <p>
+    <button light large>Light</button>
+  </p>
+
+  <p>
+    <button dark large>Dark</button>
+  </p>
+</ion-content>
+
+
+
+

demos/component-docs/cards/cards.html

@@ -0,0 +1,62 @@
+
+<ion-navbar *navbar class="show-navbar">
+  <ion-title>Cards</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo">
+<ion-card>
+
+  <ion-card-header primary>
+    Menu
+  </ion-card-header>
+
+  <ion-card-content>
+    <a ion-item href="#">
+      <icon home item-left></icon>
+      Home
+    </a>
+
+    <a ion-item href="#">
+      <icon people item-left></icon>
+      Friends
+    </a>
+
+    <button ion-item>
+      <icon musical-notes item-left></icon>
+      Music
+    </button>
+
+    <button ion-item>
+      <icon mail item-left></icon>
+      Mail
+    </button>
+  </ion-card-content>
+
+</ion-card>
+
+
+<ion-card>
+
+  <ion-item>
+    <icon football item-left></icon>
+    Schedule
+    <button outline item-right>Open</button>
+  </ion-item>
+
+</ion-card>
+
+<ion-card>
+
+  <ion-item>
+    <icon trophy item-left></icon>
+    Trophies
+    <button outline item-right>View</button>
+  </ion-item>
+
+</ion-card>
+
+</ion-content>
+
+
+
+

demos/component-docs/cards/cards.ts

@@ -0,0 +1,10 @@
+import {IonicPlatform, IonicView} from 'ionic/ionic';
+
+@IonicView({
+  templateUrl: 'cards/cards.html',
+})
+export class CardsPage {
+    constructor() {
+
+    }
+}

demos/component-docs/forms/forms.html

@@ -0,0 +1,23 @@
+<ion-navbar *navbar class="show-navbar">
+  <ion-title>Forms</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo">
+  <form (submit)="processForm($event)" [ng-form-model]="form">
+      <ion-list>
+      <ion-input>
+        <input ng-control="firstName" type="text" placeholder="First Name">
+      </ion-input>
+      <ion-input>
+        <input ng-control="lastName" type="text" placeholder="Last Name">
+      </ion-input>
+    </ion-list>
+    <div class="padding">
+      <button block type="submit">Create Account</button>
+    </div>
+  </form>
+</ion-content>
+
+
+
+

demos/component-docs/forms/forms.ts

@@ -0,0 +1,25 @@
+import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms';
+import {IonicView} from 'ionic/ionic';
+
+
+@IonicView({
+  templateUrl: 'forms/forms.html',
+  bindings: [FormBuilder]
+})
+export class FormsPage {
+
+  constructor() {
+    this.form = new ControlGroup({
+      firstName: new Control("", Validators.required),
+      lastName: new Control("", Validators.required)
+    });
+  }
+
+  processForm(event) {
+    // TODO: display input in a popup
+    console.log(event);
+  }
+
+    
+}
+

demos/component-docs/helpers.ts

@@ -1,3 +1,52 @@
+import {ActionSheetPage} from 'actionSheet/actionSheet';
+
+import {ButtonsPage,
+        BlockButtonsPage,
+        FullButtonsPage,
+        OutlineButtonsPage,
+        RoundButtonsPage,
+        FabPage,
+        ButtonSizesPage,
+        IconButtonsPage} from 'buttons/buttons';
+
+import {CardsPage} from 'cards/cards';
+import {FormsPage} from 'forms/forms';
+import {IconsPage} from 'icons/icons';
+import {ListsPage} from 'lists/lists';
+import {MenusPage} from 'menus/menus';
+import {ModalsPage} from 'modals/modals';
+import {NavigationPage} from 'navigation/navigation';
+import {PopupsPage} from 'popups/popups';
+import {SlidesPage} from 'slides/slides';
+import {TabsPage} from 'tabs/tabs';
+
+
 export function toTitleCase(str) {
   return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
 }
+
+export function getPageFor(hash) {
+    return {
+        'action-sheets': ActionSheetPage,
+        'buttons': ButtonsPage,
+        'block-buttons': BlockButtonsPage,
+        'full-buttons': FullButtonsPage,
+        'outline-buttons': OutlineButtonsPage,
+        'round-buttons': RoundButtonsPage,
+        'floating-action-buttons': FabPage,
+        'button-sizes': ButtonSizesPage,
+        'icon-buttons': IconButtonsPage,
+        'cards': CardsPage,
+        'forms': FormsPage,
+        'icons': IconsPage,
+        'lists': ListsPage,
+        'menus': MenusPage,
+        'modals': ModalsPage,
+        'navigation': NavigationPage,
+        'popups': PopupsPage,
+        'slides': SlidesPage,
+        'tabs': TabsPage
+    }[hash]
+}
+
+

demos/component-docs/icons/icons.html

@@ -0,0 +1,78 @@
+
+<ion-navbar *navbar class="show-navbar">
+  <ion-title>Icons</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header padding components-icons">
+
+  <ion-row>
+    <ion-col><icon ionic></icon></ion-col>
+    <ion-col><icon ion-social-angular></icon></ion-col>
+    <ion-col><icon ionitron></icon></ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col><icon heart></icon></ion-col>
+    <ion-col><icon apps></icon></ion-col>
+    <ion-col><icon happy></icon></ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col><icon people></icon></ion-col>
+    <ion-col><icon person></icon></ion-col>
+    <ion-col><icon contact></icon></ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col><icon lock></icon></ion-col>
+    <ion-col><icon key></icon></ion-col>
+    <ion-col><icon unlock></icon></ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col><icon map></icon></ion-col>
+    <ion-col><icon navigate></icon></ion-col>
+    <ion-col><icon pin></icon></ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col><icon mic></icon></ion-col>
+    <ion-col><icon musical-notes></icon></ion-col>
+    <ion-col><icon volume-up></icon></ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col><icon cafe></icon></ion-col>
+    <ion-col><icon calculator></icon></ion-col>
+    <ion-col><icon bus></icon></ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col><icon camera></icon></ion-col>
+    <ion-col><icon cube></icon></ion-col>
+    <ion-col><icon image></icon></ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col><icon star></icon></ion-col>
+    <ion-col><icon wine></icon></ion-col>
+    <ion-col><icon pin></icon></ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col><icon arrow-back></icon></ion-col>
+    <ion-col><icon arrow-dropdown></icon></ion-col>
+    <ion-col><icon arrow-forward></icon></ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col><icon sunny></icon></ion-col>
+    <ion-col><icon umbrella</icon></ion-col>
+    <ion-col><icon rainy></icon></ion-col>
+  </ion-row>
+
+</ion-content>
+
+
+
+

demos/component-docs/icons/icons.ts

@@ -0,0 +1,10 @@
+import {IonicPlatform, IonicView} from 'ionic/ionic';
+
+@IonicView({
+    templateUrl: 'icons/icons.html',
+})
+export class IconsPage {
+    constructor() {
+
+    }
+}

demos/component-docs/index.ts

@@ -1,186 +1,33 @@
-import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms';
+import {App, IonicApp, IonicPlatform, ActionSheet} from 'ionic/ionic';
-import {App, IonicApp, IonicPlatform, ActionSheet, NavController, NavParams} from 'ionic/ionic';
+import {IonicView, IonicConfig, Events} from 'ionic/ionic';
-import {Popup, Modal, IonicView, IonicConfig, Events, Animation} from 'ionic/ionic';
+import {ActionSheetPage} from 'actionSheet/actionSheet';
-import {NavigationDetailsPage} from 'navigation';
-
-import {TabsPage} from 'tabs';
-import {DemoModal} from 'modal';
 import * as helpers from 'helpers';
 
 
-@IonicView({
+@App({
-  templateUrl: 'main.html',
+  template: '<ion-nav id="nav" [root]="rootPage"></ion-nav>'
-  bindings: [FormBuilder]
 })
-export class MainPage {
+class DemoApp {
 
-  component: any = { title: 'Action Sheets' };
+  constructor(app: IonicApp) {
+    this.app = app;
+    this.rootPage = ActionSheetPage;
 
-  constructor(app: IonicApp,
+    // if (params.data.location) { this.nextPage = helpers.getPageFor(params.data.location); }
-    nav: NavController,
+    // else if (window.location.hash) { this.nextPage = helpers.getPageFor(window.location.hash); }
-    actionSheet: ActionSheet,
+    // else { this.nextPage = helpers.getPageFor('action-sheet'); }
-    params: NavParams,
-    popup: Popup,
-    platform: IonicPlatform,
-    modal: Modal,
-    events: Events) {
-    this.params = params;
-    this.nav = nav;
-    this.platform = platform;
-    this.modal = modal;
-    this.popup = popup;
-    this.actionSheet = actionSheet;
-    this.navDetailsPage = NavigationDetailsPage;
-    this.demoModal = DemoModal;
-    this.form = new ControlGroup({
-      firstName: new Control("", Validators.required),
-      lastName: new Control("", Validators.required)
-    });
-
-    if (params.data.location) { this.component.title = params.data.location; }
-    else if (window.location.hash) { this.component.title = window.location.hash; }
 
     window.addEventListener('message', (e) => {
       zone.run(() => {
         if (e.data) {
           var data = JSON.parse(e.data);
-          this.component.title = helpers.toTitleCase(data.hash.replace(/-/g, ' '));
+          this.nextPage = helpers.getPageFor(data.hash);
-          if (this.component.title === 'Tabs') {
+          this.title = helpers.toTitleCase(data.hash.replace(/-/g, ' '));
-            this.nav.setRoot(TabsPage);
+          let nav = this.app.getComponent('nav');
-          }
+          nav.setRoot(this.nextPage);
         }
       });
     });
 
-    events.subscribe('page:locationChange', (data) => {
-      this.component.title = data[0].componentName;
-    });
-  }
-
-  // **************************
-  // Action Sheets
-  // **************************
-  openMenu() {
-    if (this.platform.is('android')) {
-      var androidSheet = {
-
-        buttons: [
-          { text: 'Share', icon: 'share' },
-          { text: 'Play', icon: 'arrow-dropright-circle'},
-          { text: 'Favorite', icon: 'ion-md-heart-outline'}
-        ],
-        destructiveText: 'Delete',
-        titleText: 'Purchased',
-        cancelText: 'Cancel',
-        cancel: function() {
-          console.log('Canceled');
-        },
-        destructiveButtonClicked: () => {
-          console.log('Destructive clicked');
-        },
-        buttonClicked: function(index) {
-          console.log('Button clicked', index);
-          if (index == 1) { return false; }
-          return true;
-        }
-      };
-    }
-
-    this.actionSheet.open(androidSheet || {
-      buttons: [
-        { text: 'Share This' },
-        { text: 'Move' }
-      ],
-      destructiveText: 'Delete',
-      titleText: 'You Opened Action Sheet',
-      cancelText: 'Cancel',
-      cancel: function() {
-        console.log('Canceled');
-      },
-      destructiveButtonClicked: () => {
-        console.log('Destructive clicked');
-      },
-      buttonClicked: function(index) {
-        console.log('Button clicked', index);
-        if (index == 1) { return false; }
-        return true;
-      }
-
-    }).then(actionSheetRef => {
-      this.actionSheetRef = actionSheetRef;
-    });
-  }
-
-  // **************************
-  // Navigation
-  // **************************
-  openNavDetailsPage(item) {
-    this.nav.push(NavigationDetailsPage, { name: item });
-  }
-
-
-  // **************************
-  // Modal
-  // **************************
-  openModal() {
-    this.modal.open(this.demoModal, {
-      handle: 'my-awesome-modal',
-      enterAnimation: 'my-fade-in',
-      leaveAnimation: 'my-fade-out'
-    });
-  }
-
-  // **************************
-  // Popup
-  // **************************
-  showPopup() {
-    this.popup.alert("Popup Title").then(() => {
-    });
-  }
-
-
-  // **************************
-  // Form
-  // **************************
-  processForm(event) {
-    // TODO: display input in a popup
-    console.log(event);
-  }
-
-}
-
-class FadeIn extends Animation {
-  constructor(element) {
-    super(element);
-    this
-      .easing('ease')
-      .duration(450)
-      .fadeIn();
   }
 }
-
-Animation.register('my-fade-in', FadeIn);
-
-class FadeOut extends Animation {
-  constructor(element) {
-    super(element);
-    this
-      .easing('ease')
-      .duration(250)
-      .fadeOut();
-  }
-}
-
-Animation.register('my-fade-out', FadeOut);
-
-
-@App({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-class DemoApp {
-
-  constructor() {
-    this.rootPage = MainPage;
-  }
-
-}

demos/component-docs/lists/lists.html

@@ -0,0 +1,58 @@
+
+<ion-navbar *navbar class="show-navbar">
+  <ion-title>Lists</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header">
+  <ion-list>
+
+    <ion-header>
+      Classes
+    </ion-header>
+
+    <ion-item>
+      <icon color-wand item-left></icon>
+      Dark Arts
+    </ion-item>
+
+    <ion-item>
+      <icon planet item-left></icon>
+      Astronomy
+    </ion-item>
+
+    <ion-item>
+      <icon flask item-left></icon>
+      Potions
+    </ion-item>
+
+    <ion-item>
+      <icon star item-left></icon>
+      Charms
+    </ion-item>
+
+  </ion-list>
+
+
+  <ion-list>
+
+    <ion-header>
+      Menu
+    </ion-header>
+
+    <ion-switch checked="true">
+      <icon shirt item-left></icon>
+      Invisibility Cloak
+    </ion-switch>
+
+    <ion-item>
+      <icon call item-left></icon>
+      Call Ron
+      <ion-note item-right>Maybe later</ion-note>
+    </ion-item>
+
+  </ion-list>
+</ion-content>
+
+
+
+

demos/component-docs/lists/lists.ts

@@ -0,0 +1,10 @@
+import {IonicPlatform, IonicView} from 'ionic/ionic';
+
+@IonicView({
+    templateUrl: 'lists/lists.html',
+})
+export class ListsPage {
+    constructor() {
+
+    }
+}

demos/component-docs/menus/menus.html

@@ -0,0 +1,12 @@
+
+<ion-navbar *navbar class="show-navbar">
+  <ion-title>Menus</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header padding">
+  TODO
+</ion-content>
+
+
+
+

demos/component-docs/menus/menus.ts

@@ -0,0 +1,10 @@
+import {IonicPlatform, IonicView} from 'ionic/ionic';
+
+@IonicView({
+    templateUrl: 'menus/menus.html',
+})
+export class MenusPage {
+    constructor() {
+
+    }
+}

demos/component-docs/modal.html

@@ -1 +0,0 @@
-<h1>TODO</h1>

demos/component-docs/modal.ts

@@ -1,46 +0,0 @@
-import {App, IonicApp, Modal, NavController, IonicView, Events} from 'ionic/ionic';
-import * as helpers from 'helpers';
-
-@IonicView({
-  templateUrl: 'modal.html'
-})
-class ModalFirstPage {
-
-  constructor(
-    nav: NavController,
-    modal: Modal,
-    events: Events
-  ) {
-    this.nav = nav;
-    this.modal = modal;
-    window.onmessage = (e) => {
-      zone.run(() => {
-        if (e.data) {
-          var data = JSON.parse(e.data);
-          var componentTitle = helpers.toTitleCase(data.hash.replace('-', ' '));
-          events.publish('page:locationChange', { componentName: componentTitle });
-          this.closeModal();
-        }
-      });
-    };
-  }
-
-  closeModal() {
-    let modal = this.modal.get();
-    if (modal) {
-      modal.close();
-    }
-  }
-
-}
-
-@IonicView({
-  template: '<ion-nav [root]="rootView"></ion-nav>'
-})
-export class DemoModal {
-  constructor() {
-    this.rootView = ModalFirstPage;
-  }
-}
-
-

demos/component-docs/modals/modals-content.html

@@ -0,0 +1,13 @@
+
+<ion-pane padding>
+    <button block danger (click)="closeModal()">
+      <icon close></icon>
+      Close Modal
+    </button>
+</ion-pane>
+
+
+
+
+
+

demos/component-docs/modals/modals.html

@@ -0,0 +1,14 @@
+
+<ion-navbar *navbar class="show-navbar">
+  <ion-title>Modals</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header padding">
+   <button block (click)="openModal()">
+    Show Modal
+  </button>
+</ion-content>
+
+
+
+

demos/component-docs/modals/modals.ts

@@ -0,0 +1,80 @@
+import {App, IonicApp, Animation, Modal, NavController, IonicView, Events} from 'ionic/ionic';
+import * as helpers from 'helpers';
+
+
+@IonicView({
+  templateUrl: 'modals/modals.html'
+})
+class ModalsFirstPage {
+
+  constructor(
+    nav: NavController,
+    modal: Modal,
+    events: Events
+  ) {
+    this.nav = nav;
+    this.modal = modal;
+  }
+
+  openModal() {
+    this.modal.open(ModalsContentPage, {
+      handle: 'my-awesome-modal',
+      enterAnimation: 'my-fade-in',
+      leaveAnimation: 'my-fade-out'
+    });
+  }
+
+}
+
+@IonicView({
+  templateUrl: 'modals/modals-content.html'
+})
+class ModalsContentPage {
+
+  constructor(
+    modal: Modal,
+    events: Events
+  ) {
+    this.modal = modal;
+  }
+
+  closeModal() {
+    let modal = this.modal.get();
+    if (modal) {
+      modal.close();
+    }
+  }
+}
+
+@IonicView({
+  template: '<ion-nav [root]="rootView"></ion-nav>'
+})
+export class ModalsPage {
+  constructor() {
+    this.rootView = ModalsFirstPage;
+  }
+}
+
+class FadeIn extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('ease')
+      .duration(450)
+      .fadeIn();
+  }
+}
+
+Animation.register('my-fade-in', FadeIn);
+
+class FadeOut extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('ease')
+      .duration(250)
+      .fadeOut();
+  }
+}
+
+Animation.register('my-fade-out', FadeOut);

demos/component-docs/navigation.html

@@ -1,8 +0,0 @@
-
-<ion-navbar *navbar>
-  <ion-title>{{ selection.title }}</ion-title>
-</ion-navbar>
-
-<ion-content padding>
-{{ selection.content }}
-</ion-content>

demos/component-docs/navigation/navigation-details.html

@@ -0,0 +1,8 @@
+
+<ion-navbar *navbar>
+  <ion-title>{{selection.title}}</ion-title>
+</ion-navbar>
+
+<ion-content padding>
+ {{selection.content}}
+</ion-content>

demos/component-docs/navigation/navigation.html

@@ -0,0 +1,30 @@
+
+<ion-navbar *navbar>
+  <ion-title>Navigation</ion-title>
+</ion-navbar>
+
+<ion-content>
+  <ion-list>
+
+    <a ion-item (click)="openNavDetailsPage('Angular')">
+      <icon ion-social-angular item-left></icon>
+      Angular
+    </a>
+
+    <a ion-item href="#" (click)="openNavDetailsPage('CSS3')">
+      <icon ion-social-css3 item-left></icon>
+      CSS3
+    </a>
+
+    <button ion-item (click)="openNavDetailsPage('HTML5')">
+      <icon ion-social-html5 item-left></icon>
+      HTML5
+    </button>
+
+    <button ion-item (click)="openNavDetailsPage('Sass')">
+      <icon ion-social-sass item-left></icon>
+      Sass
+    </button>
+
+  </ion-list>
+</ion-content>

demos/component-docs/navigation/navigation.ts

@@ -3,9 +3,9 @@ import {IonicView, Events} from 'ionic/ionic';
 import * as helpers from 'helpers';
 
 @IonicView({
-  templateUrl: 'navigation.html'
+  templateUrl: 'navigation/navigation-details.html'
 })
-export class NavigationDetailsPage {
+class NavigationDetailsPage {
   constructor(nav: NavController, params: NavParams, events: Events) {
     this.nav = nav;
     this.selection = { title: params.data.name };
@@ -23,16 +23,20 @@ export class NavigationDetailsPage {
     };
     this.selection['content'] = navData[this.selection.title];
     this.selection['icon'] = navIcons[this.selection.title];
-    window.onmessage = (e) => {
-      zone.run(() => {
-        if (e.data) {
-          var data = JSON.parse(e.data);
-          var componentTitle = helpers.toTitleCase(data.hash.replace('-', ' '));
-          events.publish('page:locationChange', { componentName: componentTitle });
-          this.nav.pop();
-        }
-      });
-    };
-
   }
 }
+
+@IonicView({
+    templateUrl: 'navigation/navigation.html',
+})
+export class NavigationPage {
+  
+  constructor(nav: NavController) {
+      this.nav = nav;
+  }
+
+  openNavDetailsPage(item) {
+    this.nav.push(NavigationDetailsPage, { name: item });
+  }
+
+}

demos/component-docs/popups/popups.html

@@ -0,0 +1,10 @@
+
+<ion-navbar *navbar>
+  <ion-title>Popups</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header padding">
+  <button block (click)="showPopup()">
+    Show Popup
+  </button>
+</ion-content>

demos/component-docs/popups/popups.ts

@@ -0,0 +1,16 @@
+import {IonicPlatform, IonicView, Popup} from 'ionic/ionic';
+
+@IonicView({
+    templateUrl: 'popups/popups.html',
+})
+export class PopupsPage {
+
+  constructor(popup: Popup) {
+    this.popup = popup;
+  }
+
+  showPopup() {
+    this.popup.alert("Popup Title").then(() => {
+    });
+  }
+}

demos/component-docs/slides/slides.html

@@ -0,0 +1,24 @@
+
+<ion-navbar *navbar class="show-navbar">
+  <ion-title>Slides</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header">
+    <ion-slides id="slider" style="background-color: black" pager="true" zoom="false" index="1" loop="true">
+       <ion-slide>
+         <div class="demo-slide demo-slide-1">
+           Slide 1
+         </div>
+       </ion-slide>
+       <ion-slide>
+         <div class="demo-slide demo-slide-2">
+           Slide 2
+         </div>
+       </ion-slide>
+       <ion-slide>
+         <div class="demo-slide demo-slide-3">
+           Slide 3
+         </div>
+       </ion-slide>
+    </ion-slides>
+</ion-content>

demos/component-docs/slides/slides.ts

@@ -0,0 +1,10 @@
+import {IonicPlatform, IonicView} from 'ionic/ionic';
+
+@IonicView({
+    templateUrl: 'slides/slides.html',
+})
+export class SlidesPage {
+  constructor() {
+
+  }
+}

demos/component-docs/tabs.ts

@@ -1,35 +0,0 @@
-import {NavController, NavParams} from 'ionic/ionic';
-import {IonicView, ViewController, Events} from 'ionic/ionic';
-import {MainPage} from 'index';
-import * as helpers from 'helpers';
-
-@IonicView({
-  template: 'Hello 1',
-})
-class TabOneCtrl {
-  constructor(nav: NavController, view: ViewController) {
-    this.nav = nav;
-    this.view = view;
-  }
-}
-
-@IonicView({
-  templateUrl: 'tabs.html'
-})
-export class TabsPage {
-  constructor(nav: NavController, params: NavParams, events: Events) {
-    this.nav = nav;
-    this.TabOneRoot = TabOneCtrl;
-    window.onmessage = (e) => {
-      zone.run(() => {
-        if (e.data) {
-          var data = JSON.parse(e.data);
-          var componentTitle = helpers.toTitleCase(data.hash.replace('-', ' '));
-          this.nav.setRoot(MainPage, {location: componentTitle});
-          events.publish('page:locationChange', { componentName: componentTitle });
-        }
-      });
-    };
-
-  }
-}

demos/component-docs/tabs/tabs.html

@@ -4,7 +4,7 @@
 
 <ion-tabs tab-bar-placement="bottom">
 <ion-pane>
-  <ion-tab tab-title="Food" tab-icon="pizza">  </ion-tab>
+  <ion-tab tab-title="Food" tab-icon="pizza"></ion-tab>
   <ion-tab tab-title="Drinks" tab-icon="beer"></ion-tab>
   <ion-tab tab-title="Hours" tab-icon="clock"></ion-tab>
 </ion-tabs>

demos/component-docs/tabs/tabs.ts

@@ -0,0 +1,22 @@
+import {NavController, NavParams} from 'ionic/ionic';
+import {IonicView, ViewController} from 'ionic/ionic';
+import * as helpers from 'helpers';
+
+@IonicView({
+  template: 'Hello 1',
+})
+class TabOneCtrl {
+  constructor(nav: NavController, view: ViewController) {
+    this.nav = nav;
+    this.view = view;
+  }
+}
+
+@IonicView({
+  templateUrl: 'tabs.html'
+})
+export class TabsPage {
+  constructor(nav: NavController, params: NavParams) {
+    this.nav = nav;
+  }
+}

gulpfile.js

@@ -416,7 +416,7 @@ gulp.task('demos', function(){
 
 gulp.task('demos:all', ['demos'], function() {
    return gulp
-    .src('dist/demos/component-docs/*')
+    .src('dist/demos/component-docs/**/*')
     .pipe(gulp.dest('dist/ionic-site/docs/v2/components/demo/')) 
 });