mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
docs(tab)
This commit is contained in:
@@ -9,6 +9,16 @@ import {Tabs} from './tabs';
|
||||
|
||||
|
||||
/**
|
||||
* @name Tab
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-tabs>
|
||||
* <ion-tab tab-title="Home" tab-icon="home" [root]="tabOneRoot"></ion-tab>
|
||||
* <ion-tab tab-title="Login" tab-icon="star" [root]="tabTwoRoot"></ion-tab>
|
||||
* </ion-tabs>
|
||||
* ```
|
||||
*
|
||||
* @description
|
||||
* _For basic Tabs usage, see the [Tabs section](../../../../components/#tabs)
|
||||
* of the Component docs._
|
||||
*
|
||||
@@ -21,36 +31,12 @@ import {Tabs} from './tabs';
|
||||
*
|
||||
* See the [Tabs API reference](../Tabs/) for more details on configuring Tabs
|
||||
* and the TabBar.
|
||||
|
||||
*
|
||||
* Like Nav, you must set a root page to be loaded initially for each Tab with
|
||||
* the 'root' property:
|
||||
* ```
|
||||
* import {GettingStartedPage} from 'getting-started';
|
||||
* @App({
|
||||
* template: `<ion-tabs>
|
||||
* <ion-tab [root]="tabOneRoot"></ion-tab>
|
||||
* <ion-tab [root]="tabTwoRoot"></ion-tab>
|
||||
* <ion-tabs>`
|
||||
* })
|
||||
* class MyApp {
|
||||
* constructor(){
|
||||
* this.tabOneRoot = GettingStartedPage;
|
||||
* this.tabTwoRoot = GettingStartedPage;
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
* <h3 id="tab_properties">Tab Properties</h3>
|
||||
* The Tabs component automatically creates the TabBar from the properties you
|
||||
* set on each Tab.
|
||||
*
|
||||
* To change the title and icon, use the `tab-title` and `tab-icon`
|
||||
* inputs:
|
||||
* ```html
|
||||
* <ion-tabs>
|
||||
* <ion-tab tab-title="Home" tab-icon="home" [root]="tabOneRoot"></ion-tab>
|
||||
* <ion-tab tab-title="Login" tab-icon="star" [root]="tabTwoRoot"></ion-tab>
|
||||
* <ion-tabs>
|
||||
* ```
|
||||
* @property [root] - set the root page for this tab
|
||||
* @property [tab-title] - set the title of this tab
|
||||
* @property [tab-icon] - set the icon for this tab
|
||||
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ion-tab',
|
||||
@@ -148,6 +134,9 @@ export class Tab extends NavController {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
setSelected(isSelected) {
|
||||
this.isSelected = isSelected;
|
||||
this.hideNavbars(!isSelected);
|
||||
@@ -163,10 +152,27 @@ export class Tab extends NavController {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* ```ts
|
||||
* export class MyClass{
|
||||
* constructor(tab: Tab){
|
||||
* this.tab = tab;
|
||||
* console.log(this.tab.index);
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* @returns {Number} Returns the index of this page within its NavController.
|
||||
*
|
||||
*/
|
||||
get index() {
|
||||
return this.parent.getIndex(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onDestroy() {
|
||||
clearTimeout(this._loadTimer);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user