diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts index 0818bc2977..fcd98b00e8 100644 --- a/ionic/components/nav/nav.ts +++ b/ionic/components/nav/nav.ts @@ -5,12 +5,27 @@ import {NavController} from './nav-controller'; /** * Nav is a basic navigation controller component. As a subclass of [NavController](../NavController/) - * you use it to navigate to views in your app. Nav automatically animates - * transitions between views for you. + * you use it to navigate to views in your app and manipulate the navigation stack. + * Nav automatically animates transitions between views for you. * * For more information on using navigation controllers like Nav or [Tabs](../../Tabs/Tabs/), * take a look at the [NavController API reference](../NavController/). * + * You must set a root view to be loaded initially for any Nav you create, using + * the 'root' property: + * + * ```ts + * import {GettingStartedPage} from 'getting-started'; + * @App({ + * template: `` + * }) + * class MyApp { + * constructor(){ + * this.rootPage = GettingStartedPage; + * } + * } + * ``` + * *

Back navigation

* If a [view](../NavController/#creating_views) you navigate to has a [NavBar](../NavBar/), * Nav will automatically add a back button to it if there is a view diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts index 920cebb005..7f9775ce42 100644 --- a/ionic/components/tabs/tab.ts +++ b/ionic/components/tabs/tab.ts @@ -6,14 +6,37 @@ import {Tabs} from './tabs'; /** - * @name ionTab - * @requires ionTabs - * @description - * Contains a tab's content. The content only exists while the given tab is selected. + * 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. * - * @usage + * For basic Tabs usage, see the [Tabs section]() of the component docs. + * + * Like Nav, you must set a root view to be loaded initially for each Tab with + * the 'root' property: + * ``` + * import {GettingStartedPage} from 'getting-started'; + * @App({ + * template: ` + * + * + * ` + * }) + * class MyApp { + * constructor(){ + * this.tabOneRoot = GettingStartedPage; + * this.tabTwoRoot = GettingStartedPage; + * } + * } + * ``` + * + * To change the title and icon for each tab, use the `tab-title` and `tab-icon` + * properties: * ```html - * + * + * + * + * * ``` */ @Component({ diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index 6089652454..0d3093151d 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -10,28 +10,49 @@ import * as dom from 'ionic/util/dom'; /** - * @name ionTabs - * @description - * Powers a multi-tabbed interface with a Tab Bar and a set of "pages" - * that can be tabbed through. + * 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. * - * Assign any tabs attribute to the element to define its look and feel. + * 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. * - * For iOS, tabs will appear at the bottom of the screen. For Android, tabs - * will be at the top of the screen, below the nav-bar. This follows each platform's - * design specification, but can be configured with IonicConfig. + * You can override the platform specific TabBar placement by using the + * `tab-bar-placement` property: * - * See the ionTab component's documentation for more details on individual tabs. - * - * @usage - * ```html - * - * - * - * + * ```ts + * + * * * ``` * + * To change the location of the icons in the TabBar, use the `tab-bar-icons` + * property: + * ```ts + * + * + * + * ``` + * + * You can select tabs programatically by injecting Tabs into any child + * component, and using the [select()](#select) method: + * ```ts + * @IonicView({ + * template: `` + * }) + * class TabOne { + * constructor(tabs: Tabs){ + * this.tabs = tabs; + * } + * + * goToTabTwo() { + * this.tabs.select(this.tabs.tabs[1]); + * } + * } + * ``` + * The [tabs](#tabs) property is an array of all child [Tab](../Tab/) components + * of this Tabs component. + * */ @IonicComponent({ selector: 'ion-tabs', @@ -110,6 +131,10 @@ export class Tabs extends NavController { } + /** + * @private + * TODO + */ addTab(tab) { this.add(tab.viewCtrl); @@ -161,6 +186,7 @@ export class Tabs extends NavController { } /** + * @private * "Touch" the active tab, either going back to the root view of the tab * or scrolling the tab to the top */ @@ -173,6 +199,10 @@ export class Tabs extends NavController { } } + /** + * TODO + * @return TODO + */ get tabs() { return this.instances(); } @@ -180,6 +210,7 @@ export class Tabs extends NavController { } /** + * @private * TODO */ @Directive({ @@ -225,7 +256,10 @@ class TabButton extends Ion { } } - +/** + * @private + * TODO + */ @Directive({ selector: 'tab-highlight' }) @@ -255,6 +289,10 @@ class TabHighlight { } +/** + * @private + * TODO + */ @Directive({selector: 'template[navbar-anchor]'}) class TabNavBarAnchor { constructor(