javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-24 14:58:36 +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

2
core/src/components/show-when/readme.md
View File

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

34
core/src/components/show-when/show-when.tsx
View File

@ -1,9 +1,7 @@
import { Component, Element, Listen, Prop, State } from '@stencil/core';
import { Config, Mode } from '../../interface';
import {
DisplayWhen, PLATFORM_CONFIGS, PlatformConfig, detectPlatforms, updateTestResults,
} from '../../utils/show-hide-when-utils';
import { DisplayWhen, PLATFORM_CONFIGS, PlatformConfig, detectPlatforms, updateTestResults } from '../../utils/show-hide-when-utils';
@Component({
tag: 'ion-show-when',
@ -11,18 +9,44 @@ import {
})
export class ShowWhen implements DisplayWhen {
mode!: Mode;
@Element() element?: HTMLElement;
@Prop({ context: 'config' }) config!: Config;
@Prop({ context: 'platforms' }) calculatedPlatforms!: PlatformConfig[];
@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() mode!: Mode;
/**
* 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;