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

docs(demos): add tabs demo with scenarios

Browse Source 
references driftyco/ionic-site#397
This commit is contained in:
Brandy Carney
2016-02-05 16:07:56 -05:00
parent ae764860ec
commit 2ca0068c56
4 changed files with 101 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
demos/tabs/index.ts Normal file
View File

@ -0,0 +1,6 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html',
})
class ApiDemoApp {}

93
demos/tabs/main.html Normal file
View File

@ -0,0 +1,93 @@
<ion-content>
<!-- Text -->
<ion-tabs no-navbar>
<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 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 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 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 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" [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" [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" [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" [root]="root"></ion-tab>
<ion-tab tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- primary color tabbar with a badge -->
<ion-tabs no-navbar primary>
<ion-tab tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabIcon="heart" [root]="root" tabBadge="23" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
</ion-content>
<style>
ion-tabs[no-navbar] {
position: relative;
top: auto;
height: auto;
margin-bottom: 20px;
}
ion-tabs[no-navbar] > ion-navbar-section,
ion-tabs[no-navbar] > ion-content-section {
display: none !important;
}
</style>

1
ionic/components/tabs/tab.ts
View File

@ -76,6 +76,7 @@ import {TabButton} from './tab-button';
* @property {String} [tabBadgeStyle] - set the badge color for this tab
* @property {Any} (select) - method to call when the current tab is selected
*
* @demo /docs/v2/demos/tabs/
*/
@Component({
selector: 'ion-tab',

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

@ -36,6 +36,7 @@ import {isUndefined, isTrueProperty} from '../../util/util';
* individual Tab components. On iOS, the TabBar is placed on the bottom of
* the screen, while on Android it is at the top.
*
* @demo /docs/v2/demos/tabs/
* @see {@link /docs/v2/components#tabs Tabs Component Docs}
* @see {@link ../Tab Tab API Docs}
*/