From 631472d3c100f513f0a844c48d807c268ae66954 Mon Sep 17 00:00:00 2001 From: Tim Lancina Date: Mon, 5 Oct 2015 15:24:37 -0500 Subject: [PATCH] nav doc tweaks --- ionic/components/nav/nav-controller.ts | 36 +++++++++++++------------- ionic/components/nav/nav.ts | 6 ++++- ionic/components/tabs/tab.ts | 20 ++++++++++---- ionic/components/tabs/tabs.ts | 15 +++++++---- ionic/config/decorators.ts | 2 +- 5 files changed, 49 insertions(+), 30 deletions(-) diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index ddacc08f0c..c966a6ab72 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -10,6 +10,9 @@ import {SwipeBackGesture} from './swipe-back'; import * as util from 'ionic/util'; /** + * _For examples on the basic usage of NavController, check out the [Navigation section](../../../../components/#navigation) + * of the Component docs._ + * * NavController is the base class for navigation controller components like * [`Nav`](../Nav/) and [`Tab`](../../Tabs/Tab/). You use navigation controllers * to navigate to [views](#creating_views) in your app. At a basic level, a @@ -18,27 +21,23 @@ import * as util from 'ionic/util'; * an app by pushing and popping views or inserting and removing them at * arbitrary locations in history. * - * The current view is the last one in the array, or the top of the stack if we think of it - * that way. [Pushing](#push) a new view onto the top of - * the navigation stack causes the new view to be animated in, while [popping](#pop) the current - * view will navigate to the previous view in the stack. - * - * For examples on the basic usage of NavController, check out the [Navigation section](../../../../components/#navigation) - * of the Component docs. The following is a more in depth explanation of some - * of the features of NavController. + * The current view is the last one in the array, or the top of the stack if we + * think of it that way. [Pushing](#push) a new view onto the top of the + * navigation stack causes the new view to be animated in, while [popping](#pop) + * the current view will navigate to the previous view in the stack. * * Unless you are using a directive like [NavPush](../NavPush/), or need a * specific NavController, most times you will inject and use a reference to the * nearest NavController to manipulate the navigation stack. * *

Injecting NavController

- * Injecting NavController will always get you an instance of the nearest NavController, - * regardless of whether it is a Tab or a Nav. + * Injecting NavController will always get you an instance of the nearest + * NavController, regardless of whether it is a Tab or a Nav. * * Behind the scenes, when Ionic instantiates a new NavController, it creates an - * injector with NavController bound to that instance (usually either a Nav or Tab) - * and adds the injector to its own bindings. For more information on binding - * and dependency injection, see [Binding and DI](). + * injector with NavController bound to that instance (usually either a Nav or + * Tab) and adds the injector to its own bindings. For more information on + * binding and dependency injection, see [Binding and DI](). * * ```ts * // class NavController @@ -48,8 +47,8 @@ import * as util from 'ionic/util'; * ]); * ``` * - * That way you don't need to worry about getting a hold of the proper NavController - * for views that may be used in either a Tab or a Nav: + * That way you don't need to worry about getting a hold of the proper + * NavController for views that may be used in either a Tab or a Nav: * * ```ts * class MyPage { @@ -80,9 +79,10 @@ import * as util from 'ionic/util'; * DOM in a similar fashion to Angular's [DynamicComponentLoader](https://angular.io/docs/js/latest/api/core/DynamicComponentLoader-interface.html), * and animates it into view. * - * By default, views are cached and left in the DOM if they are navigated away from but - * still in the navigation stack (the exiting view on a `push()` for example). They are - * destroyed when removed from the navigation stack (on [pop()](#pop) or [setRoot()](#setRoot)). + * By default, views are cached and left in the DOM if they are navigated away + * from but still in the navigation stack (the exiting view on a `push()` for + * example). They are destroyed when removed from the navigation stack (on + * [pop()](#pop) or [setRoot()](#setRoot)). * * *

Lifecycle events

diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts index e8ad692f59..834ec23f3c 100644 --- a/ionic/components/nav/nav.ts +++ b/ionic/components/nav/nav.ts @@ -4,7 +4,11 @@ import {IonicComponent} from '../../config/decorators'; import {NavController} from './nav-controller'; /** - * Nav is a basic navigation controller component. As a subclass of [NavController](../NavController/) + * _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 views in your app and manipulate the navigation stack. * Nav automatically animates transitions between views for you. * diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts index 9c37e6ead3..2deeb70da4 100644 --- a/ionic/components/tabs/tab.ts +++ b/ionic/components/tabs/tab.ts @@ -6,11 +6,18 @@ import {Tabs} from './tabs'; /** - * Tab components are basic navigation controllers used with [Tabs](). Much like - * [Nav](), they are a subclass of [NavController]() and are used to navigate to - * views and manipulate the navigation stack of a particular tab. + * _For basic Tabs usage, see the [Tabs section](../../../../components/#tabs) + * of the Component docs._ * - * For basic Tabs usage, see the [Tabs section]() of the component docs. + * Tab components are basic navigation controllers used with Tabs. Much like + * Nav, they are a subclass of NavController and can be used to navigate + * to views and manipulate the navigation stack of a particular tab. + * + * For more information on using navigation controllers like Tab or [Nav](../../nav/Nav/), + * take a look at the [NavController API reference](../NavController/). + * + * See the [Tabs API reference](../Tabs/) for more details on configuring Tabs + * and the TabBar. * * Like Nav, you must set a root view to be loaded initially for each Tab with * the 'root' property: @@ -29,8 +36,11 @@ import {Tabs} from './tabs'; * } * } * ``` + *

Tab Properties

+ * The Tabs component automatically creates the TabBar from the properties you + * set on each Tab. * - * To change the title and icon for each tab, use the `tab-title` and `tab-icon` + * To change the title and icon, use the `tab-title` and `tab-icon` * properties: * ```html * diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index 0d3093151d..40f3451c90 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -10,14 +10,19 @@ import * as dom from 'ionic/util/dom'; /** - * The Tabs component is a container with a [TabBar]() and any number of - * individual [Tab]() components. On iOS, the TabBar is placed on the bottom of + * _For basic Tabs usage, see the [Tabs section](../../../../components/#tabs) + * of the Component docs._ + * + * The Tabs component is a container with a TabBar and any number of + * individual Tab components. On iOS, the TabBar is placed on the bottom of * the screen, while on Android it is at the top. * - * For basic Tabs usage, see the [Tabs section](../../../../components/#tabs) of the component docs. * See the [Tab API reference](../Tab/) for more details on individual Tab components. * - * You can override the platform specific TabBar placement by using the + * The TabBar is automatically created for you using the + * [properties you set on each Tab](../Tab/#tab_properties). + * + * To override the platform specific TabBar placement, use the * `tab-bar-placement` property: * * ```ts @@ -51,7 +56,7 @@ import * as dom from 'ionic/util/dom'; * } * ``` * The [tabs](#tabs) property is an array of all child [Tab](../Tab/) components - * of this Tabs component. + * of that Tabs component. * */ @IonicComponent({ diff --git a/ionic/config/decorators.ts b/ionic/config/decorators.ts index 02be79de1e..00ecd1b831 100644 --- a/ionic/config/decorators.ts +++ b/ionic/config/decorators.ts @@ -16,7 +16,7 @@ class IonicViewImpl extends View { /** * the IonicView decorator indicates that the decorated class is an Ionic - * navigation view, meaning it can be navigated to using a [NavController](../../Nav/NavController/) + * navigation view, meaning it can be navigated to using a [NavController](../../Nav/NavController/#creating_views) * * Ionic views are automatically wrapped in ``, so although you may * see these tags if you inspect your markup, you don't need to include them in