mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
05c7b8f0d7
- add spacing between imports - alphabetize imports - removed app.html files in favor of an inline ion-nav - cleaned up config demo so it uses proper syntax - use file name main.html for the first page for the demo - name the app ApiDemoApp and first page ApiDemoPage - replace the ion-toolbars with ion-navbars closes #7019 closes driftyco/ionic-site#647
62 lines
1.4 KiB
HTML
62 lines
1.4 KiB
HTML
<ion-header>
|
|
|
|
<ion-navbar>
|
|
<ion-title>ShowWhen</ion-title>
|
|
</ion-navbar>
|
|
|
|
</ion-header>
|
|
|
|
|
|
<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>
|
|
|
|
<ion-grid>
|
|
<ion-row>
|
|
<ion-col text-center>
|
|
<ion-icon name="logo-apple" showWhen="ios"></ion-icon>
|
|
</ion-col>
|
|
<ion-col>
|
|
<code> <ion-icon name="logo-apple" showWhen="ios"></ion-icon> </code>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col text-center>
|
|
<ion-icon name="logo-android" showWhen="android"></ion-icon>
|
|
</ion-col>
|
|
<ion-col>
|
|
<code> <ion-icon name="logo-android" showWhen="android"></ion-icon> </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> <ion-icon name="logo-windows" showWhen="windows"></ion-icon> </code>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
|
|
</ion-content>
|
|
|
|
<style>
|
|
.show-when-demo ion-col {
|
|
background: #f8f8f8;
|
|
border: 1px solid #ddd;
|
|
margin: 1%;
|
|
max-width: 48%;
|
|
flex: 0 0 48%;
|
|
min-height: 120px;
|
|
}
|
|
|
|
.show-when-demo code {
|
|
background: #f8f8f8;
|
|
}
|
|
|
|
.show-when-demo ion-icon {
|
|
font-size: 100px;
|
|
}
|
|
</style>
|