javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(tabs): move selecting tab code down to usage

Browse Source 
add more basics to usage.

references #5819
This commit is contained in:
Brandy Carney
2016-04-14 11:53:33 -04:00
parent c1d82f49fc
commit ccb6724f59
1 changed files with 46 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
ionic/components/tabs/tabs.ts
View File

@ -47,7 +47,44 @@ import {isBlank, isTrueProperty} from '../../util/util';
*
* 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:
* on the `<ion-tabs>` element, or you can call `select()` from the `Tabs`
* instance after creation. See usage below for more information.
*
* @usage
*
* You can add a basic tabs template to a `@Page` using the following
* template:
*
* ```html
* <ion-tabs>
* <ion-tab [root]="tab1Root"></ion-tab>
* <ion-tab [root]="tab2Root"></ion-tab>
* <ion-tab [root]="tab3Root"></ion-tab>
* </ion-tabs>
* ```
*
* Where `tab1Root`, `tab2Root`, and `tab3Root` are each a page:
*
*```ts
* @Page({
* templateUrl: 'build/pages/tabs/tabs.html'
* })
* export class TabsPage {
* // this tells the tabs component which Pages
* // should be each tab's root Page
* tab1Root = Page1;
* tab2Root = Page2;
* tab3Root = Page3;
*
* constructor() {
*
* }
* }
*```
*
* By default, the first tab will be selected upon navigation to the
* Tabs page. We can change the selected tab by using `selectedIndex`
* on the `<ion-tabs>` element:
*
* ```html
* <ion-tabs selectedIndex="2">
@ -58,9 +95,12 @@ import {isBlank, isTrueProperty} from '../../util/util';
* ```
*
* 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 value of `id` to `myTabs`:
* root set to `tab3Root`. If you wanted to change it dynamically from
* your class, you could use [property binding](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding).
*
* Alternatively, you can grab the `Tabs` instance and call the `select()`
* method. This requires the `<ion-tabs>` element to have an `id`. For
* example, set the value of `id` to `myTabs`:
*
* ```html
* <ion-tabs id="myTabs">
@ -70,11 +110,11 @@ import {isBlank, isTrueProperty} from '../../util/util';
* </ion-tabs>
* ```
*
* Then in your JavaScript you can grab the `Tabs` instance and call `select()`,
* Then in your class you can grab the `Tabs` instance and call `select()`,
* passing the index of the tab as the argument. In the following code `app` is
* of type [`IonicApp`](../../app/IonicApp/):
*
*```js
*```ts
* constructor(app: IonicApp) {
* this.app = app;
* }
@ -85,16 +125,6 @@ import {isBlank, isTrueProperty} from '../../util/util';
* }
*```
*
*
* @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}