mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
refactor(show): remove show/hide-when components (#16098)
This commit is contained in:
Manu MA
@@ -27,7 +27,6 @@ export const DIRECTIVES = [
|
||||
d.Footer,
|
||||
d.Grid,
|
||||
d.Header,
|
||||
d.HideWhen,
|
||||
d.Icon,
|
||||
d.Img,
|
||||
d.InfiniteScroll,
|
||||
@@ -65,7 +64,6 @@ export const DIRECTIVES = [
|
||||
d.Select,
|
||||
d.SelectOption,
|
||||
d.SelectPopover,
|
||||
d.ShowWhen,
|
||||
d.SkeletonText,
|
||||
d.Slide,
|
||||
d.Slides,
|
||||
|
||||
@@ -291,16 +291,6 @@ export class Header {
|
||||
}
|
||||
}
|
||||
|
||||
export declare interface HideWhen extends StencilComponents<'IonHideWhen'> {}
|
||||
@Component({ selector: 'ion-hide-when', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['modes', 'orientation', 'mediaQuery', 'size', 'platform', 'or'] })
|
||||
export class HideWhen {
|
||||
|
||||
constructor(r: ElementRef) {
|
||||
const el = r.nativeElement;
|
||||
proxyInputs(this, el, ['modes', 'orientation', 'mediaQuery', 'size', 'platform', 'or']);
|
||||
}
|
||||
}
|
||||
|
||||
export declare interface Icon extends StencilComponents<'IonIcon'> {}
|
||||
@Component({ selector: 'ion-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['ariaLabel', 'color', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src'] })
|
||||
export class Icon {
|
||||
@@ -730,16 +720,6 @@ export class SelectPopover {
|
||||
}
|
||||
}
|
||||
|
||||
export declare interface ShowWhen extends StencilComponents<'IonShowWhen'> {}
|
||||
@Component({ selector: 'ion-show-when', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['modes', 'orientation', 'mediaQuery', 'size', 'platform', 'or'] })
|
||||
export class ShowWhen {
|
||||
|
||||
constructor(r: ElementRef) {
|
||||
const el = r.nativeElement;
|
||||
proxyInputs(this, el, ['modes', 'orientation', 'mediaQuery', 'size', 'platform', 'or']);
|
||||
}
|
||||
}
|
||||
|
||||
export declare interface SkeletonText extends StencilComponents<'IonSkeletonText'> {}
|
||||
@Component({ selector: 'ion-skeleton-text', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['width'] })
|
||||
export class SkeletonText {
|
||||
|
||||
@@ -36,7 +36,6 @@ const DECLARATIONS = [
|
||||
d.Footer,
|
||||
d.Grid,
|
||||
d.Header,
|
||||
d.HideWhen,
|
||||
d.Icon,
|
||||
d.Img,
|
||||
d.InfiniteScroll,
|
||||
@@ -74,7 +73,6 @@ const DECLARATIONS = [
|
||||
d.Select,
|
||||
d.SelectOption,
|
||||
d.SelectPopover,
|
||||
d.ShowWhen,
|
||||
d.SkeletonText,
|
||||
d.Slide,
|
||||
d.Slides,
|
||||
|
||||
126
core/src/components.d.ts
vendored
126
core/src/components.d.ts
vendored
@@ -1595,59 +1595,6 @@ export namespace Components {
|
||||
'translucent'?: boolean;
|
||||
}
|
||||
|
||||
interface IonHideWhen {
|
||||
/**
|
||||
* If the current media query matches this value, the element will hide.
|
||||
*/
|
||||
'mediaQuery'?: string;
|
||||
/**
|
||||
* If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against.
|
||||
*/
|
||||
'modes': string;
|
||||
/**
|
||||
* If `false`, and two or more conditions are set, the element will hide when all are true. If `true`, and two or more conditions are set, the element will hide when at least one is true.
|
||||
*/
|
||||
'or': boolean;
|
||||
/**
|
||||
* If the current orientation matches this value, the element will hide.
|
||||
*/
|
||||
'orientation'?: string;
|
||||
/**
|
||||
* If the current platform matches the given value, the element will hide. Accepts a comma separated list of platforms to match against.
|
||||
*/
|
||||
'platform'?: string;
|
||||
/**
|
||||
* If the current screen width matches the given size, the element will hide. Uses the build in sizes of xs, sm, md, lg, xl.
|
||||
*/
|
||||
'size'?: string;
|
||||
}
|
||||
interface IonHideWhenAttributes extends StencilHTMLAttributes {
|
||||
/**
|
||||
* If the current media query matches this value, the element will hide.
|
||||
*/
|
||||
'mediaQuery'?: string;
|
||||
/**
|
||||
* If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against.
|
||||
*/
|
||||
'modes'?: string;
|
||||
/**
|
||||
* If `false`, and two or more conditions are set, the element will hide when all are true. If `true`, and two or more conditions are set, the element will hide when at least one is true.
|
||||
*/
|
||||
'or'?: boolean;
|
||||
/**
|
||||
* If the current orientation matches this value, the element will hide.
|
||||
*/
|
||||
'orientation'?: string;
|
||||
/**
|
||||
* If the current platform matches the given value, the element will hide. Accepts a comma separated list of platforms to match against.
|
||||
*/
|
||||
'platform'?: string;
|
||||
/**
|
||||
* If the current screen width matches the given size, the element will hide. Uses the build in sizes of xs, sm, md, lg, xl.
|
||||
*/
|
||||
'size'?: string;
|
||||
}
|
||||
|
||||
interface IonImg {
|
||||
/**
|
||||
* This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
|
||||
@@ -4238,59 +4185,6 @@ export namespace Components {
|
||||
'value'?: any | null;
|
||||
}
|
||||
|
||||
interface IonShowWhen {
|
||||
/**
|
||||
* If the current media query matches this value, the element will show.
|
||||
*/
|
||||
'mediaQuery'?: string;
|
||||
/**
|
||||
* If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against.
|
||||
*/
|
||||
'modes': string;
|
||||
/**
|
||||
* If `false`, and two or more conditions are set, the element will show when all are true. If `true`, and two or more conditions are set, the element will show when at least one is true.
|
||||
*/
|
||||
'or': boolean;
|
||||
/**
|
||||
* If the current orientation matches this value, the element will show.
|
||||
*/
|
||||
'orientation'?: string;
|
||||
/**
|
||||
* If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against.
|
||||
*/
|
||||
'platform'?: string;
|
||||
/**
|
||||
* If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl.
|
||||
*/
|
||||
'size'?: string;
|
||||
}
|
||||
interface IonShowWhenAttributes extends StencilHTMLAttributes {
|
||||
/**
|
||||
* If the current media query matches this value, the element will show.
|
||||
*/
|
||||
'mediaQuery'?: string;
|
||||
/**
|
||||
* If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against.
|
||||
*/
|
||||
'modes'?: string;
|
||||
/**
|
||||
* If `false`, and two or more conditions are set, the element will show when all are true. If `true`, and two or more conditions are set, the element will show when at least one is true.
|
||||
*/
|
||||
'or'?: boolean;
|
||||
/**
|
||||
* If the current orientation matches this value, the element will show.
|
||||
*/
|
||||
'orientation'?: string;
|
||||
/**
|
||||
* If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against.
|
||||
*/
|
||||
'platform'?: string;
|
||||
/**
|
||||
* If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl.
|
||||
*/
|
||||
'size'?: string;
|
||||
}
|
||||
|
||||
interface IonSkeletonText {
|
||||
/**
|
||||
* Width for the element to render at. Default is 100%
|
||||
@@ -5315,7 +5209,6 @@ declare global {
|
||||
'IonFooter': Components.IonFooter;
|
||||
'IonGrid': Components.IonGrid;
|
||||
'IonHeader': Components.IonHeader;
|
||||
'IonHideWhen': Components.IonHideWhen;
|
||||
'IonImg': Components.IonImg;
|
||||
'IonInfiniteScrollContent': Components.IonInfiniteScrollContent;
|
||||
'IonInfiniteScroll': Components.IonInfiniteScroll;
|
||||
@@ -5366,7 +5259,6 @@ declare global {
|
||||
'IonSelectOption': Components.IonSelectOption;
|
||||
'IonSelectPopover': Components.IonSelectPopover;
|
||||
'IonSelect': Components.IonSelect;
|
||||
'IonShowWhen': Components.IonShowWhen;
|
||||
'IonSkeletonText': Components.IonSkeletonText;
|
||||
'IonSlide': Components.IonSlide;
|
||||
'IonSlides': Components.IonSlides;
|
||||
@@ -5419,7 +5311,6 @@ declare global {
|
||||
'ion-footer': Components.IonFooterAttributes;
|
||||
'ion-grid': Components.IonGridAttributes;
|
||||
'ion-header': Components.IonHeaderAttributes;
|
||||
'ion-hide-when': Components.IonHideWhenAttributes;
|
||||
'ion-img': Components.IonImgAttributes;
|
||||
'ion-infinite-scroll-content': Components.IonInfiniteScrollContentAttributes;
|
||||
'ion-infinite-scroll': Components.IonInfiniteScrollAttributes;
|
||||
@@ -5470,7 +5361,6 @@ declare global {
|
||||
'ion-select-option': Components.IonSelectOptionAttributes;
|
||||
'ion-select-popover': Components.IonSelectPopoverAttributes;
|
||||
'ion-select': Components.IonSelectAttributes;
|
||||
'ion-show-when': Components.IonShowWhenAttributes;
|
||||
'ion-skeleton-text': Components.IonSkeletonTextAttributes;
|
||||
'ion-slide': Components.IonSlideAttributes;
|
||||
'ion-slides': Components.IonSlidesAttributes;
|
||||
@@ -5678,12 +5568,6 @@ declare global {
|
||||
new (): HTMLIonHeaderElement;
|
||||
};
|
||||
|
||||
interface HTMLIonHideWhenElement extends Components.IonHideWhen, HTMLStencilElement {}
|
||||
var HTMLIonHideWhenElement: {
|
||||
prototype: HTMLIonHideWhenElement;
|
||||
new (): HTMLIonHideWhenElement;
|
||||
};
|
||||
|
||||
interface HTMLIonImgElement extends Components.IonImg, HTMLStencilElement {}
|
||||
var HTMLIonImgElement: {
|
||||
prototype: HTMLIonImgElement;
|
||||
@@ -5984,12 +5868,6 @@ declare global {
|
||||
new (): HTMLIonSelectElement;
|
||||
};
|
||||
|
||||
interface HTMLIonShowWhenElement extends Components.IonShowWhen, HTMLStencilElement {}
|
||||
var HTMLIonShowWhenElement: {
|
||||
prototype: HTMLIonShowWhenElement;
|
||||
new (): HTMLIonShowWhenElement;
|
||||
};
|
||||
|
||||
interface HTMLIonSkeletonTextElement extends Components.IonSkeletonText, HTMLStencilElement {}
|
||||
var HTMLIonSkeletonTextElement: {
|
||||
prototype: HTMLIonSkeletonTextElement;
|
||||
@@ -6130,7 +6008,6 @@ declare global {
|
||||
'ion-footer': HTMLIonFooterElement
|
||||
'ion-grid': HTMLIonGridElement
|
||||
'ion-header': HTMLIonHeaderElement
|
||||
'ion-hide-when': HTMLIonHideWhenElement
|
||||
'ion-img': HTMLIonImgElement
|
||||
'ion-infinite-scroll-content': HTMLIonInfiniteScrollContentElement
|
||||
'ion-infinite-scroll': HTMLIonInfiniteScrollElement
|
||||
@@ -6181,7 +6058,6 @@ declare global {
|
||||
'ion-select-option': HTMLIonSelectOptionElement
|
||||
'ion-select-popover': HTMLIonSelectPopoverElement
|
||||
'ion-select': HTMLIonSelectElement
|
||||
'ion-show-when': HTMLIonShowWhenElement
|
||||
'ion-skeleton-text': HTMLIonSkeletonTextElement
|
||||
'ion-slide': HTMLIonSlideElement
|
||||
'ion-slides': HTMLIonSlidesElement
|
||||
@@ -6234,7 +6110,6 @@ declare global {
|
||||
'ion-footer': HTMLIonFooterElement;
|
||||
'ion-grid': HTMLIonGridElement;
|
||||
'ion-header': HTMLIonHeaderElement;
|
||||
'ion-hide-when': HTMLIonHideWhenElement;
|
||||
'ion-img': HTMLIonImgElement;
|
||||
'ion-infinite-scroll-content': HTMLIonInfiniteScrollContentElement;
|
||||
'ion-infinite-scroll': HTMLIonInfiniteScrollElement;
|
||||
@@ -6285,7 +6160,6 @@ declare global {
|
||||
'ion-select-option': HTMLIonSelectOptionElement;
|
||||
'ion-select-popover': HTMLIonSelectPopoverElement;
|
||||
'ion-select': HTMLIonSelectElement;
|
||||
'ion-show-when': HTMLIonShowWhenElement;
|
||||
'ion-skeleton-text': HTMLIonSkeletonTextElement;
|
||||
'ion-slide': HTMLIonSlideElement;
|
||||
'ion-slides': HTMLIonSlidesElement;
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:host(.hide-content) {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
import { Component, ComponentInterface, Element, Listen, Prop, State } from '@stencil/core';
|
||||
|
||||
import { Config } from '../../interface';
|
||||
import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-hide-when',
|
||||
styleUrl: './hide-when.scss',
|
||||
shadow: true
|
||||
})
|
||||
export class HideWhen implements ComponentInterface, DisplayWhen {
|
||||
|
||||
@Element() element!: HTMLElement;
|
||||
@Prop({ context: 'config' }) config!: Config;
|
||||
@Prop({ context: 'window' }) win!: Window;
|
||||
|
||||
/**
|
||||
* If the current platform matches the given value, the element will hide.
|
||||
* Accepts a comma separated list of modes to match against.
|
||||
*/
|
||||
@Prop() modes!: string;
|
||||
|
||||
/**
|
||||
* If the current orientation matches this value, the element will hide.
|
||||
*/
|
||||
@Prop() orientation?: string;
|
||||
|
||||
/**
|
||||
* If the current media query matches this value, the element will hide.
|
||||
*/
|
||||
@Prop() mediaQuery?: string;
|
||||
|
||||
/**
|
||||
* If the current screen width matches the given size, the element will hide.
|
||||
* Uses the build in sizes of xs, sm, md, lg, xl.
|
||||
*/
|
||||
@Prop() size?: string;
|
||||
|
||||
/**
|
||||
* If the current platform matches the given value, the element will hide.
|
||||
* Accepts a comma separated list of platforms to match against.
|
||||
*/
|
||||
@Prop() platform?: string;
|
||||
|
||||
/**
|
||||
* If `false`, and two or more conditions are set, the element will hide when all are true.
|
||||
* If `true`, and two or more conditions are set, the element will hide when at least one is true.
|
||||
*/
|
||||
@Prop() or = false;
|
||||
|
||||
@State() passesTest = false;
|
||||
|
||||
componentWillLoad() {
|
||||
this.onResize();
|
||||
}
|
||||
|
||||
@Listen('window:resize')
|
||||
onResize() {
|
||||
this.passesTest = getTestResult(this);
|
||||
}
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
class: {
|
||||
'hide-content': this.passesTest
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
# ion-hide-when
|
||||
|
||||
`HideWhen` is a component that will automatically hide itself and any child content when a property evaluates to true.
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type |
|
||||
| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
|
||||
| `mediaQuery` | `media-query` | If the current media query matches this value, the element will hide. | `string \| undefined` |
|
||||
| `modes` | `modes` | If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against. | `string` |
|
||||
| `or` | `or` | If `false`, and two or more conditions are set, the element will hide when all are true. If `true`, and two or more conditions are set, the element will hide when at least one is true. | `boolean` |
|
||||
| `orientation` | `orientation` | If the current orientation matches this value, the element will hide. | `string \| undefined` |
|
||||
| `platform` | `platform` | If the current platform matches the given value, the element will hide. Accepts a comma separated list of platforms to match against. | `string \| undefined` |
|
||||
| `size` | `size` | If the current screen width matches the given size, the element will hide. Uses the build in sizes of xs, sm, md, lg, xl. | `string \| undefined` |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,107 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Hide When - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Hide when - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
|
||||
<h2>Mode Tests</h2>
|
||||
<ion-hide-when modes="md, ios">
|
||||
<div>Hides on MD, iOS</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when modes="md">
|
||||
<div>Hides on MD only</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when modes="ios">
|
||||
<div>Hides on iOS only</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<h2>Orientation Tests</h2>
|
||||
<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>
|
||||
|
||||
<h2>Platform Tests</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<h2>Size Tests</h2>
|
||||
<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>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,107 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Hide When</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header translucent>
|
||||
<ion-toolbar>
|
||||
<ion-title>Hide when</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding fullscreen>
|
||||
|
||||
<h2>Mode Tests</h2>
|
||||
<ion-hide-when modes="md, ios">
|
||||
<div>Hides on MD, iOS</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when modes="md">
|
||||
<div>Hides on MD only</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when modes="ios">
|
||||
<div>Hides on iOS only</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<h2>Orientation Tests</h2>
|
||||
<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>
|
||||
|
||||
<h2>Platform Tests</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<h2>Size Tests</h2>
|
||||
<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>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
ion-toolbar {
|
||||
--background: white;
|
||||
}
|
||||
</style>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,78 +0,0 @@
|
||||
```html
|
||||
<ion-content padding>
|
||||
|
||||
<h2>Mode Tests</h2>
|
||||
<ion-hide-when modes="md, ios">
|
||||
<div>Hides on MD, iOS</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when modes="md">
|
||||
<div>Hides on MD only</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when modes="ios">
|
||||
<div>Hides on iOS only</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<h2>Orientation Tests</h2>
|
||||
<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>
|
||||
|
||||
<h2>Platform Tests</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<h2>Size Tests</h2>
|
||||
<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>
|
||||
|
||||
</ion-content>
|
||||
```
|
||||
@@ -1,24 +0,0 @@
|
||||
# ion-show-when
|
||||
|
||||
ShowWhen is a component that will automatically show it's child contents when a query evaluates to true.
|
||||
ShowWhen can watch for platform changes, mode changes, css media queries, and device orientation.
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type |
|
||||
| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
|
||||
| `mediaQuery` | `media-query` | If the current media query matches this value, the element will show. | `string \| undefined` |
|
||||
| `modes` | `modes` | If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against. | `string` |
|
||||
| `or` | `or` | If `false`, and two or more conditions are set, the element will show when all are true. If `true`, and two or more conditions are set, the element will show when at least one is true. | `boolean` |
|
||||
| `orientation` | `orientation` | If the current orientation matches this value, the element will show. | `string \| undefined` |
|
||||
| `platform` | `platform` | If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against. | `string \| undefined` |
|
||||
| `size` | `size` | If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl. | `string \| undefined` |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,7 +0,0 @@
|
||||
:host {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host(.show-content) {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import { Component, ComponentInterface, Element, Listen, Prop, State } from '@stencil/core';
|
||||
|
||||
import { Config } from '../../interface';
|
||||
import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-show-when',
|
||||
styleUrl: 'show-when.scss',
|
||||
shadow: true
|
||||
})
|
||||
export class ShowWhen implements ComponentInterface, DisplayWhen {
|
||||
|
||||
@Element() element?: HTMLElement;
|
||||
|
||||
@Prop({ context: 'config' }) config!: Config;
|
||||
@Prop({ context: 'window' }) win!: Window;
|
||||
|
||||
/**
|
||||
* If the current platform matches the given value, the element will show.
|
||||
* Accepts a comma separated list of modes to match against.
|
||||
*/
|
||||
@Prop() modes!: string;
|
||||
|
||||
/**
|
||||
* If the current orientation matches this value, the element will show.
|
||||
*/
|
||||
@Prop() orientation?: string;
|
||||
|
||||
/**
|
||||
* If the current media query matches this value, the element will show.
|
||||
*/
|
||||
@Prop() mediaQuery?: string;
|
||||
|
||||
/**
|
||||
* If the current screen width matches the given size, the element will show.
|
||||
* Uses the build in sizes of xs, sm, md, lg, xl.
|
||||
*/
|
||||
@Prop() size?: string;
|
||||
|
||||
/**
|
||||
* If the current platform matches the given value, the element will show.
|
||||
* Accepts a comma separated list of platform to match against.
|
||||
*/
|
||||
@Prop() platform?: string;
|
||||
|
||||
/**
|
||||
* If `false`, and two or more conditions are set, the element will show when all are true.
|
||||
* If `true`, and two or more conditions are set, the element will show when at least one is true.
|
||||
*/
|
||||
@Prop() or = false;
|
||||
|
||||
@State() passesTest = false;
|
||||
|
||||
componentWillLoad() {
|
||||
this.onResize();
|
||||
}
|
||||
|
||||
@Listen('window:resize')
|
||||
onResize() {
|
||||
this.passesTest = getTestResult(this);
|
||||
}
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
class: {
|
||||
'show-content': this.passesTest,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
}
|
||||
@@ -1,107 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Show When - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Show when - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
|
||||
<h2>Mode Tests</h2>
|
||||
<ion-show-when modes="md, ios">
|
||||
<div>Shows on MD, iOS</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when modes="md">
|
||||
<div>Shows on MD only</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when modes="ios">
|
||||
<div>Shows on iOS only</div>
|
||||
</ion-show-when>
|
||||
|
||||
<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>
|
||||
|
||||
<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 render on iOS</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when platform="android">
|
||||
<div>Only render on Android</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when platform="ipad">
|
||||
<div>Only render on ipad</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when platform="phablet">
|
||||
<div>Only render on phablet</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when platform="iphone">
|
||||
<div>Only render on phone</div>
|
||||
</ion-show-when>
|
||||
|
||||
<h2>Size Tests</h2>
|
||||
<ion-show-when size="xs">
|
||||
<div>Only render on xs</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when size="sm">
|
||||
<div>Only render on sm</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when size="md">
|
||||
<div>Only render on md</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when size="lg">
|
||||
<div>Only render on lg</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when size="xl">
|
||||
<div>Only render on xl</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when size="xs, m">
|
||||
<div>Only render on XS or m</div>
|
||||
</ion-show-when>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,109 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Show When</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header translucent>
|
||||
<ion-toolbar>
|
||||
<ion-title>Show when</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding fullscreen>
|
||||
|
||||
<h2>Mode Tests</h2>
|
||||
<ion-show-when modes="md, ios">
|
||||
<div>Shows on MD, iOS</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when modes="md">
|
||||
<div>Shows on MD only</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when modes="ios">
|
||||
<div>Shows on iOS only</div>
|
||||
</ion-show-when>
|
||||
|
||||
<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>
|
||||
|
||||
<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 render on iOS</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when platform="android">
|
||||
<div>Only render on Android</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when platform="ipad">
|
||||
<div>Only render on ipad</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when platform="phablet">
|
||||
<div>Only render on phablet</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when platform="iphone">
|
||||
<div>Only render on phone</div>
|
||||
</ion-show-when>
|
||||
|
||||
<h2>Size Tests</h2>
|
||||
<ion-show-when size="xs">
|
||||
<div>Only render on xs</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when size="sm">
|
||||
<div>Only render on sm</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when size="md">
|
||||
<div>Only render on md</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when size="lg">
|
||||
<div>Only render on lg</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when size="xl">
|
||||
<div>Only render on xl</div>
|
||||
</ion-show-when>
|
||||
|
||||
<ion-show-when size="xs, m">
|
||||
<div>Only render on XS or m</div>
|
||||
</ion-show-when>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
</ion-app>
|
||||
|
||||
<style>
|
||||
ion-toolbar {
|
||||
--background: white;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,78 +0,0 @@
|
||||
import { Config } from '../interface';
|
||||
|
||||
import { matchBreakpoint } from './media';
|
||||
import { isPlatform } from './platform';
|
||||
|
||||
export interface DisplayWhen {
|
||||
config: Config;
|
||||
win: Window;
|
||||
mediaQuery?: string;
|
||||
modes?: string;
|
||||
or: boolean;
|
||||
orientation?: string;
|
||||
platform?: string;
|
||||
size?: string;
|
||||
}
|
||||
|
||||
function isPlatformMatch(win: Window, multiPlatformString: string) {
|
||||
const platforms = split(multiPlatformString);
|
||||
return platforms.some(p => isPlatform(win, p as any));
|
||||
}
|
||||
|
||||
function isModeMatch(config: Config, multiModeString: string) {
|
||||
const modes = split(multiModeString);
|
||||
const currentMode = config.get('mode');
|
||||
return modes.includes(currentMode);
|
||||
}
|
||||
|
||||
function isSizeMatch(win: Window, multiSizeString: string) {
|
||||
const sizes = split(multiSizeString);
|
||||
return sizes.some(s => matchBreakpoint(win, s));
|
||||
}
|
||||
|
||||
function split(multiOptions: string): string[] {
|
||||
return multiOptions.replace(/\s/g, '').split(',');
|
||||
}
|
||||
|
||||
export function getTestResult(displayWhen: DisplayWhen) {
|
||||
const results: boolean[] = [];
|
||||
if (displayWhen.mediaQuery !== undefined) {
|
||||
results.push(matchMedia(displayWhen.win, displayWhen.mediaQuery));
|
||||
}
|
||||
if (displayWhen.size !== undefined) {
|
||||
results.push(isSizeMatch(displayWhen.win, displayWhen.size));
|
||||
}
|
||||
if (displayWhen.modes !== undefined) {
|
||||
results.push(isModeMatch(displayWhen.config, displayWhen.modes));
|
||||
}
|
||||
if (displayWhen.platform !== undefined) {
|
||||
results.push(isPlatformMatch(displayWhen.win, displayWhen.platform));
|
||||
}
|
||||
if (displayWhen.orientation !== undefined) {
|
||||
results.push(isOrientationMatch(displayWhen.win, displayWhen.orientation));
|
||||
}
|
||||
|
||||
if (displayWhen.or) {
|
||||
return results.some(r => r);
|
||||
} else {
|
||||
return results.every(r => r);
|
||||
}
|
||||
}
|
||||
|
||||
function isOrientationMatch(win: Window, orientation: string) {
|
||||
if (orientation === 'portrait') {
|
||||
return isPortrait(win);
|
||||
} else if (orientation === 'landscape') {
|
||||
return !isPortrait(win);
|
||||
}
|
||||
// it's an invalid orientation, so just return it
|
||||
return false;
|
||||
}
|
||||
|
||||
function isPortrait(win: Window): boolean {
|
||||
return matchMedia(win, '(orientation: portrait)');
|
||||
}
|
||||
|
||||
function matchMedia(win: Window, query: string): boolean {
|
||||
return win.matchMedia(query).matches;
|
||||
}
|
||||
@@ -18,7 +18,6 @@ export const config: Config = {
|
||||
{ components: ['ion-datetime', 'ion-picker', 'ion-picker-column', 'ion-picker-controller'] },
|
||||
{ components: ['ion-fab', 'ion-fab-button', 'ion-fab-list'] },
|
||||
{ components: ['ion-grid', 'ion-row', 'ion-col'] },
|
||||
{ components: ['ion-hide-when', 'ion-show-when'] },
|
||||
{ components: ['ion-infinite-scroll', 'ion-infinite-scroll-content'] },
|
||||
{ components: ['ion-input'] },
|
||||
{ components: ['ion-textarea'] },
|
||||
|
||||
Reference in New Issue
Block a user