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

docs(): updates

Browse Source
This commit is contained in:
mhartington
2018-06-26 13:40:07 -04:00
parent 0e6498a112
commit fdacd77f50
21 changed files with 168 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
core/src/components/hide-when/hide-when.tsx
View File

@ -11,17 +11,44 @@ import {
})
export class HideWhen implements DisplayWhen {
mode!: Mode;
calculatedPlatforms!: PlatformConfig[];
@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() mode!: Mode;
/**
* 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 platform 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;

1
core/src/components/hide-when/readme.md
View File

@ -1,5 +1,6 @@
# 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 -->

78
core/src/components/hide-when/usage/javascript.md Normal file
View File

@ -0,0 +1,78 @@
```html
<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>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>
```