Expand nav basic test

2026-03-13 10:22:08 +08:00 · 2016-10-06 19:23:30 -05:00
parent 5156917d78
commit 3a208b6c8d
1 changed files with 247 additions and 3 deletions
--- a/src/components/nav/test/basic/app-module.ts
+++ b/src/components/nav/test/basic/app-module.ts
@@ -1,5 +1,5 @@
 import { NgModule, Component, ViewChild } from '@angular/core';
-import { App, AlertController, Content, DeepLinkConfig, IonicApp, IonicModule, NavController, NavParams, ViewController } from '../../../..';
+import { App, AlertController, Content, DeepLinkConfig, IonicApp, IonicModule, NavController, NavParams, Tabs, Tab, ModalController, ViewController } from '../../../..';

@Component({
  selector: 'my-cmp',
@@ -28,6 +28,7 @@ export class MyCmpTest {}
        </ion-list-header>
        <button ion-item class="e2eFrom1To2" (click)="pushFullPage()">Push to FullPage</button>
        <button ion-item (click)="pushPrimaryHeaderPage()">Push to PrimaryHeaderPage</button>
+        <button ion-item (click)="pushTabsPage()">Push to Tabs Page</button>
        <button ion-item (click)="pushAnother()">Push to AnotherPage</button>
        <ion-item>
          <ion-label>Text Input</ion-label>
@@ -134,6 +135,12 @@ export class FirstPage {
    });
  }

