mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 05:58:26 +08:00
docs(demos): prettify config some more and add another page - fix back button icon
This commit is contained in:
@ -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();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
9
demos/config/page.html
Normal 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>
|
Reference in New Issue
Block a user