mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
docs(demos): prettify the hide-when demo
This commit is contained in:
@ -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><div hideWhen="ios"></code>
|
||||
</div>
|
||||
<div class="icon-div" hideWhen="android">
|
||||
<ion-icon name="logo-apple"></ion-icon><br>
|
||||
<code><div hideWhen="android"></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>
|
||||
|
Reference in New Issue
Block a user