javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +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

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({
templateUrl: 'main.html'
})
class E2EApp {}
class E2EApp {
constructor() {
this.root = E2EPage;
}
}
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 -->
<ion-tabs no-navbar>
<ion-tab tabTitle="Recents"></ion-tab>
<ion-tab tabTitle="Favorites"></ion-tab>
<ion-tab tabTitle="Settings"></ion-tab>
<ion-tab tabTitle="Recents" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- Icons -->
<ion-tabs no-navbar>
<ion-tab tabIcon="call"></ion-tab>
<ion-tab tabIcon="heart"></ion-tab>
<ion-tab tabIcon="settings"></ion-tab>
<ion-tabs no-navbar selectedIndex="1">
<ion-tab tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- Icons on top of text -->
<ion-tabs no-navbar>
<ion-tab tabTitle="Location" tabIcon="navigate"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="star"></ion-tab>
<ion-tab tabTitle="Radio" tabIcon="musical-notes"></ion-tab>
<ion-tabs no-navbar selectedIndex="2">
<ion-tab tabTitle="Location" tabIcon="navigate" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="star" [root]="root"></ion-tab>
<ion-tab tabTitle="Radio" tabIcon="musical-notes" [root]="root"></ion-tab>
</ion-tabs>
<!-- Icons below text -->
<ion-tabs tabbarIcons="bottom" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
<ion-tabs tabbarIcons="bottom" no-navbar selectedIndex="1">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- Icons right of text -->
<ion-tabs tabbarIcons="right" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
<ion-tabs tabbarIcons="right" no-navbar selectedIndex="0">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- Icons left of text -->
<ion-tabs tabbarIcons="left" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- No icons -->
<ion-tabs tabbarIcons="hide" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- No overflow text -->
<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 Temple of Doom"></ion-tab>
<ion-tab tabTitle="Indiana Jones and the Last Crusade"></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" [root]="root"></ion-tab>
<ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>
</ion-tabs>
<!-- primary color tabbar -->
<ion-tabs no-navbar primary>
<ion-tab tabIcon="call"></ion-tab>
<ion-tab tabIcon="heart"></ion-tab>
<ion-tab tabIcon="settings"></ion-tab>
<ion-tab tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>