javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(nav): animate nested navs

Browse Source
This commit is contained in:
Adam Bradley
2015-10-30 23:31:23 -05:00
parent 25b672dabe
commit 1a865eaf7b
5 changed files with 67 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ionic/components/nav/nav-controller.ts
View File

@ -184,7 +184,7 @@ export class NavController extends Ion {
if (opts.preCleanup !== false) {
raf(() => {
this._cleanup(enteringView);
});
});
}
if (this.router) {
@ -286,7 +286,7 @@ export class NavController extends Ion {
let leavingView = this._views[this._views.length - 1];
let enteringView = view;
if(this.router) {
if (this.router) {
this.router.stateChange('pop', enteringView);
}

51
ionic/components/nav/nav.ts
View File

@ -4,6 +4,7 @@ import {IonicApp} from '../app/app';
import {Config} from '../../config/config';
import {ConfigComponent} from '../../config/decorators';
import {NavController} from './nav-controller';
import {ViewController} from './view-controller';
/**
* _For a quick walkthrough of navigation in Ionic, check out the
@ -59,25 +60,23 @@ import {NavController} from './nav-controller';
* <ion-nav>
* |
* |
* Pane 3 +--------------------+ LoginPage
* Pane 2 +--------------------+ | Has header, animates into pane 1
* Pane 1 +--------------------+ | | +--------------------+
* | | Header (Pane 1) |<-----------------| Login |
* Page 3 +--------------------+ LoginPage
* Page 2 +--------------------+ |
* Page 1 +--------------------+ | | +--------------------+
* | | Header |<-----------------| Login |
* +--------------------+ | | +--------------------+
* | | | | | | | Username: |
* | | | | | | | Password: |
* | | | Pane 3 is | | | | |
* | | | Page 3 is | | | | |
* | | | only content | | | | |
* | | | |<-----------------| |
* | | | | | | | |
* | | | | | | | |
* | +------------------|-+ | | |
* | | Footer (Pane 2)--|-|-+ | |
* | | Footer |-|-+ | |
* | +------------------|-+ | |
* +--------------------+ +--------------------+
* <ion-pane> <ion-view>
*
* Pane 1 Pane 2 Pane 3
* +--------------------+ +--------------------+ +--------------------+
* | Header | | Content | | Content |
* +--------------------+ | | | |
@ -96,31 +95,6 @@ import {NavController} from './nav-controller';
* </pre>
* </div>
*
* ### Panes
*
* NOTE: You don't have to do anything with panes because Ionic takes care of
* animated transitions for you. This is an explanation of how Nav works to
* accompany the diagram above.
*
* When you push a new page onto the navigation stack using [NavController.push()](../NavController/#push)
* or the [NavPush directive](../NavPush/), Nav animates the new page into the
* appropriate pane.
*
* Panes are the containers Nav creates to animate views into. They do not have
* any content of their own, as they are just a structural reference for where
* the various parts of a page (header, footer, content) should animate into.
*
* The easiest scenario is animating between pages with the same structure. If
* you have a page with a header and content, and navigate to another page that
* also has a header and content, Nav can smoothly animate the incoming page
* into the pane the exiting page is leaving. This allows for things like
* seamless header animations between pages that both have headers.
*
* But suppose you have a page with a header and content and want to navigate to
* a page with no header. Nav creates a new pane with no header that is directly
* behind the current pane. It then animates the exiting page out of the current
* pane and the new page into the new content-only pane.
*
*/
@ConfigComponent({
selector: 'ion-nav',
@ -136,6 +110,7 @@ export class Nav extends NavController {
constructor(
@Optional() hostNavCtrl: NavController,
@Optional() viewCtrl: ViewController,
app: IonicApp,
config: Config,
elementRef: ElementRef,
@ -146,11 +121,15 @@ export class Nav extends NavController {
renderer: Renderer
) {
super(hostNavCtrl, app, config, elementRef, compiler, loader, viewManager, zone, renderer);
if (viewCtrl) {
// an ion-nav can also act as an ion-page within a parent ion-nav
// this would happen when an ion-nav nests a child ion-nav.
viewCtrl.setContent(this);
viewCtrl.setContentRef(elementRef);
}
}
/**
* @private
*/
onInit() {
super.onInit();

48
ionic/components/nav/test/nested/index.ts
View File

@ -24,7 +24,7 @@ export class Login {
}
@Page({
@Page({
template: `
<ion-menu [content]="content">
<ion-toolbar secondary>
@ -67,7 +67,7 @@ export class Account {
}
logOut() {
this.app.getComponent('root-nav').setRoot(Login);
this.app.getComponent('root-nav').setRoot(Login, null, { animate: true });
}
}
@ -75,27 +75,63 @@ export class Account {
@Page({
template: `
<ion-navbar *navbar primary>
<a menu-toggle>
<icon menu></icon>
</a>
<ion-title>Account Dashboard</ion-title>
</ion-navbar>
<ion-content padding>
Dashboard
<p><button (click)="goToProfile()">Profile</button></p>
<p><button (click)="logOut()">Logout</button></p>
</ion-content>
`
})
export class Dashboard {}
export class Dashboard {
constructor(app: IonicApp, nav: NavController) {
this.app = app;
this.nav = nav;
}
goToProfile() {
this.nav.push(Profile);
}
logOut() {
this.app.getComponent('root-nav').setRoot(Login, null, {
animate: true,
direction: 'back'
});
}
}
@Page({
template: `
<ion-navbar *navbar danger>
<a menu-toggle>
<icon menu></icon>
</a>
<ion-title>Account Profile</ion-title>
</ion-navbar>
<ion-content padding>
Profile
<p><button (click)="goToDashboard()">Dashboard</button></p>
<p><button (click)="logOut()">Logout</button></p>
</ion-content>
`
})
export class Profile {}
export class Profile {
constructor(app: IonicApp, nav: NavController) {
this.app = app;
this.nav = nav;
}
goToDashboard() {
this.nav.push(Dashboard);
}
logOut() {
this.app.getComponent('root-nav').setRoot(Login, null, {
animate: true,
direction: 'back'
});
}
}
@App({