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

docs(demos): set tabbar color dynamically

Browse Source
This commit is contained in:
Drew Rygh
2015-11-19 17:52:05 -06:00
parent 4a1437278d
commit 0865292b88
4 changed files with 24 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,10 @@ import * as tabs from './tabs/tabs';
@Directive({ @Directive({
selector: '.android-attr', selector: '[android-attr]',
defaultInputs: {
'androidAttr': 'primary'
},
}) })
export class AndroidAttribute { export class AndroidAttribute {

8
demos/component-docs/tabs/basic/pages.ts
View File

@ -1,12 +1,12 @@
import {NavController, NavParams} from 'ionic/ionic'; import {NavController, NavParams} from 'ionic/ionic';
import {Page, ViewController} from 'ionic/ionic'; import {Page, ViewController, Platform} from 'ionic/ionic';
import {forwardRef} from 'angular2/angular2'; import {forwardRef} from 'angular2/angular2';
import * as helpers from '../../helpers'; import * as helpers from '../../helpers';
@Page({ @Page({
template: '' + template: '' +
'<ion-navbar *navbar hide-back-button class="android-attr">' + '<ion-navbar *navbar hide-back-button [attr.primary]="isAndroid ? \'\' : null">' +
'<ion-title>Tabs</ion-title>' + '<ion-title>Tabs</ion-title>' +
'</ion-navbar>' + '</ion-navbar>' +
'<ion-content>' + '<ion-content>' +
@ -14,7 +14,9 @@ import * as helpers from '../../helpers';
directives: [forwardRef(() => helpers.AndroidAttribute)], directives: [forwardRef(() => helpers.AndroidAttribute)],
}) })
class TabTextPage { class TabTextPage {
constructor() { constructor(platform: Platform) {
this.platform = platform;
this.isAndroid = platform.is('android');
} }
} }

18
demos/component-docs/tabs/icon-text/pages.ts
View File

@ -1,30 +1,32 @@
import {NavController, NavParams} from 'ionic/ionic'; import {NavController, NavParams} from 'ionic/ionic';
import {Page, ViewController} from 'ionic/ionic'; import {Page, ViewController, Platform} from 'ionic/ionic';
import {forwardRef} from 'angular2/angular2'; import {forwardRef} from 'angular2/angular2';
import * as helpers from '../../helpers'; import * as helpers from '../../helpers';
@Page({ @Page({
template: '' + template: '' +
'<ion-navbar *navbar hide-back-button class="android-attr">' + '<ion-navbar *navbar hide-back-button [attr.royal]="isAndroid ? \'\' : null">' +
'<ion-title>Tabs</ion-title>' + '<ion-title>Tabs</ion-title>' +
'</ion-navbar>' + '</ion-navbar>' +
'<ion-content>' + '<ion-content>' +
'</ion-content>', '</ion-content>',
directives: [forwardRef(() => helpers.AndroidAttribute)], directives: [forwardRef(() => helpers.AndroidAttribute)],
}) })
class TabIconTextPage { class TabIconTextPage {
constructor() { constructor(platform: Platform) {
this.platform = platform;
this.isAndroid = platform.is('android');
} }
} }
@Page({ @Page({
template: template:
'<ion-tabs class="tabs-icon-text">' + '<ion-tabs class="tabs-icon-text">' +
'<ion-tab tab-icon="water" tab-title="Water" [root]="tabOne"></ion-tab>' + '<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="leaf" tab-title="Life" [root]="tabTwo"></ion-tab>' +
'<ion-tab tab-icon="flame" tab-title="Fire" [root]="tabThree"></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-tab tab-icon="magnet" tab-title="Force" [root]="tabFour"></ion-tab>' +
'</ion-tabs>', '</ion-tabs>',
}) })
export class IconTextPage { export class IconTextPage {

8
demos/component-docs/tabs/icon/pages.ts
View File

@ -1,12 +1,12 @@
import {NavController, NavParams} from 'ionic/ionic'; import {NavController, NavParams} from 'ionic/ionic';
import {Page, ViewController} from 'ionic/ionic'; import {Page, ViewController, Platform} from 'ionic/ionic';
import {forwardRef} from 'angular2/angular2'; import {forwardRef} from 'angular2/angular2';
import * as helpers from '../../helpers'; import * as helpers from '../../helpers';
@Page({ @Page({
template: '' + template: '' +
'<ion-navbar *navbar hide-back-button class="android-attr">' + '<ion-navbar *navbar hide-back-button [attr.danger]="isAndroid ? \'\' : null">' +
'<ion-title>Tabs</ion-title>' + '<ion-title>Tabs</ion-title>' +
'</ion-navbar>' + '</ion-navbar>' +
'<ion-content>' + '<ion-content>' +
@ -14,7 +14,9 @@ import * as helpers from '../../helpers';
directives: [forwardRef(() => helpers.AndroidAttribute)], directives: [forwardRef(() => helpers.AndroidAttribute)],
}) })
class TabIconPage { class TabIconPage {
constructor() { constructor(platform: Platform) {
this.platform = platform;
this.isAndroid = platform.is('android');
} }
} }