docs(demos): prettify the hide-when demo

This commit is contained in:
Brandy Carney
2016-01-27 16:38:40 -05:00
parent e982c69906
commit a676d7d0f3

View File

@ -2,8 +2,29 @@
<ion-title>HideWhen</ion-title>
</ion-navbar>
<ion-content padding>
<p hideWhen="android">
<b>(hideWhen="android")</b> This text is hidden on Android only. Click the Android tab to hide this text.
</p>
<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>
<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-content>
<style>
.hide-when-demo .icon-div {
text-align: center;
}
.hide-when-demo .icon-div ion-icon {
font-size: 200px;
}
.hide-when-demo .icon-div code {
background: #f8f8f8;
}
</style>