javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +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-navbar>
<ion-content padding 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>
<ion-content class="hide-when-demo">
<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-icon name="logo-android"></ion-icon><br>
<code>&lt;div hideWhen="ios"&gt;</code>
</div>
<div class="icon-div" hideWhen="android">
<ion-icon name="logo-apple"></ion-icon><br>
<code>&lt;div hideWhen="android"&gt;</code>
</div>
<ion-row text-center>
<ion-col>
<ion-icon name="logo-android" hideWhen="ios"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="logo-apple" hideWhen="android"></ion-icon>
</ion-col>
</ion-row>
</ion-content>
<style>
.hide-when-demo .icon-div {
text-align: center;
.hide-when-demo ion-col {
background: #f8f8f8;
border: 1px solid #ddd;
margin: 5px;
}
.hide-when-demo .icon-div ion-icon {
font-size: 200px;
}
.hide-when-demo .icon-div code {
.hide-when-demo code {
background: #f8f8f8;
}
.hide-when-demo ion-icon {
font-size: 200px;
}
</style>

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

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