javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(demos): prettify the config demo

Browse Source
This commit is contained in:
Brandy Carney
2016-01-27 15:36:41 -05:00
parent dbc681fb7c
commit a8bc0d2011
3 changed files with 58 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
demos/config/index.ts
View File

@ -28,7 +28,7 @@ export class InitialPage {
constructor(platform: Platform) {
this.platform = platform;
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')) {
this.config = {
@ -43,11 +43,12 @@ export class InitialPage {
'tabbarPlacement': 'top'
};
}
this.initialConfig = JSON.parse(JSON.stringify(this.config));
}
load() {
window.localStorage.setItem('configDemo', JSON.stringify(this.config));
window.location.reload();
}
}
}

103
demos/config/main.html
View File

@ -2,63 +2,60 @@
<ion-title>Config</ion-title>
</ion-navbar>
<ion-content padding>
<ion-content class="config-demo">
<ion-list>
<ion-item>
<ion-label>Back Button Icon</ion-label>
<ion-select [(ngModel)]="config.backButtonIcon">
<ion-option value="ion-ios-arrow-back">ion-ios-arrow-back</ion-option>
<ion-option value="ion-md-arrow-back">ion-md-arrow-back</ion-option>
</ion-select>
</ion-item>
<ion-row>
@App({
</ion-row>
<ion-item>
<ion-label>Icon Mode</ion-label>
<ion-select [(ngModel)]="config.iconMode">
<ion-option value="ios">ios</ion-option>
<ion-option value="md">md</ion-option>
</ion-select>
</ion-item>
<ion-row>
<ion-item>
<ion-label>Tab Placement</ion-label>
<ion-select [(ngModel)]="config.tabbarPlacement">
<ion-option value="bottom">bottom</ion-option>
<ion-option value="top">top</ion-option>
</ion-select>
</ion-item>
<ion-col>
config: {
</ion-list>
<p class="note">Note: the config will not be updated until you click the button below.</p>
<ion-row>
<ion-col>
backButtonIcon:
<select [(ngModel)]="config.backButtonIcon">
<option value="ion-ios-arrow-back">ion-ios-arrow-back</option>
<option value="ion-md-arrow-back">ion-md-arrow-back</option>
</select>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
iconMode:
<select [(ngModel)]="config.iconMode">
<option value="ios">ios</option>
<option value="md">md</option>
</select>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
tabbarPlacement:
<select [(ngModel)]="config.tabbarPlacement">
<option value="bottom">bottom</option>
<option value="top">top</option>
</select>
</ion-col>
</ion-row>
}
</ion-col>
</ion-row>
<ion-row>
})
</ion-row>
<ion-row>
<button full (click)="load()">
<ion-icon name="refresh"></ion-icon>
Reload Config
<div padding>
<button block (click)="load()">
Update Config
</button>
</ion-row>
</div>
<!-- this has to be formatted weird for pre -->
<pre margin>@App({
config: {
backButtonIcon: {{initialConfig.backButtonIcon}}
iconMode: {{initialConfig.iconMode}}
tabbarPlacement: {{initialConfig.tabbarPlacement}}
}
})</pre>
</ion-content>
<style>
.config-demo pre {
background-color: #f8f8f8;
}
.config-demo .note {
color: #444;
font-style: italic;
margin: 0 16px;
}
</style>

8
demos/config/tabs.html
View File

@ -1,5 +1,5 @@
<ion-tabs>
<ion-tab tabTitle="Music" [root]="tabOne"></ion-tab>
<ion-tab tabTitle="Movies" [root]="tabOne"></ion-tab>
<ion-tab tabTitle="Games" [root]="tabOne"></ion-tab>
</ion-tabs>
<ion-tab tabTitle="Music" tabIcon="musical-notes" [root]="tabOne"></ion-tab>
<ion-tab tabTitle="Movies" tabIcon="videocam" [root]="tabOne"></ion-tab>
<ion-tab tabTitle="Games" tabIcon="game-controller-b" [root]="tabOne"></ion-tab>
</ion-tabs>