<commit_before>import {Component, Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef, ViewChild, ViewChildren, EventEmitter, Output, Input, Renderer, Type, ViewEncapsulation} from 'angular2/core';
import {NgFor, NgIf} from 'angular2/common';

import {IonicApp} from '../app/app';
import {Config} from '../../config/config';
import {Tab} from './tab';
import {TabButton} from './tab-button';
import {TabHighlight} from './tab-highlight';
import {Ion} from '../ion';
import {Platform} from '../../platform/platform';
import {NavController} from '../nav/nav-controller';
import {ViewController} from '../nav/view-controller';
import {Icon} from '../icon/icon';
import {rafFrames} from '../../util/dom';
import {isBlank, isTrueProperty} from '../../util/util';


/**
 * @name Tabs
 * @description
 * Tabs make it easy to navigate between different pages or functional
 * aspects of an app. The Tabs component, written as `<ion-tabs>`, 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
 * `<ion-tabs>` 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 `<ion-tabs>` 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
 * <ion-tabs selectedIndex="2">
 *   <ion-tab [root]="tab1Root"></ion-tab>
 *   <ion-tab [root]="tab2Root"></ion-tab>
 *   <ion-tab [root]="tab3Root"></ion-tab>
 * </ion-tabs>
 * ```
 *
 * 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 `<ion-tab>` element to have an
 * `id`. For example, set the `id` to `myTabs`:
 *
 * ```html
 * <ion-tabs id="myTabs">
 *   <ion-tab [root]="tab1Root"></ion-tab>
 *   <ion-tab [root]="tab2Root"></ion-tab>
 *   <ion-tab [root]="tab3Root"></ion-tab>
 * </ion-tabs>
 * ```
 *
 * 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);
 * }
 *```
 *
 *
 * @usage
 * ```html
 * <ion-tabs>
 *   <ion-tab [root]="tabRoot"></ion-tab>
 * </ion-tabs>
 * ```
 *
 * @demo /docs/v2/demos/tabs/
 *
 * @see {@link /docs/v2/components#tabs Tabs Component Docs}
 * @see {@link ../Tab Tab API Docs}
 * @see {@link ../../config/Config Config API Docs}
 *<commit_msg>docs(tabs): update API docs for tabs<commit_after>import {Component, Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef, ViewChild, ViewChildren, EventEmitter, Output, Input, Renderer, Type, ViewEncapsulation} from 'angular2/core';
import {NgFor, NgIf} from 'angular2/common';

import {IonicApp} from '../app/app';
import {Config} from '../../config/config';
import {Tab} from './tab';
import {TabButton} from './tab-button';
import {TabHighlight} from './tab-highlight';
import {Ion} from '../ion';
import {Platform} from '../../platform/platform';
import {NavController} from '../nav/nav-controller';
import {ViewController} from '../nav/view-controller';
import {Icon} from '../icon/icon';
import {rafFrames} from '../../util/dom';
import {isBlank, isTrueProperty} from '../../util/util';


/**
 * @name Tabs
 * @description
 * Tabs make it easy to navigate between different pages or functional
 * aspects of an app. The Tabs component, written as `<ion-tabs>`, 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
 * `<ion-tabs>` 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 `<ion-tabs>` 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
 * <ion-tabs selectedIndex="2">
 *   <ion-tab [root]="tab1Root"></ion-tab>
 *   <ion-tab [root]="tab2Root"></ion-tab>
 *   <ion-tab [root]="tab3Root"></ion-tab>
 * </ion-tabs>
 * ```
 *
 * 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 `<ion-tabs>` element to have
 * an `id`. For example, set the `id` to `myTabs`:
 *
 * ```html
 * <ion-tabs id="myTabs">
 *   <ion-tab [root]="tab1Root"></ion-tab>
 *   <ion-tab [root]="tab2Root"></ion-tab>
 *   <ion-tab [root]="tab3Root"></ion-tab>
 * </ion-tabs>
 * ```
 *
 * Then in your JavaScript you can grab the `Tabs` instance and call `select()`.
 * In the following code `app` is of type [`IonicApp`](../../app/IonicApp/):
 *
 *```js
 * constructor(app: IonicApp) {
 *   this.app = app;
 * }
 *
 * onPageDidEnter() {
 *   let tabs = this.app.getComponent('myTabs');
 *   tabs.select(2);
 * }
 *```
 *
 *
 * @usage
 * ```html
 * <ion-tabs [selectedIndex]="mySelectedIndex" tabbarLayout="icon-bottom" secondary>
 *   <ion-tab [root]="tab1Root"></ion-tab>
 *   <ion-tab [root]="tab2Root"></ion-tab>
 *   <ion-tab [root]="tab3Root"></ion-tab>
 * </ion-tabs>
 * ```
 *
 * @demo /docs/v2/demos/tabs/
 *
 * @see {@link /docs/v2/components#tabs Tabs Component Docs}
 * @see {@link ../Tab Tab API Docs}
 * @see {@link ../../config/Config Config API Docs}
 *
{'fraction_non_alphanumeric': 0.16454293628808864, 'fraction_numerical': 0.004570637119113574, 'mean_word_length': 3.628846153846154, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 55, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6861352', 'n_tokens_mistral': 2313, 'n_tokens_neox': 2277, 'n_words': 846}