ionic-framework
Version:
The ionic-framework package comes with both Javascript and Sass frontend dependencies, located in the root of the package, and a Node API, located in `tooling/`.
109 lines (108 loc) • 5.36 kB
TypeScript
import { ElementRef, NgZone, Compiler, AppViewManager, Renderer, Type } from 'angular2/core';
import { IonicApp } from '../app/app';
import { Config } from '../../config/config';
import { Keyboard } from '../../util/keyboard';
import { NavController } from './nav-controller';
import { ViewController } from './view-controller';
/**
* @name Nav
* @description
* _For a quick walkthrough of navigation in Ionic, check out the
* [Navigation section](../../../../components/#navigation) of the Component
* docs._
*
* Nav is a basic navigation controller component. As a subclass of NavController
* you use it to navigate to pages in your app and manipulate the navigation stack.
* Nav automatically animates transitions between pages for you.
*
* For more information on using navigation controllers like Nav or [Tab](../../Tabs/Tab/),
* take a look at the [NavController API reference](../NavController/).
*
* You must set a root page (where page is any [@Page](../../config/Page/)
* component) to be loaded initially by any Nav you create, using
* the 'root' property:
*
* ```ts
* import {GettingStartedPage} from 'getting-started';
* @App({
* template: `<ion-nav [root]="rootPage"></ion-nav>`
* })
* class MyApp {
* constructor(){
* this.rootPage = GettingStartedPage;
* }
* }
* ```
*
* <h2 id="back_navigation">Back navigation</h2>
* If a [page](../NavController/#creating_pages) you navigate to has a [NavBar](../NavBar/),
* Nav will automatically add a back button to it if there is a page
* before the one you are navigating to in the navigation stack.
*
* Additionally, specifying the `swipe-back-enabled` property will allow you to
* swipe to go back:
* ```html
* <ion-nav swipe-back-enabled="false" [root]="rootPage"></ion-nav>
* ```
*
* Here is a diagram of how Nav animates smoothly between pages:
*
* <div class="highlight less-margin">
* <pre>
* +-------+
* | App |
* +---+---+
* <ion-app>
* |
* +------------+-------------+
* | Ionic Nav Controller |
* +------------+-------------+
* <ion-nav>
* |
* |
* Page 3 +--------------------+ LoginPage
* Page 2 +--------------------+ |
* Page 1 +--------------------+ | | +--------------------+
* | | Header |<-----------------| Login |
* +--------------------+ | | +--------------------+
* | | | | | | | Username: |
* | | | | | | | Password: |
* | | | Page 3 is | | | | |
* | | | only content | | | | |
* | | | |<-----------------| |
* | | | | | | | |
* | | | | | | | |
* | +------------------|-+ | | |
* | | Footer |-|-+ | |
* | +------------------|-+ | |
* +--------------------+ +--------------------+
*
* +--------------------+ +--------------------+ +--------------------+
* | Header | | Content | | Content |
* +--------------------+ | | | |
* | Content | | | | |
* | | | | | |
* | | | | | |
* | | | | | |
* | | | | | |
* | | | | | |
* | | | | | |
* | | | | | |
* | | +--------------------+ | |
* | | | Footer | | |
* +--------------------+ +--------------------+ +--------------------+
*
* </pre>
* </div>
*
* @see {@link /docs/v2/components#navigation Navigation Component Docs}
*/
export declare class Nav extends NavController {
root: Type;
swipeBackEnabled: any;
constructor(hostNavCtrl: NavController, viewCtrl: ViewController, app: IonicApp, config: Config, keyboard: Keyboard, elementRef: ElementRef, compiler: Compiler, viewManager: AppViewManager, zone: NgZone, renderer: Renderer);
/**
* @private
*/
ngOnInit(): void;
}