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

docs(demos): update demos to use ion-grid

Browse Source 
references #6238
This commit is contained in:
Brandy Carney
2016-04-26 13:33:29 -04:00
parent a0c0228acb
commit 6f525d1bd8
4 changed files with 82 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
demos/hide-when/main.html
View File

@ -6,30 +6,32 @@
<h5 margin>Hide Icon Per Platform</h5>
<p margin>In this example we're using the <code>hideWhen</code> directive to decide whether to hide an icon based on the platform.</p>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-apple" hideWhen="android,windows"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-apple" hideWhen="android,windows"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-android" hideWhen="ios,windows"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-android" hideWhen="ios,windows"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-windows" hideWhen="ios,android"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-windows" hideWhen="ios,android"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
<ion-grid>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-apple" hideWhen="android,windows"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-apple" hideWhen="android,windows"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-android" hideWhen="ios,windows"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-android" hideWhen="ios,windows"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-windows" hideWhen="ios,android"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-windows" hideWhen="ios,android"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<style>

1
demos/icon/main.html
View File

@ -58,7 +58,6 @@
.icon-demo ion-row {
height: 100%;
padding: 0;
flex-wrap: wrap;
}

58
demos/platform/main.html
View File

@ -5,34 +5,36 @@
<ion-content class="platform-demo">
<p margin class="note">Change devices to see the platform values change.</p>
<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-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>

50
demos/show-when/main.html
View File

@ -6,30 +6,32 @@
<h5 margin>Show Icon Per Platform</h5>
<p margin>In this example we're using the <code>showWhen</code> directive to decide whether to show an icon based on the platform.</p>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-apple" showWhen="ios"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-apple" showWhen="ios"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-android" showWhen="android"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-android" showWhen="android"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-windows" showWhen="windows"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-windows" showWhen="windows"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
<ion-grid>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-apple" showWhen="ios"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-apple" showWhen="ios"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-android" showWhen="android"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-android" showWhen="android"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-windows" showWhen="windows"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-windows" showWhen="windows"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<style>