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

feat(tabs): add selectedIndex property to tabs

Browse Source
This commit is contained in:
Adam Bradley
2016-01-25 13:22:38 -06:00
parent 8f9727891b
commit 86ce9a0eec
3 changed files with 50 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,8 +46,8 @@ import {isUndefined} from '../../util/util';
'<ion-tabbar-section>' + '<ion-tabbar-section>' +
'<tabbar role="tablist">' + '<tabbar role="tablist">' +
'<a *ngFor="#t of _tabs" [tab]="t" class="tab-button" role="tab">' + '<a *ngFor="#t of _tabs" [tab]="t" class="tab-button" role="tab">' +
'<ion-icon [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></ion-icon>' + '<ion-icon *ngIf="t.tabIcon" [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></ion-icon>' +
'<span class="tab-button-text">{{t.tabTitle}}</span>' + '<span *ngIf="t.tabTitle" class="tab-button-text">{{t.tabTitle}}</span>' +
'<ion-badge *ngIf="t.tabBadge" class="tab-badge" [ngClass]="\'badge-\' + t.tabBadgeStyle">{{t.tabBadge}}</ion-badge>' + '<ion-badge *ngIf="t.tabBadge" class="tab-badge" [ngClass]="\'badge-\' + t.tabBadgeStyle">{{t.tabBadge}}</ion-badge>' +
'</a>' + '</a>' +
'<tab-highlight></tab-highlight>' + '<tab-highlight></tab-highlight>' +
@ -75,6 +75,7 @@ export class Tabs extends Ion {
navbarContainerRef: ViewContainerRef; navbarContainerRef: ViewContainerRef;
subPages: boolean; subPages: boolean;
@Input() selectedIndex: any;
@Input() preloadTabs: any; @Input() preloadTabs: any;
@Input() tabbarIcons: string; @Input() tabbarIcons: string;
@Input() tabbarPlacement: string; @Input() tabbarPlacement: string;
@ -133,8 +134,10 @@ export class Tabs extends Ion {
}); });
}); });
let selectedIndex = this.selectedIndex ? parseInt(this.selectedIndex, 10) : 0;
this._tabs.forEach((tab, index) => { this._tabs.forEach((tab, index) => {
if (index === 0) { if (index === selectedIndex) {
this.select(tab); this.select(tab);
} else if (this.preloadTabs) { } else if (this.preloadTabs) {
@ -206,10 +209,10 @@ export class Tabs extends Ion {
this._tabs.forEach(tab => { this._tabs.forEach(tab => {
tab.setSelected(tab === selectedTab); tab.setSelected(tab === selectedTab);
}); });
}
if (this._useHighlight) { if (this._useHighlight) {
this._highlight.select(selectedTab); this._highlight.select(selectedTab);
}
} }
selectedPage && selectedPage.didEnter(); selectedPage && selectedPage.didEnter();

12
ionic/components/tabs/test/tab-bar-scenarios/index.ts
View File

@ -1,9 +1,17 @@
import {App} from 'ionic/ionic'; import {App, Page} from 'ionic/ionic';
@Page({template:'hi'})
class E2EPage{}
@App({ @App({
templateUrl: 'main.html' templateUrl: 'main.html'
}) })
class E2EApp {} class E2EApp {
constructor() {
this.root = E2EPage;
}
}
document.body.innerHTML += '<link href="styles.css" rel="stylesheet">' document.body.innerHTML += '<link href="styles.css" rel="stylesheet">'

62
ionic/components/tabs/test/tab-bar-scenarios/main.html
View File

@ -1,71 +1,71 @@
<!-- Text --> <!-- Text -->
<ion-tabs no-navbar> <ion-tabs no-navbar>
<ion-tab tabTitle="Recents"></ion-tab> <ion-tab tabTitle="Recents" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites"></ion-tab> <ion-tab tabTitle="Favorites" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings"></ion-tab> <ion-tab tabTitle="Settings" [root]="root"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons --> <!-- Icons -->
<ion-tabs no-navbar> <ion-tabs no-navbar selectedIndex="1">
<ion-tab tabIcon="call"></ion-tab> <ion-tab tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabIcon="heart"></ion-tab> <ion-tab tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabIcon="settings"></ion-tab> <ion-tab tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons on top of text --> <!-- Icons on top of text -->
<ion-tabs no-navbar> <ion-tabs no-navbar selectedIndex="2">
<ion-tab tabTitle="Location" tabIcon="navigate"></ion-tab> <ion-tab tabTitle="Location" tabIcon="navigate" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="star"></ion-tab> <ion-tab tabTitle="Favorites" tabIcon="star" [root]="root"></ion-tab>
<ion-tab tabTitle="Radio" tabIcon="musical-notes"></ion-tab> <ion-tab tabTitle="Radio" tabIcon="musical-notes" [root]="root"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons below text --> <!-- Icons below text -->
<ion-tabs tabbarIcons="bottom" no-navbar> <ion-tabs tabbarIcons="bottom" no-navbar selectedIndex="1">
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab> <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab> <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab> <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons right of text --> <!-- Icons right of text -->
<ion-tabs tabbarIcons="right" no-navbar> <ion-tabs tabbarIcons="right" no-navbar selectedIndex="0">
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab> <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab> <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab> <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons left of text --> <!-- Icons left of text -->
<ion-tabs tabbarIcons="left" no-navbar> <ion-tabs tabbarIcons="left" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab> <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab> <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab> <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- No icons --> <!-- No icons -->
<ion-tabs tabbarIcons="hide" no-navbar> <ion-tabs tabbarIcons="hide" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab> <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab> <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab> <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- No overflow text --> <!-- No overflow text -->
<ion-tabs no-navbar> <ion-tabs no-navbar>
<ion-tab tabTitle="Indiana Jones and the Raiders of the Lost Ark"></ion-tab> <ion-tab tabTitle="Indiana Jones and the Raiders of the Lost Ark" [root]="root"></ion-tab>
<ion-tab tabTitle="Indiana Jones and the Temple of Doom"></ion-tab> <ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab>
<ion-tab tabTitle="Indiana Jones and the Last Crusade"></ion-tab> <ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- primary color tabbar --> <!-- primary color tabbar -->
<ion-tabs no-navbar primary> <ion-tabs no-navbar primary>
<ion-tab tabIcon="call"></ion-tab> <ion-tab tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabIcon="heart"></ion-tab> <ion-tab tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabIcon="settings"></ion-tab> <ion-tab tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs> </ion-tabs>