diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts
index 45f1342ebd..3308a6985e 100644
--- a/demos/component-docs/index.ts
+++ b/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: 'My Modal
'
+})
+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;
}
-}
\ No newline at end of file
+}
diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html
index 6be668ea00..37d5df78ca 100644
--- a/demos/component-docs/main.html
+++ b/demos/component-docs/main.html
@@ -1,5 +1,4 @@
-
{{ component.title }}
@@ -9,7 +8,7 @@
@@ -32,6 +31,30 @@
+
+
+
+
+
+
@@ -175,7 +246,7 @@
-
+
@@ -208,11 +279,6 @@
Charms
-
-
- Herbology
-
-
@@ -224,18 +290,12 @@
- Cloak of Invisibility
+ Invisibility Cloak
Call Ron
- Sure
-
-
-
-
- Study Potions
Maybe later
@@ -251,35 +311,30 @@
@@ -304,12 +359,8 @@
-
-
-
-
-
-
+
+
diff --git a/demos/component-docs/navigation.html b/demos/component-docs/navigation.html
index a0fa477680..5d734ef310 100644
--- a/demos/component-docs/navigation.html
+++ b/demos/component-docs/navigation.html
@@ -3,18 +3,6 @@
{{ selection.title }}
-
-
-
-
-
-
- {{ selection.title }}
-
-
-
- {{ selection.content }}
-
-
-
+
+{{ selection.content }}
\ No newline at end of file
diff --git a/demos/component-docs/tabs.html b/demos/component-docs/tabs.html
new file mode 100644
index 0000000000..c6566ddd7f
--- /dev/null
+++ b/demos/component-docs/tabs.html
@@ -0,0 +1,12 @@
+
+ Tabs
+
+
+
+
+
+
+
+
+
+
diff --git a/demos/component-docs/tabs.ts b/demos/component-docs/tabs.ts
new file mode 100644
index 0000000000..357ab55d72
--- /dev/null
+++ b/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 });
+ }
+ });
+ };
+
+ }
+}
\ No newline at end of file