diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index b81167a8f4..5ea57da809 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -18,12 +18,68 @@ import {isBlank, isTrueProperty} from '../../util/util'; /** * @name Tabs * @description - * _For basic Tabs usage, see the [Tabs section](../../../../components/#tabs) - * of the Component docs._ + * Tabs make it easy to navigate between different pages or functional + * aspects of an app. The Tabs component, written as ``, is + * a container of individual [Tab](../Tab/) components. + * + * ### Placement + * + * The position of the tabs relative to the content varies based on + * the mode. By default the tabs are placed at the bottom of the screen + * in `ios` mode, and at the top for `wp` and `md` mode. You can + * configure the position using the `tabbarPlacement` property on the + * `` element, or in your app's [config](../../config/Config/). + * See the [Input Properties](#input-properties) below for the available + * values of `tabbarPlacement`. + * + * ### Layout + * + * The layout for all of the tabs can be defined using the `tabbarLayout` + * property. If the individual tab has a title and icon, the icons will + * show on top of the title in a tab. All tabs can be changed by setting + * the value of `tabbarLayout` on the `` element, or in your + * app's [config](../../config/Config/). For example, this is useful if + * you want to show tabs with a title only on Android, but show icons + * and a title for iOS. See the [Input Properties](#input-properties) + * below for the available values of `tabbarLayout`. + * + * ### Selecting a Tab + * + * There are different ways you can select a specific tab from the tabs + * component. You can use the `selectedIndex` property to set the index + * on creation of the tabs: + * + * ```html + * + * + * + * + * + * ``` + * + * Since the index starts at `0`, this will select the 3rd tab which has + * root set to `tab3Root`. You can also grab the `Tabs` instance and call + * the `select()` method. This requires the `` element to have an + * `id`. For example, set the `id` to `myTabs`: + * + * ```html + * + * + * + * + * + * ``` + * + * Then in your JavaScript you can grab the `Tabs` instance and call `select()`. + * In the following code `app` is of type `IonicApp`: + * + *```js + * onPageDidEnter() { + * let tabs = this.app.getComponent('myTabs'); + * tabs.select(2); + * } + *``` * - * 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. * * @usage * ```html @@ -36,6 +92,7 @@ import {isBlank, isTrueProperty} from '../../util/util'; * * @see {@link /docs/v2/components#tabs Tabs Component Docs} * @see {@link ../Tab Tab API Docs} + * @see {@link ../../config/Config Config API Docs} * */ @Component({