mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
feat(nav): NavPush and NavPop
This commit is contained in:
@ -17,6 +17,7 @@ export * from 'ionic/components/modal/modal'
|
|||||||
export * from 'ionic/components/nav/nav'
|
export * from 'ionic/components/nav/nav'
|
||||||
export * from 'ionic/components/nav/nav-controller'
|
export * from 'ionic/components/nav/nav-controller'
|
||||||
export * from 'ionic/components/nav/nav-params'
|
export * from 'ionic/components/nav/nav-params'
|
||||||
|
export * from 'ionic/components/nav/nav-push'
|
||||||
export * from 'ionic/components/nav-bar/nav-bar'
|
export * from 'ionic/components/nav-bar/nav-bar'
|
||||||
export * from 'ionic/components/slides/slides'
|
export * from 'ionic/components/slides/slides'
|
||||||
export * from 'ionic/components/radio/radio'
|
export * from 'ionic/components/radio/radio'
|
||||||
|
44
ionic/components/nav/nav-push.js
Normal file
44
ionic/components/nav/nav-push.js
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import {Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
|
||||||
|
import {Optional} from 'angular2/src/di/annotations_impl';
|
||||||
|
import {Compiler} from 'angular2/angular2';
|
||||||
|
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
|
||||||
|
import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
|
||||||
|
import {Injector} from 'angular2/di';
|
||||||
|
|
||||||
|
import {ViewController} from '../view/view-controller';
|
||||||
|
import {NavController} from './nav-controller';
|
||||||
|
|
||||||
|
@Directive({
|
||||||
|
selector: '[nav-push]',
|
||||||
|
hostListeners: {
|
||||||
|
'^click': 'onClick($event)'
|
||||||
|
},
|
||||||
|
properties: [
|
||||||
|
'navPush: nav-push',
|
||||||
|
'pushData: push-data'
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class NavPush {
|
||||||
|
constructor(nav: NavController) {
|
||||||
|
this.nav = nav;
|
||||||
|
}
|
||||||
|
onClick(event) {
|
||||||
|
this.nav.push(this.navPush, this.pushData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@Directive({
|
||||||
|
selector: '[nav-pop]',
|
||||||
|
hostListeners: {
|
||||||
|
'^click': 'onClick($event)'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
export class NavPop {
|
||||||
|
constructor(nav: NavController) {
|
||||||
|
this.nav = nav;
|
||||||
|
}
|
||||||
|
onClick(event) {
|
||||||
|
this.nav.pop();
|
||||||
|
}
|
||||||
|
}
|
@ -1,7 +1,7 @@
|
|||||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||||
|
|
||||||
import {NavController, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
|
import {NavController, NavbarTemplate, Navbar, NavPush, Content} from 'ionic/ionic';
|
||||||
import {SecondPage} from './second-page';
|
import {SecondPage} from './second-page';
|
||||||
|
|
||||||
|
|
||||||
@ -21,10 +21,11 @@ import {SecondPage} from './second-page';
|
|||||||
'<ion-content class="padding">' +
|
'<ion-content class="padding">' +
|
||||||
'<p>First Page: {{ val }}</p>' +
|
'<p>First Page: {{ val }}</p>' +
|
||||||
'<p><button class="button" (click)="push()">Push (Go to 2nd)</button></p>' +
|
'<p><button class="button" (click)="push()">Push (Go to 2nd)</button></p>' +
|
||||||
|
'<p><button class="button" [push-data]="pushData" [nav-push]="pushPage">Push w/ nav-push (Go to 2nd)</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>' +
|
||||||
'<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: [NavbarTemplate, Navbar, NavPush, Content]
|
||||||
})
|
})
|
||||||
export class FirstPage {
|
export class FirstPage {
|
||||||
constructor(
|
constructor(
|
||||||
@ -32,6 +33,11 @@ export class FirstPage {
|
|||||||
) {
|
) {
|
||||||
this.nav = nav;
|
this.nav = nav;
|
||||||
this.val = Math.round(Math.random() * 8999) + 1000;
|
this.val = Math.round(Math.random() * 8999) + 1000;
|
||||||
|
|
||||||
|
this.pushPage = SecondPage;
|
||||||
|
this.pushData = {
|
||||||
|
id: 420
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
viewLoaded() {
|
viewLoaded() {
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||||
|
|
||||||
import {NavController, NavParams, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
|
import {NavController, NavPop, NavParams, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
|
||||||
import {ThirdPage} from './third-page';
|
import {ThirdPage} from './third-page';
|
||||||
|
|
||||||
|
|
||||||
@ -13,13 +13,16 @@ import {ThirdPage} from './third-page';
|
|||||||
<p>
|
<p>
|
||||||
<button class="button" (click)="pop()">Pop (Go back to 1st)</button>
|
<button class="button" (click)="pop()">Pop (Go back to 1st)</button>
|
||||||
</p>
|
</p>
|
||||||
|
<p>
|
||||||
|
<button class="button" nav-pop>Pop with NavPop (Go back to 1st)</button>
|
||||||
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<button class="button" (click)="push()">Push (Go to 3rd)</button>
|
<button class="button" (click)="push()">Push (Go to 3rd)</button>
|
||||||
</p>
|
</p>
|
||||||
<div class="green"><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></div>
|
<div class="green"><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></div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
`,
|
`,
|
||||||
directives: [NavbarTemplate, Navbar, Content]
|
directives: [NavbarTemplate, NavPop, Navbar, Content]
|
||||||
})
|
})
|
||||||
export class SecondPage {
|
export class SecondPage {
|
||||||
constructor(
|
constructor(
|
||||||
|
Reference in New Issue
Block a user