javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(hide-when): add hide-when demo back

Browse Source
This commit is contained in:
Brandy Carney
2017-01-11 11:16:58 -05:00
parent 4224e903db
commit 2f074b408c
2 changed files with 93 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
demos/src/hide-when/app.module.ts Normal file
View File

@ -0,0 +1,32 @@
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '../../ionic-angular';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [
ApiDemoApp,
ApiDemoPage
],
imports: [
IonicModule.forRoot(ApiDemoApp)
],
bootstrap: [IonicApp],
entryComponents: [
ApiDemoPage
]
})
export class AppModule {}

61
demos/src/hide-when/page.html Normal file
View File

@ -0,0 +1,61 @@
<ion-header>
<ion-navbar>
<ion-title>HideWhen</ion-title>
</ion-navbar>
</ion-header>
<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>
<ion-grid>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-apple" hideWhen="android,windows"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-apple" hideWhen="android,windows"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-android" hideWhen="ios,windows"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-android" hideWhen="ios,windows"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-windows" hideWhen="ios,android"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-windows" hideWhen="ios,android"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<style>
.hide-when-demo ion-col {
background: #f8f8f8;
border: 1px solid #ddd;
margin: 1%;
max-width: 48%;
flex: 0 0 48%;
min-height: 120px;
}
.hide-when-demo code {
background: #f8f8f8;
}
.hide-when-demo ion-icon {
font-size: 100px;
}
</style>