javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 22:17:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(nav, tabs): moved details from component docs to api docs where applicable (#7471)

Browse Source 
moved details from component docs to api docs where applicable
This commit is contained in:
Dan Bucholtz
2016-08-01 13:44:56 -05:00
committed by GitHub
parent 0a57213901
commit 8bf1a353fd
4 changed files with 187 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/nav/nav.ts
View File

@ -11,21 +11,17 @@ 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.
* `ion-nav` is the declarative component for a [NavController](../NavController/).
*
* For more information on using navigation controllers like Nav or [Tab](../../Tabs/Tab/),
* For more information on using nav controllers like Nav or [Tab](../../Tabs/Tab/),
* take a look at the [NavController API Docs](../NavController/).
*
*
* @usage
* You must set a root page to be loaded initially by any Nav you create, using
* the 'root' property:
*
* @usage
* ```ts
* import { Component } from '@angular/core';
* import { ionicBootstrap } from 'ionic-angular';
@ -35,73 +31,15 @@ import { ViewController } from './view-controller';
* template: `<ion-nav [root]="root"></ion-nav>`
* })
* class MyApp {
* root = GettingStartedPage;
* private root: any = GettingStartedPage;
*
* constructor(){
* }
* }
*
* ionicBootstrap(MyApp);
* ```
*
* ### Back Navigation
*
* 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 `swipeBackEnabled` property will allow you to
* swipe to go back:
* ```html
* <ion-nav swipeBackEnabled="false" [root]="rootPage"></ion-nav>
* ```
*
* Here is a diagram of how Nav animates smoothly between pages:
*
* <div class="highlight less-margin">
* <pre>
* +-------+
* | App |
* +---+---+
* &lt;ion-app&gt;
* |
* +------------+-------------+
* | Ionic Nav Controller |
* +------------+-------------+
* &lt;ion-nav&gt;
* |
* |
* Page 3 +--------------------+ LoginPage
* Page 2 +--------------------+ |
* Page 1 +--------------------+ | | +--------------------+
* | | Header |&lt;-----------------| Login |
* +--------------------+ | | +--------------------+
* | | | | | | | Username: |
* | | | | | | | Password: |
* | | | Page 3 is | | | | |
* | | | only content | | | | |
* | | | |&lt;-----------------| |
* | | | | | | | |
* | | | | | | | |
* | +------------------|-+ | | |
* | | Footer |-|-+ | |
* | +------------------|-+ | |
* +--------------------+ +--------------------+
*
* +--------------------+ +--------------------+ +--------------------+
* | Header | | Content | | Content |
* +--------------------+ | | | |
* | Content | | | | |
* | | | | | |
* | | | | | |
* | | | | | |
* | | | | | |
* | | | | | |
* | | | | | |
* | | | | | |
* | | +--------------------+ | |
* | | | Footer | | |
* +--------------------+ +--------------------+ +--------------------+
*
* </pre>
* </div>
*
* @demo /docs/v2/demos/navigation/
* @see {@link /docs/v2/components#navigation Navigation Component Docs}