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

docs(components): icon tabs example

Browse Source
This commit is contained in:
Drew Rygh
2015-11-03 13:14:39 -06:00
parent bb8f87faa7
commit 8b0e56ce20
3 changed files with 88 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
demos/component-docs/helpers.ts
View File

@ -54,7 +54,11 @@ import {ModalsPage} from './modals/modals';
import {NavigationPage} from './navigation/navigation'; import {NavigationPage} from './navigation/navigation';
import {PopupsPage} from './popups/popups'; import {PopupsPage} from './popups/popups';
import {SlidesPage} from './slides/slides'; import {SlidesPage} from './slides/slides';
import {TabsPage} from './tabs/tabs'; import {TabsPage} from './tabs/tabs';
import {TabsIconPage} from './tabs/tabs-icon';
import {TabsIconTextPage} from './tabs/tabs-icon-text';
@Directive({ @Directive({
selector: '.android-attr', selector: '.android-attr',
@ -160,7 +164,10 @@ export function getPageFor(hash) {
'navigation': NavigationPage, 'navigation': NavigationPage,
'popups': PopupsPage, 'popups': PopupsPage,
'slides': SlidesPage, 'slides': SlidesPage,
'tabs': TabsPage
'tabs': TabsPage,
'tabs-icon': TabsIconPage,
'tabs-icon-text': TabsIconTextPage,
}[hash] }[hash]
} }

40
demos/component-docs/tabs/tabs-icon-text.ts Normal file
View File

@ -0,0 +1,40 @@
import {NavController, NavParams} from 'ionic/ionic';
import {Page, ViewController} from 'ionic/ionic';
import {forwardRef} from 'angular2/angular2';
import * as helpers from '../helpers';
@Page({
template: '' +
'<ion-navbar *navbar hide-back-button class="android-attr">' +
'<ion-title>Tabs</ion-title>' +
'</ion-navbar>' +
'<ion-content>' +
'</ion-content>',
directives: [forwardRef(() => helpers.AndroidAttribute)],
})
class TabIconTextCtrl {
constructor(nav: NavController, view: ViewController) {
this.nav = nav;
this.view = view;
}
}
@Page({
template:
'<ion-tabs>' +
'<ion-tab tab-icon="water" tab-title="Water" [root]="tabOne"></ion-tab>' +
'<ion-tab tab-icon="leaf" tab-title="Life" [root]="tabTwo"></ion-tab>' +
'<ion-tab tab-icon="flame" tab-title="Fire" [root]="tabThree"></ion-tab>' +
'<ion-tab tab-icon="magnet" tab-title="Force" [root]="tabFour"></ion-tab>' +
'</ion-tabs>',
})
export class TabsIconTextPage {
constructor(nav: NavController, params: NavParams) {
this.nav = nav;
this.tabOne = TabIconTextCtrl;
this.tabTwo = TabIconTextCtrl;
this.tabThree = TabIconTextCtrl;
this.tabFour = TabIconTextCtrl;
}
}

40
demos/component-docs/tabs/tabs-icon.ts Normal file
View File

@ -0,0 +1,40 @@
import {NavController, NavParams} from 'ionic/ionic';
import {Page, ViewController} from 'ionic/ionic';
import {forwardRef} from 'angular2/angular2';
import * as helpers from '../helpers';
@Page({
template: '' +
'<ion-navbar *navbar hide-back-button class="android-attr">' +
'<ion-title>Tabs</ion-title>' +
'</ion-navbar>' +
'<ion-content>' +
'</ion-content>',
directives: [forwardRef(() => helpers.AndroidAttribute)],
})
class TabIconCtrl {
constructor(nav: NavController, view: ViewController) {
this.nav = nav;
this.view = view;
}
}
@Page({
template:
'<ion-tabs>' +
'<ion-tab tab-icon="contact" [root]="tabOne"></ion-tab>' +
'<ion-tab tab-icon="compass" [root]="tabTwo"></ion-tab>' +
'<ion-tab tab-icon="analytics" [root]="tabThree"></ion-tab>' +
'<ion-tab tab-icon="settings" [root]="tabFour"></ion-tab>' +
'</ion-tabs>',
})
export class TabsIconPage {
constructor(nav: NavController, params: NavParams) {
this.nav = nav;
this.tabOne = TabIconCtrl;
this.tabTwo = TabIconCtrl;
this.tabThree = TabIconCtrl;
this.tabFour = TabIconCtrl;
}
}