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): update platform demo to include windows

Browse Source 
add styling to the code blocks to differentiate them more visually
This commit is contained in:
Brandy Carney
2016-04-15 16:51:21 -04:00
parent 43c6e096af
commit 4897f02c11
2 changed files with 41 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
demos/platform/index.ts
View File

@ -4,9 +4,15 @@ import {App, Platform} from 'ionic-angular';
templateUrl: 'main.html' templateUrl: 'main.html'
}) })
class ApiDemoApp { class ApiDemoApp {
isIos: boolean;
isAndroid: boolean;
isWindows: boolean;
userAgent: string;
constructor(platform: Platform) { constructor(platform: Platform) {
this.isIos = platform.is('ios'); this.isIos = platform.is('ios');
this.isAndroid = platform.is('android'); this.isAndroid = platform.is('android');
this.isWindows = platform.is('windows');
this.userAgent = platform.userAgent(); this.userAgent = platform.userAgent();
} }
} }

41
demos/platform/main.html
View File

@ -14,7 +14,7 @@
<pre>platform.is('android')</pre> <pre>platform.is('android')</pre>
</ion-col> </ion-col>
<ion-col> <ion-col>
<pre>{{isAndroid}}</pre> <pre [ngClass]="isAndroid ? 'platform-true' : 'platform-false'">{{isAndroid}}</pre>
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row> <ion-row>
@ -22,7 +22,15 @@
<pre>platform.is('ios')</pre> <pre>platform.is('ios')</pre>
</ion-col> </ion-col>
<ion-col> <ion-col>
<pre>{{isIos}}</pre> <pre [ngClass]="isIos ? 'platform-true' : 'platform-false'">{{isIos}}</pre>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<pre>platform.is('windows')</pre>
</ion-col>
<ion-col>
<pre [ngClass]="isWindows ? 'platform-true' : 'platform-false'">{{isWindows}}</pre>
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row> <ion-row>
@ -30,16 +38,21 @@
<pre>platform.userAgent()</pre> <pre>platform.userAgent()</pre>
</ion-col> </ion-col>
<ion-col> <ion-col>
<pre>{{userAgent}}</pre> <pre class="platform-normal">{{userAgent}}</pre>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-content> </ion-content>
<style> <style>
.platform-demo ion-col { .platform-demo ion-row ion-col:nth-child(odd) {
flex: 0 0 50%; flex: 0 0 62%;
max-width: 50%; max-width: 62%;
}
.platform-demo ion-row ion-col:nth-child(even) {
flex: 0 0 38%;
max-width: 38%;
} }
.platform-demo pre { .platform-demo pre {
@ -50,6 +63,22 @@
margin-top: 0; margin-top: 0;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 2px; border-radius: 2px;
white-space: pre-wrap;
}
.platform-demo .platform-true {
background: #dff2bf;
border-color: #4f8a10;
}
.platform-demo .platform-false {
background: #ffbaba;
border-color: #d8000c;
}
.platform-demo .platform-normal {
background: #bde5f8;
border-color: #00529b;
} }
.platform-demo .note { .platform-demo .note {