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): refactor hide/show-when demos

Browse Source 
references #5311
This commit is contained in:
Brandy Carney
2016-02-02 22:01:04 -05:00
parent 6e0a0a7ec8
commit d937588775
2 changed files with 40 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,29 +2,32 @@
<ion-title>HideWhen</ion-title> <ion-title>HideWhen</ion-title>
</ion-navbar> </ion-navbar>
<ion-content padding class="hide-when-demo"> <ion-content class="hide-when-demo">
<h5>If the platform is Android, it will hide the Apple logo. If the platform is iOS, it will hide the Android logo.</h5> <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>
<div class="icon-div" hideWhen="ios"> <ion-row text-center>
<ion-icon name="logo-android"></ion-icon><br> <ion-col>
<code>&lt;div hideWhen="ios"&gt;</code> <ion-icon name="logo-android" hideWhen="ios"></ion-icon>
</div> </ion-col>
<div class="icon-div" hideWhen="android"> <ion-col>
<ion-icon name="logo-apple"></ion-icon><br> <ion-icon name="logo-apple" hideWhen="android"></ion-icon>
<code>&lt;div hideWhen="android"&gt;</code> </ion-col>
</div> </ion-row>
</ion-content> </ion-content>
<style> <style>
.hide-when-demo .icon-div { .hide-when-demo ion-col {
text-align: center; background: #f8f8f8;
border: 1px solid #ddd;
margin: 5px;
} }
.hide-when-demo .icon-div ion-icon { .hide-when-demo code {
font-size: 200px;
}
.hide-when-demo .icon-div code {
background: #f8f8f8; background: #f8f8f8;
} }
.hide-when-demo ion-icon {
font-size: 200px;
}
</style> </style>

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

@ -2,29 +2,32 @@
<ion-title>ShowWhen</ion-title> <ion-title>ShowWhen</ion-title>
</ion-navbar> </ion-navbar>
<ion-content padding class="show-when-demo"> <ion-content class="show-when-demo">
<h5>If the platform is Android, it will show the Android logo. If the platform is iOS, it will show the Apple logo.</h5> <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>
<div class="icon-div" showWhen="android"> <ion-row text-center>
<ion-icon name="logo-android"></ion-icon><br> <ion-col>
<code>&lt;div showWhen="android"&gt;</code> <ion-icon name="logo-android" showWhen="android"></ion-icon>
</div> </ion-col>
<div class="icon-div" showWhen="ios"> <ion-col>
<ion-icon name="logo-apple"></ion-icon><br> <ion-icon name="logo-apple" showWhen="ios"></ion-icon>
<code>&lt;div showWhen="ios"&gt;</code> </ion-col>
</div> </ion-row>
</ion-content> </ion-content>
<style> <style>
.show-when-demo .icon-div { .show-when-demo ion-col {
text-align: center; background: #f8f8f8;
border: 1px solid #ddd;
margin: 5px;
} }
.show-when-demo .icon-div ion-icon { .show-when-demo code {
font-size: 200px;
}
.show-when-demo .icon-div code {
background: #f8f8f8; background: #f8f8f8;
} }
.show-when-demo ion-icon {
font-size: 200px;
}
</style> </style>