docs(demos): tabs, nav, button demos

demos/component-docs/index.ts

@@ -1,30 +1,54 @@
-import {App, IonicApp, ActionSheet, Animation, NavController, NavParams} from 'ionic/ionic';
-import {IonicView, IonicConfig, Events} from 'ionic/ionic';
+import {App, IonicApp, ActionSheet, NavController, NavParams} from 'ionic/ionic';
+import {Modal, IonicView, IonicConfig, Events} from 'ionic/ionic';
 import {NgZone} from 'angular2/angular2';
 import {NavigationDetailsPage} from 'navigation';
+import {TabsPage} from 'tabs';
+
 import * as helpers from 'helpers';
 
 
+@IonicView({
+  template: '<div>My Modal</div>'
+})
+class DemoModal extends Modal {
+  constructor() {
+    super();
+  }
+}
+
+
 @IonicView({
   templateUrl: 'main.html'
 })
-class MainPage {
+export class MainPage {
 
-  constructor(app: IonicApp, nav: NavController, actionSheet: ActionSheet, zone: NgZone, params: NavParams, events: Events) {
+  component: any = { title: 'Action Sheets' };
+
+  constructor(app: IonicApp,
+              nav: NavController,
+              actionSheet: ActionSheet,
+              zone: NgZone,
+              params: NavParams,
+              modal: Modal,
+              events: Events)
+  {
     this.params = params;
     this.nav = nav;
+    this.modal = modal;
     this.actionSheet = actionSheet;
-
     this.navDetailsPage = NavigationDetailsPage;
-    this.component = { title: 'Action Sheets' };
 
-    this.setupAnimations();
+    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('-', ' '));
+          if (this.component.title === 'Tabs') {
+            this.nav.setRoot(TabsPage);
+          }
         }
       });
     });
@@ -70,26 +94,16 @@ class MainPage {
     this.nav.push(NavigationDetailsPage, {name: item});
   }
 
-  // **************************
-  // Animations
-  // **************************
-  setupAnimations() {
-    this.animation = new Animation();
-    this.animation
-      .duration(2000)
 
-    var ionitronSpin = new Animation(document.querySelector('#ionitron'));
-    ionitronSpin
-      .from('transform', 'rotate(0deg)')
-      .to('transform', 'rotate(360deg)')
-
-    this.animation.add(ionitronSpin);
-  }
-  play() {
-    this.animation.play();
-  }
-  pause() {
-    this.animation.pause();
+  // **************************
+  // Modal
+  // **************************
+  openModal() {
+    this.modal.open(DemoModal, {
+      enterAnimation: 'my-fade-in',
+      leaveAnimation: 'my-fade-out',
+      handle: 'my-awesome-modal'
+    });
   }
 
 }
@@ -103,4 +117,4 @@ class DemoApp {
     this.rootPage = MainPage;
   }
 
-}
+}

demos/component-docs/main.html

@@ -1,5 +1,4 @@
 
-
 <ion-navbar *navbar class="show-navbar">
   <ion-title>{{ component.title }}</ion-title>
 </ion-navbar>
@@ -9,7 +8,7 @@
 
   <section id="action-sheet" [ng-class]="{hidden: component.title !== 'Action Sheets' }" class="section-padding">
     <button class="button" (click)="openMenu()">
-      Show Action Sheet
+      Show Actionsheet
     </button>
   </section>
 
@@ -32,6 +31,30 @@
 
   <section id="buttons" [ng-class]="{hidden: component.title !== 'Buttons' }" class="section-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>
+
+  </section>
+
+  <section id="block-buttons" [ng-class]="{hidden: component.title !== 'Block Buttons' }" class="section-padding">
+
     <p>
       <button block>Default</button>
     </p>
@@ -54,6 +77,54 @@
 
   </section>
 
+  <section id="full-buttons" [ng-class]="{hidden: component.title !== 'Full Buttons' }">
+
+    <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>
+
+  </section>
+
+  <section id="outline-buttons" [ng-class]="{hidden: component.title !== 'Outline Buttons' }">
+
+    <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>
+
+  </section>
+
 
   <section id="cards" [ng-class]="{hidden: component.title !== 'Cards' }">
 
@@ -175,7 +246,7 @@
 
     <ion-row>
       <ion-col><icon sunny></icon></ion-col>
-      <ion-col><icon umbrella></icon></ion-col>
+      <ion-col><icon umbrella</icon></ion-col>
       <ion-col><icon rainy></icon></ion-col>
     </ion-row>
 
@@ -208,11 +279,6 @@
         Charms
       </ion-item>
 
-      <ion-item>
-        <icon leaf item-left></icon>
-        Herbology
-      </ion-item>
-
     </ion-list>
 
 
@@ -224,18 +290,12 @@
 
       <ion-switch checked="true">
         <icon shirt item-left></icon>
-        Cloak of Invisibility
+        Invisibility Cloak
       </ion-switch>
 
       <ion-item>
         <icon call item-left></icon>
         Call Ron
-        <div class="item-note" item-right>Sure</div>
-      </ion-item>
-
-      <ion-item>
-        <icon book item-left></icon>
-        Study Potions
         <div class="item-note" item-right>Maybe later</div>
       </ion-item>
 
@@ -251,35 +311,30 @@
   </section>
 
   <section id="navigation" [ng-class]="{hidden: component.title !== 'Navigation' }">
-    <ion-card>
-      <ion-card-header primary>
-        Tap for more info...
-      </ion-card-header>
+    <ion-list>
 
-      <ion-card-content>
+      <a ion-item (click)="openNavDetailsPage('Angular')">
+        <icon ion-social-angular item-left></icon>
+        Angular
+      </a>
 
-        <a ion-item href="#" (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>
 
-        <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('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>
 
-        <button ion-item (click)="openNavDetailsPage('Sass')">
-          <icon ion-social-sass item-left></icon>
-          Sass
-        </button>
-      </ion-card-content>
+    </ion-list>
 
-    </ion-card> 
 
   </section>
   
@@ -304,12 +359,8 @@
    </ion-slides>
   </section>
 
-  <section id="tabs" [ng-class]="{hidden: component.title !== 'Tabs' }">
-    <ion-tabs tab-bar-placement="bottom">
-      <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>
+  <section id="forms" [ng-class]="{hidden: component.title !== 'Forms' }">
   </section>
 
 </ion-content>
+

demos/component-docs/navigation.html

@@ -3,18 +3,6 @@
   <ion-title>{{ selection.title }}</ion-title>
 </ion-navbar>
 
-<ion-content>
-
-<ion-card>
-
-  <ion-card-header primary>
-    <icon [name]="selection.icon" item-left></icon>
-    {{ selection.title }}
-  </ion-card-header>
-
-  <ion-card-content>
-    {{ selection.content }}
-  </ion-card-content>
-
-</ion-card> 
+<ion-content padding>
+{{ selection.content }}
 </ion-content>

demos/component-docs/tabs.html

@@ -0,0 +1,12 @@
+<ion-navbar *navbar class="show-navbar">
+    <ion-title>Tabs</ion-title>
+</ion-navbar>
+
+<ion-tabs tab-bar-placement="bottom">
+<ion-pane>
+  <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>
+
+</ion-pane>

demos/component-docs/tabs.ts

@@ -0,0 +1,35 @@
+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 });
+        }
+      });
+    };
+
+  }
+}