docs(demos): prettify config some more and add another page - fix back button icon

This commit is contained in:
Brandy Carney
2016-01-27 16:02:22 -05:00
parent 6855514897
commit e982c69906
3 changed files with 44 additions and 6 deletions

View File

@ -1,4 +1,4 @@
import {App, Page, IonicApp, Platform} from 'ionic/ionic'; import {App, Page, IonicApp, Platform, NavController} from 'ionic/ionic';
@App({ @App({
templateUrl: 'app.html', templateUrl: 'app.html',
@ -25,20 +25,22 @@ export class TabPage {
templateUrl: 'main.html' templateUrl: 'main.html'
}) })
export class InitialPage { export class InitialPage {
constructor(platform: Platform) { constructor(platform: Platform, nav: NavController) {
this.platform = platform; this.platform = platform;
this.nav = nav;
if (window.localStorage.getItem('configDemo') !== null) { if (window.localStorage.getItem('configDemo') !== null) {
this.config = JSON.parse(window.localStorage.getItem('configDemo')); this.config = JSON.parse(window.localStorage.getItem('configDemo'));
} }
else if (platform.is('ios')) { else if (platform.is('ios')) {
this.config = { this.config = {
'backButtonIcon': 'ion-ios-arrow-back', 'backButtonIcon': 'ios-arrow-back',
'iconMode': 'ios', 'iconMode': 'ios',
'tabbarPlacement': 'bottom' 'tabbarPlacement': 'bottom'
}; };
} else { } else {
this.config = { this.config = {
'backButtonIcon': 'ion-md-arrow-back', 'backButtonIcon': 'md-arrow-back',
'iconMode': 'md', 'iconMode': 'md',
'tabbarPlacement': 'top' 'tabbarPlacement': 'top'
}; };
@ -51,4 +53,22 @@ export class InitialPage {
window.localStorage.setItem('configDemo', JSON.stringify(this.config)); window.localStorage.setItem('configDemo', JSON.stringify(this.config));
window.location.reload(); window.location.reload();
} }
push() {
this.nav.push(AnotherPage);
}
}
@Page({
templateUrl: 'page.html'
})
export class AnotherPage {
constructor(nav: NavController) {
this.nav = nav;
}
pop() {
this.nav.pop();
}
} }

View File

@ -7,8 +7,11 @@
<ion-item> <ion-item>
<ion-label>Back Button Icon</ion-label> <ion-label>Back Button Icon</ion-label>
<ion-select [(ngModel)]="config.backButtonIcon"> <ion-select [(ngModel)]="config.backButtonIcon">
<ion-option value="ion-ios-arrow-back">ion-ios-arrow-back</ion-option> <ion-option value="ios-arrow-back">ios-arrow-back</ion-option>
<ion-option value="ion-md-arrow-back">ion-md-arrow-back</ion-option> <ion-option value="md-arrow-back">md-arrow-back</ion-option>
<ion-option value="close">close</ion-option>
<ion-option value="heart">heart</ion-option>
<ion-option value="globe">globe</ion-option>
</ion-select> </ion-select>
</ion-item> </ion-item>
@ -46,6 +49,12 @@
} }
})</pre> })</pre>
<div padding>
<button block light (click)="push()">
Go to Another Page
</button>
</div>
</ion-content> </ion-content>
<style> <style>

9
demos/config/page.html Normal file
View File

@ -0,0 +1,9 @@
<ion-navbar *navbar>
<ion-title>Page</ion-title>
</ion-navbar>
<ion-content>
<div padding>
<button block (click)="pop()">Go Back to Config</button>
</div>
</ion-content>