diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 82d5ae1c3b..52cf434d10 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -1108,6 +1108,40 @@ declare global {
}
+import {
+ HideWhen as IonHideWhen
+} from './components/hide-when/hide-when';
+
+declare global {
+ interface HTMLIonHideWhenElement extends IonHideWhen, HTMLStencilElement {
+ }
+ var HTMLIonHideWhenElement: {
+ prototype: HTMLIonHideWhenElement;
+ new (): HTMLIonHideWhenElement;
+ };
+ interface HTMLElementTagNameMap {
+ "ion-hide-when": HTMLIonHideWhenElement;
+ }
+ interface ElementTagNameMap {
+ "ion-hide-when": HTMLIonHideWhenElement;
+ }
+ namespace JSX {
+ interface IntrinsicElements {
+ "ion-hide-when": JSXElements.IonHideWhenAttributes;
+ }
+ }
+ namespace JSXElements {
+ export interface IonHideWhenAttributes extends HTMLAttributes {
+ mediaQuery?: string;
+ mode?: string;
+ or?: boolean;
+ platform?: string;
+ size?: string;
+ }
+ }
+}
+
+
import {
InfiniteScrollContent as IonInfiniteScrollContent
} from './components/infinite-scroll-content/infinite-scroll-content';
@@ -2845,6 +2879,40 @@ declare global {
}
+import {
+ ShowWhen as IonShowWhen
+} from './components/show-when/show-when';
+
+declare global {
+ interface HTMLIonShowWhenElement extends IonShowWhen, HTMLStencilElement {
+ }
+ var HTMLIonShowWhenElement: {
+ prototype: HTMLIonShowWhenElement;
+ new (): HTMLIonShowWhenElement;
+ };
+ interface HTMLElementTagNameMap {
+ "ion-show-when": HTMLIonShowWhenElement;
+ }
+ interface ElementTagNameMap {
+ "ion-show-when": HTMLIonShowWhenElement;
+ }
+ namespace JSX {
+ interface IntrinsicElements {
+ "ion-show-when": JSXElements.IonShowWhenAttributes;
+ }
+ }
+ namespace JSXElements {
+ export interface IonShowWhenAttributes extends HTMLAttributes {
+ mediaQuery?: string;
+ mode?: string;
+ or?: boolean;
+ platform?: string;
+ size?: string;
+ }
+ }
+}
+
+
import {
SkeletonText as IonSkeletonText
} from './components/skeleton-text/skeleton-text';
diff --git a/packages/core/src/components/hide-when/hide-when.scss b/packages/core/src/components/hide-when/hide-when.scss
new file mode 100644
index 0000000000..d5106903af
--- /dev/null
+++ b/packages/core/src/components/hide-when/hide-when.scss
@@ -0,0 +1,7 @@
+ion-hide-when.show-content {
+ display: block;
+}
+
+ion-hide-when.hide-content {
+ display: none !important;
+}
\ No newline at end of file
diff --git a/packages/core/src/components/hide-when/hide-when.tsx b/packages/core/src/components/hide-when/hide-when.tsx
new file mode 100644
index 0000000000..eb71153f19
--- /dev/null
+++ b/packages/core/src/components/hide-when/hide-when.tsx
@@ -0,0 +1,46 @@
+import { Component, Element, Prop } from '@stencil/core';
+import { Config, PlatformConfig } from '../../index';
+
+import {
+ DisplayWhen,
+ componentWillLoadImpl,
+} from '../../utils/show-hide-when-utils';
+
+@Component({
+ tag: 'ion-hide-when',
+ styleUrl: './hide-when.scss'
+})
+export class HideWhen implements DisplayWhen {
+
+ @Element() element: HTMLElement;
+ @Prop({ context: 'config' }) config: Config;
+ @Prop({ context: 'platforms' }) calculatedPlatforms: PlatformConfig[];
+
+ @Prop() mediaQuery: string = null;
+ @Prop() size: string = null;
+ @Prop() mode: string = null;
+ @Prop() platform: string = null;
+ @Prop() or = false;
+
+ passesTest = false;
+
+ componentWillLoad() {
+ return componentWillLoadImpl(this);
+ }
+
+ hostData() {
+ return {
+ class: {
+ 'show-content': !this.passesTest,
+ 'hide-content': this.passesTest
+ }
+ };
+ }
+
+ render() {
+ return
+ }
+}
+
+
+
diff --git a/packages/core/src/components/hide-when/readme.md b/packages/core/src/components/hide-when/readme.md
new file mode 100644
index 0000000000..4b5c863b87
--- /dev/null
+++ b/packages/core/src/components/hide-when/readme.md
@@ -0,0 +1,65 @@
+# ion-hide-when
+
+
+
+
+
+
+## Properties
+
+#### mediaQuery
+
+string
+
+
+#### mode
+
+string
+
+
+#### or
+
+boolean
+
+
+#### platform
+
+string
+
+
+#### size
+
+string
+
+
+## Attributes
+
+#### media-query
+
+string
+
+
+#### mode
+
+string
+
+
+#### or
+
+boolean
+
+
+#### platform
+
+string
+
+
+#### size
+
+string
+
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/core/src/components/hide-when/test/basic/index.html b/packages/core/src/components/hide-when/test/basic/index.html
new file mode 100644
index 0000000000..a1e1abe919
--- /dev/null
+++ b/packages/core/src/components/hide-when/test/basic/index.html
@@ -0,0 +1,96 @@
+
+
+
+
+
+ Hide When - Basic
+
+
+
+
+
+
+
+
+
+ Hide when - Basic
+
+
+
+
+
+ Mode Tests
+
+ Hides on MD, iOS
+
+
+
+ Hides on MD only
+
+
+
+ Hides on iOS only
+
+
+ Platform Tests
+
+
+ Hides on Android and iOS
+
+
+
+ Only hide on iOS
+
+
+
+ Only hide on Android
+
+
+
+ Only hide on ipad
+
+
+
+ Only hide on phablet
+
+
+
+ Only hide on phone
+
+
+ Size Tests
+
+ Only hide on xs
+
+
+
+ Only hide on sm
+
+
+
+ Only hide on md
+
+
+
+ Only hide on lg
+
+
+
+ Only hide on xl
+
+
+
+ Only hide on XS or m
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/core/stencil.config.js b/packages/core/stencil.config.js
index 86b9361719..9a40e76782 100644
--- a/packages/core/stencil.config.js
+++ b/packages/core/stencil.config.js
@@ -48,6 +48,7 @@ exports.config = {
{ components: ['ion-tap-click', 'ion-status-tap'] },
{ components: ['ion-platform', 'ion-cordova-platform'] },
{ components: ['ion-nav-pop'] },
+ { components: ['ion-hide-when', 'ion-show-when'] },
],
plugins: [
sass(),