javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 13:01:01 +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

3
demos/config/index.ts
View File

@ -43,6 +43,8 @@ export class InitialPage {
'tabbarPlacement': 'top' 'tabbarPlacement': 'top'
}; };
} }
this.initialConfig = JSON.parse(JSON.stringify(this.config));
} }
load() { load() {
@ -50,4 +52,3 @@ export class InitialPage {
window.location.reload(); window.location.reload();
} }
} }

103
demos/config/main.html
View File

@ -2,63 +2,60 @@
<ion-title>Config</ion-title> <ion-title>Config</ion-title>
</ion-navbar> </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> <ion-item>
@App({ <ion-label>Icon Mode</ion-label>
</ion-row> <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> </ion-list>
config: { <p class="note">Note: the config will not be updated until you click the button below.</p>
<ion-row> <div padding>
<ion-col> <button block (click)="load()">
backButtonIcon: Update Config
<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
</button> </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> </ion-content>
<style>
.config-demo pre {
background-color: #f8f8f8;
}
.config-demo .note {
color: #444;
font-style: italic;
margin: 0 16px;
}
</style>

6
demos/config/tabs.html
View File

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