javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(demos): update show-hide-when demos to include windows

Browse Source 
also added the code used to the demo
This commit is contained in:
Brandy Carney
2016-04-18 11:16:42 -04:00
parent f8ea096b05
commit cef019c66f
2 changed files with 48 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,12 +6,28 @@
<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 text-center>
<ion-col>
<ion-icon name="logo-android" hideWhen="ios"></ion-icon>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-apple" hideWhen="android,windows"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="logo-apple" hideWhen="android"></ion-icon>
<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-content>
@@ -20,7 +36,10 @@
.hide-when-demo ion-col {
background: #f8f8f8;
border: 1px solid #ddd;
margin: 5px;
margin: 1%;
max-width: 48%;
flex: 0 0 48%;
min-height: 120px;
}
.hide-when-demo code {
@@ -28,6 +47,6 @@
}
.hide-when-demo ion-icon {
font-size: 200px;
font-size: 100px;
}
</style>

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

@@ -6,12 +6,28 @@
<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 text-center>
<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>
<ion-icon name="logo-apple" showWhen="ios"></ion-icon>
<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-content>
@@ -20,7 +36,10 @@
.show-when-demo ion-col {
background: #f8f8f8;
border: 1px solid #ddd;
margin: 5px;
margin: 1%;
max-width: 48%;
flex: 0 0 48%;
min-height: 120px;
}
.show-when-demo code {
@@ -28,6 +47,6 @@
}
.show-when-demo ion-icon {
font-size: 200px;
font-size: 100px;
}
</style>