mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
05c7b8f0d7
- add spacing between imports - alphabetize imports - removed app.html files in favor of an inline ion-nav - cleaned up config demo so it uses proper syntax - use file name main.html for the first page for the demo - name the app ApiDemoApp and first page ApiDemoPage - replace the ion-toolbars with ion-navbars closes #7019 closes driftyco/ionic-site#647
89 lines
1.8 KiB
HTML
89 lines
1.8 KiB
HTML
<ion-header>
|
|
|
|
<ion-navbar>
|
|
<ion-title>Platform</ion-title>
|
|
</ion-navbar>
|
|
|
|
</ion-header>
|
|
|
|
|
|
<ion-content class="platform-demo">
|
|
|
|
<p margin class="note">Change devices to see the platform values change.</p>
|
|
|
|
<ion-grid>
|
|
<ion-row>
|
|
<ion-col><b>Name</b></ion-col>
|
|
<ion-col><b>Value</b></ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col>
|
|
<pre>platform.is('ios')</pre>
|
|
</ion-col>
|
|
<ion-col>
|
|
<pre [ngClass]="isIos ? 'platform-true' : 'platform-false'">{{isIos}}</pre>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col>
|
|
<pre>platform.is('android')</pre>
|
|
</ion-col>
|
|
<ion-col>
|
|
<pre [ngClass]="isAndroid ? 'platform-true' : 'platform-false'">{{isAndroid}}</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-row>
|
|
</ion-grid>
|
|
|
|
</ion-content>
|
|
|
|
<style>
|
|
.platform-demo ion-row ion-col:nth-child(odd) {
|
|
flex: 0 0 62%;
|
|
max-width: 62%;
|
|
}
|
|
|
|
.platform-demo ion-row ion-col:nth-child(even) {
|
|
flex: 0 0 38%;
|
|
max-width: 38%;
|
|
}
|
|
|
|
.platform-demo pre {
|
|
background: #f8f8f8;
|
|
font-size: 13px;
|
|
min-height: 40px;
|
|
padding: 4px;
|
|
margin-top: 0;
|
|
border: 1px solid #ddd;
|
|
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 {
|
|
color: #444;
|
|
font-style: italic;
|
|
}
|
|
</style>
|