+  pushTabsPage() {
+    this.navCtrl.push(TabsPage).catch(() => {
+    });
+  }
+
+
  quickPush() {
    this.navCtrl.push(AnotherPage).catch(() => {
    });
@@ -475,6 +482,230 @@ export class AnotherPage {

 }

+//
+// Tab 1
+//
+@Component({
+  template: `
+    <ion-header>
+      <ion-navbar>
+        <ion-title>Heart</ion-title>
+      </ion-navbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-list-header>
+          Tab 1
+        </ion-list-header>
+        <ion-item>
+          <button ion-button (click)="goBack()">Back</button>
+        </ion-item>
+        <ion-item (click)="goTo()" *ngFor="let i of items">Item {{i}} {{i}} {{i}} {{i}}</ion-item>
+      </ion-list>
+      <p>
+        <button ion-button (click)="selectPrevious()">Select Previous Tab</button>
+      </p>
+      <p>
+        <button ion-button (click)="appNavPop()">App Nav Pop</button>
+      </p>
+    </ion-content>
+    `
+})
+export class Tab1 {
+  items: any[] = [];
+
+  constructor(private tabs: Tabs, private app: App, private nav: NavController) {
+    for (var i = 1; i <= 250; i++) {
+      this.items.push(i);
+    }
+  }
+
+  goBack() {
+    this.nav.parent.parent.pop();
+  }
+
+  goTo() {
+    this.nav.push(TabItemPage);
+  }
+
+  selectPrevious() {
+    this.tabs.select(this.tabs.previousTab());
+  }
+
+  appNavPop() {
+    this.app.navPop();
+  }
+}
+
+//
+// Tab 2
+//
+@Component({
+  template: `
+    <ion-header>
+      <ion-navbar>
+        <ion-title>Schedule</ion-title>
+      </ion-navbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-item-sliding *ngFor="let session of sessions" #slidingItem>
+          <ion-item>
+            <h3>{{session.name}} {{session.name}} {{session.name}}</h3>
+            <p>{{session.location}} {{session.location}} {{session.location}}</p>
+          </ion-item>
+          <ion-item-options>
+            <button ion-button color="primary">Speaker<br>Info</button>
+            <button ion-button color="secondary">Add to<br>Favorites</button>
+          </ion-item-options>
+        </ion-item-sliding>
+      </ion-list>
+      <p>
+        <button ion-button (click)="selectPrevious()">Select Previous Tab</button>
+      </p>
+      <p>
+        <button ion-button (click)="appNavPop()">App Nav Pop</button>
+      </p>
+    </ion-content>
+  `
+})
+export class Tab2 {
+  sessions: any[] = [];
+
+  constructor(private tabs: Tabs, private app: App) {
+    for (var i = 1; i <= 250; i++) {
+      this.sessions.push({
+        name: 'Name ' + i,
+        location: 'Location: ' + i
+      });
+    }
+  }
+
+  selectPrevious() {
+    this.tabs.select(this.tabs.previousTab());
+  }
+
+  appNavPop() {
+    this.app.navPop();
+  }
+}
+
+//
+// Tab 3
+//
+@Component({
+  template: `
+    <ion-header>
+      <ion-navbar>
+        <button ion-button menuToggle>
+          <ion-icon name="menu"></ion-icon>
+        </button>
+        <ion-title>Stopwatch</ion-title>
+      </ion-navbar>
+    </ion-header>
+
+    <ion-content padding>
+      <h2>Tab 3</h2>
+      <p>
+        <button ion-button (click)="presentAlert()">Present Alert</button>
+        <button ion-button (click)="presentModal()">Present Modal</button>
+      </p>
+      <p>
+        <button ion-button (click)="selectPrevious()">Select Previous Tab</button>
+      </p>
+      <p>
+        <button ion-button (click)="appNavPop()">App Nav Pop</button>
+      </p>
+    </ion-content>
+    `
+})
+export class Tab3 {
+  constructor(private alertCtrl: AlertController, private modalCtrl: ModalController, private tabs: Tabs, private app: App) {}
+
+  presentAlert() {
+    let alert = this.alertCtrl.create({
+      title: 'Alert Title!',
+      buttons: ['Dismiss']
+    });
+    alert.present();
+  }
+
+  presentModal() {
+    //this.modalCtrl.create(MyModal).present();
+  }
+
+  selectPrevious() {
+    this.tabs.select(this.tabs.previousTab());
+  }
+
+  appNavPop() {
+    this.app.navPop();
+  }
+}
+
+
+@Component({
+  template: `
+    <ion-menu [content]="content">
+      <ion-header>
+        <ion-toolbar color="secondary">
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-list>
+          <button ion-item menuClose detail-none>
+            Close Menu
+          </button>
+        </ion-list>
+      </ion-content>
+    </ion-menu>
+
+    <ion-tabs #content (ionChange)="onChange($event)">
+      <ion-tab tabUrlPath="plain" tabTitle="Plain List" tabIcon="star" [root]="root1" (ionSelect)="onSelect($event)"></ion-tab>
+      <ion-tab tabTitle="Schedule" tabIcon="globe" [root]="root2"></ion-tab>
+      <ion-tab tabTitle="Stopwatch" tabIcon="logo-facebook" [root]="root3"></ion-tab>
+      <ion-tab tabTitle="Messages" tabIcon="chatboxes" [root]="root1"></ion-tab>
+      <ion-tab tabTitle="My Profile" tabIcon="person" [root]="root2"></ion-tab>
+    </ion-tabs>
+  `
+})
+export class TabsPage {
+  root1 = Tab1;
+  root2 = Tab2;
+  root3 = Tab3;
+
+  onChange(ev: Tab) {
+    console.log('Changed tab', ev);
+  }
+
+  onSelect(ev: Tab) {
+    console.log('Selected tab', ev);
+  }
+}
+
+@Component({
+  template: `
+    <ion-header>
+      <ion-navbar>
+        <ion-title>Tab Item</ion-title>
+      </ion-navbar>
+    </ion-header>
+
+    <ion-content>
+      <h2>Hello moto</h2>
+    </ion-content>
+    `
+})
+export class TabItemPage {
+  items: any[] = [];
+
+  constructor(private tabs: Tabs, private app: App) {
+  }
+}
+

@Component({
  template: `<ion-nav [root]="root"></ion-nav>`
@@ -491,6 +722,9 @@ export const deepLinkConfig: DeepLinkConfig = {
    { component: MyCmpTest, name: 'tab1-page1' },
    { component: FullPage, name: 'full-page', defaultHistory: ['first-page', 'another-page'] },
    { component: PrimaryHeaderPage, name: 'primary-header-page', defaultHistory: ['first-page', 'full-page'] },
+    { component: Tabs, name: 'tabs' },
+    { component: Tab1, name: 'tab1' },
+    { component: TabItemPage, name: 'item' }
  ]
 };

@@ -501,7 +735,12 @@ export const deepLinkConfig: DeepLinkConfig = {
    AnotherPage,
    MyCmpTest,
    FullPage,
-    PrimaryHeaderPage
+    PrimaryHeaderPage,
+    TabsPage,
+    Tab1,
+    Tab2,
+    Tab3,
+    TabItemPage
  ],
  imports: [
    IonicModule.forRoot(E2EApp, null, deepLinkConfig)
@@ -512,7 +751,12 @@ export const deepLinkConfig: DeepLinkConfig = {
    FirstPage,
    AnotherPage,
    FullPage,
-    PrimaryHeaderPage
+    PrimaryHeaderPage,
+    TabsPage,
+    Tab1,
+    Tab2,
+    Tab3,
+    TabItemPage
  ]
 })
 export class AppModule {}