javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feature(hide-when): initial implementation of hide-when

Browse Source
This commit is contained in:
Dan Bucholtz
2018-02-19 22:00:03 -06:00
parent eb8591c268
commit eff78faa56
6 changed files with 283 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
packages/core/src/components.d.ts vendored
View File

@ -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 { import {
InfiniteScrollContent as IonInfiniteScrollContent InfiniteScrollContent as IonInfiniteScrollContent
} from './components/infinite-scroll-content/infinite-scroll-content'; } 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 { import {
SkeletonText as IonSkeletonText SkeletonText as IonSkeletonText
} from './components/skeleton-text/skeleton-text'; } from './components/skeleton-text/skeleton-text';

7
packages/core/src/components/hide-when/hide-when.scss Normal file
View File

@ -0,0 +1,7 @@
ion-hide-when.show-content {
display: block;
}
ion-hide-when.hide-content {
display: none !important;
}

46
packages/core/src/components/hide-when/hide-when.tsx Normal file
View File

@ -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 <slot></slot>
}
}

65
packages/core/src/components/hide-when/readme.md Normal file
View File

@ -0,0 +1,65 @@
# ion-hide-when
<!-- Auto Generated Below -->
## 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/)*

96
packages/core/src/components/hide-when/test/basic/index.html Normal file
View File

@ -0,0 +1,96 @@
<!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">
<script src="/dist/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-page>
<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 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>
<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-page>
</ion-app>
<script>
</script>
</body>
</html>

1
packages/core/stencil.config.js
View File

@ -48,6 +48,7 @@ exports.config = {
{ components: ['ion-tap-click', 'ion-status-tap'] }, { components: ['ion-tap-click', 'ion-status-tap'] },
{ components: ['ion-platform', 'ion-cordova-platform'] }, { components: ['ion-platform', 'ion-cordova-platform'] },
{ components: ['ion-nav-pop'] }, { components: ['ion-nav-pop'] },
{ components: ['ion-hide-when', 'ion-show-when'] },
], ],
plugins: [ plugins: [
sass(), sass(),