javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(): add angular show-hide-when demo

Browse Source
This commit is contained in:
mhartington
2018-02-22 15:06:14 -05:00
parent c4591da829
commit 5932561baa
6 changed files with 206 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/demos/angular/src/app/app-routing.module.ts
View File

@@ -4,6 +4,7 @@ import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'basic-inputs', loadChildren: 'app/basic-inputs-page/basic-inputs-page.module#BasicInputsPageModule' },
{ path: 'show-hide-when', loadChildren: 'app/show-hide-when/show-hide-when.module#ShowHideWhenModule' },
{ path: 'form-sample', loadChildren: 'app/form-sample-page/form-sample-page.module#FormSamplePageModule' },
{ path: 'group-inputs', loadChildren: 'app/group-inputs-page/group-inputs-page.module#GroupInputsPageModule' },
{ path: 'home', loadChildren: 'app/home-page/home-page.module#HomePageModule' },

3
packages/demos/angular/src/app/home-page/home-page.component.html
View File

@@ -4,6 +4,9 @@
<div>
<ul>
<li>
<a href='show-hide-when'>Show/Hide When Test Page</a>
</li>
<li>
<a href='basic-inputs'>Basic Inputs Test Page</a>
</li>

9
packages/demos/angular/src/app/show-hide-when/show-hide-when-page.component.ts Normal file
View File

@@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-show-hide-page',
templateUrl: './show-hide-when.html'
})
export class ShowHideWhenComponent {
constructor() {}
}

14
packages/demos/angular/src/app/show-hide-when/show-hide-when-routing.module.ts Normal file
View File

@@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ShowHideWhenComponent } from './show-hide-when-page.component';
const routes: Routes = [
{ path: '', component: ShowHideWhenComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ShowHideWhenRoutingModule { }

164
packages/demos/angular/src/app/show-hide-when/show-hide-when.html Normal file
View File

@@ -0,0 +1,164 @@
<ion-app>
<ion-page class="show-page">
<ion-header>
<ion-toolbar>
<ion-title>Test</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<div>
<h2>Mode Tests</h2>
<ion-show-when mode="md, ios">
<div>Shows on MD, iOS</div>
</ion-show-when>
<ion-show-when mode="md">
<div>Shows on MD only</div>
</ion-show-when>
<ion-show-when mode="ios">
<div>Shows on iOS only</div>
</ion-show-when>
<ion-hide-when mode="md, ios">
<div>Hides on MD, iOS</div>
</ion-hide-when>
<ion-hide-when mode="md">
<div>Hides on MD only</div>
</ion-hide-when>
<ion-hide-when mode="ios">
<div>Hides on iOS only</div>
</ion-hide-when>
</div>
<br>
<div>
<h2>Orientation Tests</h2>
<ion-show-when orientation="portrait">
<div>Shows on portrait orientation</div>
</ion-show-when>
<ion-show-when orientation="landscape">
<div>Shows on landscape orientation</div>
</ion-show-when>
<ion-hide-when orientation="portrait">
<div>Hides on portrait orientation</div>
</ion-hide-when>
<ion-hide-when orientation="landscape">
<div>Hides on landscape orientation</div>
</ion-hide-when>
</div>
<br>
<div>
<h2>Platform Tests</h2>
<ion-show-when platform="android,ios">
<div>Render on Android and iOS</div>
</ion-show-when>
<ion-show-when platform="ios">
<div>Only show on iOS</div>
</ion-show-when>
<ion-show-when platform="android">
<div>Only show on Android</div>
</ion-show-when>
<ion-show-when platform="ipad">
<div>Only show on ipad</div>
</ion-show-when>
<ion-show-when platform="phablet">
<div>Only show on phablet</div>
</ion-show-when>
<ion-show-when platform="iphone">
<div>Only show on phone</div>
</ion-show-when>
<ion-hide-when platform="android,ios">
<div>Hides on Android and iOS</div>
</ion-hide-when>
<ion-hide-when platform="ios">
<div>Only hide on iOS</div>
</ion-hide-when>
<ion-hide-when platform="android">
<div>Only hide on Android</div>
</ion-hide-when>
<ion-hide-when platform="ipad">
<div>Only hide on ipad</div>
</ion-hide-when>
<ion-hide-when platform="phablet">
<div>Only hide on phablet</div>
</ion-hide-when>
<ion-hide-when platform="iphone">
<div>Only hide on phone</div>
</ion-hide-when>
</div>
<br>
<div>
<h2>Size Tests</h2>
<ion-show-when size="xs">
<div>Only show on xs</div>
</ion-show-when>
<ion-show-when size="sm">
<div>Only show on sm</div>
</ion-show-when>
<ion-show-when size="md">
<div>Only show on md</div>
</ion-show-when>
<ion-show-when size="lg">
<div>Only show on lg</div>
</ion-show-when>
<ion-show-when size="xl">
<div>Only show on xl</div>
</ion-show-when>
<ion-show-when size="xs, m">
<div>Only show on XS or m</div>
</ion-show-when>
<ion-hide-when size="xs">
<div>Only hide on xs</div>
</ion-hide-when>
<ion-hide-when size="sm">
<div>Only hide on sm</div>
</ion-hide-when>
<ion-hide-when size="md">
<div>Only hide on md</div>
</ion-hide-when>
<ion-hide-when size="lg">
<div>Only hide on lg</div>
</ion-hide-when>
<ion-hide-when size="xl">
<div>Only hide on xl</div>
</ion-hide-when>
<ion-hide-when size="xs, m">
<div>Only hide on XS or m</div>
</ion-hide-when>
</div>
</ion-content>
</ion-page>
</ion-app>

15
packages/demos/angular/src/app/show-hide-when/show-hide-when.module.ts Normal file
View File

@@ -0,0 +1,15 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ShowHideWhenComponent } from './show-hide-when-page.component';
import { ShowHideWhenRoutingModule } from './show-hide-when-routing.module';
@NgModule({
imports: [
CommonModule,
ShowHideWhenRoutingModule
],
declarations: [ShowHideWhenComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ShowHideWhenModule { }