Nav
For a quick walkthrough of navigation in Ionic, check out the Navigation section 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, take a look at the NavController API Docs.
You must set a root page (where page is any @Page component) to be loaded initially by any Nav you create, using the 'root' property:
Component
selector: ion-nav
Usage
import {GettingStartedPage} from 'getting-started';
@App({
template: `<ion-nav [root]="rootPage"></ion-nav>`
})
class MyApp {
constructor(){
this.rootPage = GettingStartedPage;
}
}
Back navigation
If a page you navigate to has a 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 swipeBackEnabled property will allow you to
swipe to go back:
<ion-nav swipeBackEnabled="false" [root]="rootPage"></ion-nav>
Here is a diagram of how Nav animates smoothly between pages:
+-------+
| 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 | | |
+--------------------+ +--------------------+ +--------------------+
Input Properties
| Attr | Type | Details |
|---|---|---|
| root | Page |
The Page component to load as the root page within this nav. |
| swipeBackEnabled | boolean |
Whether it's possible to swipe-to-go-back on this nav controller or not. |