docs(tab): add section about select

This commit is contained in:
mhartington
2015-12-21 14:52:01 -05:00
parent 23fe9c6a85
commit 4af71261cf
2 changed files with 45 additions and 4 deletions

View File

@@ -32,12 +32,53 @@ import {Tabs} from './tabs';
*
* See the [Tabs API reference](../Tabs/) for more details on configuring Tabs
* and the TabBar.
*
* For most cases, you can give tab a `[root]` property along with the component you want to load.
*
* ```html
* <ion-tabs>
* <ion-tab [root]="chatRoot"><ion-tab>
* </ion-tabs>
* ```
*
* ```ts
* import {Chat} from '../chat/chat';
* export class Tabs {
* constructor(){
* // here we'll set the property of chatRoot to
* // the imported class of Chat
* this.chatRoot = Chat
* }
* }
* ```
*
* In other cases, you may not want to navigate to a new component, but just call a method.
* You can use the `(select)` event to call a method on your class.
*
* ```html
* <ion-tabs preloadTabs="false">
* <ion-tab (select)="chat()"></ion-tab>
* </ion-tabs>
* ```
*
* ```ts
* export class Tabs {
* constructor(modal: Modal){
* this.modal = modal;
* }
* chat() {
* this.modal.open(ChatPage);
* }
* }
* ```
* In this case, when we tap on the tab, we'll open a modal instead of loading a new component.
*
*
* @property {any} [root] - set the root page for this tab
* @property {any} [tabTitle] - set the title of this tab
* @property {any} [tabIcon] - set the icon for this tab
* @property {any} [select] - method to call when the current tab is selected
*
*/
@Component({
selector: 'ion-tab',

View File

@@ -84,7 +84,7 @@ export class Tabs extends Ion {
elementRef: ElementRef,
@Optional() viewCtrl: ViewController,
@Optional() navCtrl: NavController,
private platform: Platform
private _platform: Platform
) {
super(elementRef, config);
this.parent = navCtrl;
@@ -116,7 +116,7 @@ export class Tabs extends Ion {
this.preloadTabs = (this.preloadTabs !== "false" && this.preloadTabs !== false);
if (this._highlight) {
this.platform.onResize(() => {
this._platform.onResize(() => {
this._highlight.select(this.getSelected());
});
}