tabs wip

ionic/components/nav/nav-base.js

@@ -110,7 +110,7 @@ export class NavBase {
   }
 
   push(Component, params = {}, opts = {}) {
-    if (this.isTransitioning()) {
+    if (!Component || this.isTransitioning()) {
       return Promise.reject();
     }
 

ionic/components/tabs/tab.js

@@ -54,7 +54,7 @@ export class Tab {
 
     this.viewContainerRef = viewContainerRef;
 
-    this.sections = parentNavBase;
+    this.sections = parentNavBase.panes['_n'].sections;
     this.navBase.panes['_n'] = this;
 
     this.isSelected = false;

ionic/components/tabs/test/advanced/pages/tabs.html

@@ -4,4 +4,7 @@
   <ion-tab [initial]="tab1Initial" tab-title="Tab 1">
   </ion-tab>
 
+  <ion-tab [initial]="tab2Initial" tab-title="Tab 2">
+  </ion-tab>
+
 </ion-tabs>

ionic/components/tabs/test/advanced/pages/tabs.js

@@ -15,7 +15,7 @@ import {Tabs, Tab, NavController, NavbarTemplate, Navbar, Content} from 'ionic/i
 export class TabsPage {
   constructor(nav: NavController) {
     this.tab1Initial = Tab1Page1
-    //this.tab2Initial = Tab2Page1
+    this.tab2Initial = Tab2Page1
   }
 }
 
@@ -39,7 +39,6 @@ export class TabsPage {
 export class Tab1Page1 {
   constructor(nav: NavController) {
     this.nav = nav;
-    console.log('Tab1Page1 onInit')
   }
 
   push() {
@@ -54,7 +53,8 @@ export class Tab1Page1 {
       '<ion-title>Tabs 1 Page 2</ion-title>' +
     '</ion-navbar>' +
     '<ion-content class="padding">' +
-      '<p><button class="button" (click)="pop()">Back to Tab 1, Page 1</button></p>' +
+      '<p><button class="button" (click)="push()">Go to Tab 1, Page 3</button></p>' +
+      '<p><button class="button" (click)="nav.pop()">Back to Tab 1, Page 1</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
     '</ion-content>',
@@ -65,63 +65,97 @@ export class Tab1Page2 {
     this.nav = nav;
   }
 
-  pop() {
+  push() {
-    this.nav.push()
+    this.nav.push(Tab1Page3)
   }
 }
 
+@Component({selector: 'ion-view'})
+@View({
+  template: '' +
+    '<ion-navbar *navbar>' +
+      '<ion-title>Tabs 1 Page 3</ion-title>' +
+    '</ion-navbar>' +
+    '<ion-content class="padding">' +
+      '<p><button class="button" (click)="nav.pop()">Back to Tab 1, Page 2</button></p>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+    '</ion-content>',
+  directives: [NavbarTemplate, Navbar, Content]
+})
+export class Tab1Page3 {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+}
+
+
 
 //
 // tab 2
 //
-@Component({ selector: 't2p1' })
+@Component({selector: 'ion-view'})
 @View({
-  template: `
+  template: '' +
-    <ion-content class="padding">
+    '<ion-navbar *navbar>' +
-      <p>Tab 2 Page 1.</p>
+      '<ion-title>Tabs 2 Page 1</ion-title>' +
-      <button class="button button-primary" (click)="next()">
+    '</ion-navbar>' +
-        Go to Tab 2 Page 2 (push)
+    '<ion-content class="padding">' +
-      </button>
+      '<p><button class="button" (click)="push()">Go to Tab 2, Page 2</button></p>' +
-      <br/><span style="color:red">I have got an aside on the left.</span>
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-    </ion-content>
+    '</ion-content>',
-  `,
+  directives: [NavbarTemplate, Navbar, Content]
-  directives: [Content]
 })
-class Tab2Page1 {
+export class Tab2Page1 {
-  // TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
   constructor(nav: NavController) {
-    this.nav = nav
+    this.nav = nav;
   }
-  next() {
+
+  push() {
     this.nav.push(Tab2Page2)
   }
 }
 
-@Component({ selector: 't2p2' })
+@Component({selector: 'ion-view'})
 @View({
-  template: `
+  template: '' +
-    <ion-tabs #view class="view-cover">
+    '<ion-navbar *navbar>' +
-      <ion-tab tab-title="Nested Tab 1">
+      '<ion-title>Tabs 2 Page 2</ion-title>' +
-        <ion-content class="padding">
+    '</ion-navbar>' +
-          Nested Tab 1, static content
+    '<ion-content class="padding">' +
-          <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+      '<p><button class="button" (click)="push()">Go to Tab 2, Page 3</button></p>' +
-        </ion-content>
+      '<p><button class="button" (click)="nav.pop()">Back to Tab 2, Page 1</button></p>' +
-      </ion-tab>
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-      <ion-tab tab-title="Nested Tab 2">
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-        <ion-content class="padding">
+    '</ion-content>',
-          Nested Tab 2, static content
+  directives: [NavbarTemplate, Navbar, Content]
-          <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-        </ion-content>
-      </ion-tab>
-    </ion-tabs>
-  `,
-  directives: [Tabs, Tab, Content]
 })
-class Tab2Page2 {
+export class Tab2Page2 {
-  // TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
   constructor(nav: NavController) {
-    this.nav = nav
+    this.nav = nav;
+  }
+
+  push() {
+    this.nav.push(Tab2Page3)
+  }
+}
+
+@Component({selector: 'ion-view'})
+@View({
+  template: '' +
+    '<ion-navbar *navbar>' +
+      '<ion-title>Tabs 2 Page 3</ion-title>' +
+    '</ion-navbar>' +
+    '<ion-content class="padding">' +
+      '<p><button class="button" (click)="nav.pop()">Back to Tab 2, Page 2</button></p>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+    '</ion-content>',
+  directives: [NavbarTemplate, Navbar, Content]
+})
+export class Tab2Page3 {
+  constructor(nav: NavController) {
+    this.nav = nav;
   }
-  pop() { this.nav.pop() }
 }