docs(): updates

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

View File

@ -3,6 +3,7 @@ import { Animation, AnimationBuilder, AnimationController } from '../../interfac
import { Animator } from './animator'; import { Animator } from './animator';
/** @hidden */
@Component({ @Component({
tag: 'ion-animation-controller' tag: 'ion-animation-controller'
}) })

View File

@ -2,6 +2,7 @@
`ion-card-header` is a header component for `ion-card`. `ion-card-header` is a header component for `ion-card`.
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

View File

@ -1,6 +1,6 @@
# ion-chip-button # ion-chip-button
A chip-button is an inset button that is placed inside of a chip. A ChipButton is an inset button that is placed inside of a Chip. For more information, see the [Chip Docs](../chip)
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

View File

@ -1,6 +1,7 @@
# ion-gesture-controller # ion-gesture-controller
Gesture controller is a component for creating a gesture interactions.
Gesture controller is a component for creating a gesture interactions.
It is not meant to be used directly, but with the [Gesture Component](../gesture)
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

View File

@ -1,18 +1,5 @@
import { import { Component, EventListenerEnable, Listen, Prop, Watch } from '@stencil/core';
Component, import { BlockerConfig, BlockerDelegate, GestureCallback, GestureDelegate, GestureDetail, QueueController } from '../../interface';
EventListenerEnable,
Listen,
Prop,
Watch
} from '@stencil/core';
import {
BlockerConfig,
BlockerDelegate,
GestureCallback,
GestureDelegate,
GestureDetail,
QueueController
} from '../../interface';
import { assert, now } from '../../utils/helpers'; import { assert, now } from '../../utils/helpers';
import { PanRecognizer } from './recognizers'; import { PanRecognizer } from './recognizers';
@ -36,17 +23,13 @@ export class Gesture {
private isMoveQueued = false; private isMoveQueued = false;
private blocker?: BlockerDelegate; private blocker?: BlockerDelegate;
@Prop({ connect: 'ion-gesture-controller' }) @Prop({ connect: 'ion-gesture-controller' }) gestureCtrl!: HTMLIonGestureControllerElement;
gestureCtrl!: HTMLIonGestureControllerElement;
@Prop({ context: 'queue' }) @Prop({ context: 'queue' }) queue!: QueueController;
queue!: QueueController;
@Prop({ context: 'enableListener' }) @Prop({ context: 'enableListener' }) enableListener!: EventListenerEnable;
enableListener!: EventListenerEnable;
@Prop({ context: 'isServer' }) @Prop({ context: 'isServer' }) isServer!: boolean;
isServer!: boolean;
/** /**
* If true, the current gesture interaction is disabled * If true, the current gesture interaction is disabled

View File

@ -1,5 +1,7 @@
# ion-gesture # ion-gesture
Gesture is a component that can be used to add gesture based interaction to it's child content.
The component properties can accept methods that will fire when the property is triggered.
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

View File

@ -11,17 +11,44 @@ import {
}) })
export class HideWhen implements DisplayWhen { export class HideWhen implements DisplayWhen {
mode!: Mode;
calculatedPlatforms!: PlatformConfig[]; calculatedPlatforms!: PlatformConfig[];
@Element() element!: HTMLElement; @Element() element!: HTMLElement;
@Prop({ context: 'config' }) config!: Config; @Prop({ context: 'config' }) config!: Config;
@Prop({ context: 'window' }) win!: Window; @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; @Prop() orientation?: string;
/**
* If the current media query matches this value, the element will hide.
*/
@Prop() mediaQuery?: string; @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; @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; @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; @Prop() or = false;
@State() passesTest = false; @State() passesTest = false;

View File

@ -1,5 +1,6 @@
# ion-hide-when # 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 --> <!-- Auto Generated Below -->

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>
```

View File

@ -1,6 +1,7 @@
# ion-item-divider # ion-item-divider
Item Divider is divider component for list items. Item Divider is divider component for list items.
Similar to ListHeaders, item dividers are styled to be inset with the rest of the list items.
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

View File

@ -1,5 +1,7 @@
# ion-label # ion-label
Label is a wrapper element that can be used in combination with `ion-item`.
Label is a wrapper element that can be used in combination with `ion-item` and `ion-input`.
The position of the label can be controlled to be either stacked, inline, or floating.
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

View File

@ -1,5 +1,7 @@
# ion-list-header # ion-list-header
List header a header component for a list.
ListHeader a header component for a list.
Unlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the list items.
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

View File

@ -4,6 +4,7 @@ import { hapticSelectionChanged } from '../../utils';
import { clamp } from '../../utils/helpers'; import { clamp } from '../../utils/helpers';
/** @hidden */
@Component({ @Component({
tag: 'ion-picker-column', tag: 'ion-picker-column',
host: { host: {

View File

@ -3,6 +3,7 @@ import { PickerOptions } from '../../interface';
import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays'; import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
/** @hidden */
@Component({ @Component({
tag: 'ion-picker-controller' tag: 'ion-picker-controller'
}) })

View File

@ -1,6 +1,7 @@
import { Component, Event, EventEmitter, Listen, Prop } from '@stencil/core'; import { Component, Event, EventEmitter, Listen, Prop } from '@stencil/core';
import { Knob } from '../../interface'; import { Knob } from '../../interface';
/** @hidden */
@Component({ @Component({
tag: `ion-range-knob` tag: `ion-range-knob`
}) })

View File

@ -1,6 +1,8 @@
# ion-button-effect # ion-ripple-effect
RippleEffect is component that adds the Material Design button ripple effect.
This is the stand alone version of the ripple effect and can be added to any component.
RippleEffect is component that adds the Material Design button ripple to any element.

View File

@ -15,7 +15,7 @@ export class RippleEffect {
@Prop({context: 'enableListener'}) enableListener!: EventListenerEnable; @Prop({context: 'enableListener'}) enableListener!: EventListenerEnable;
@Prop({ context: 'document' }) doc!: Document; @Prop({ context: 'document' }) doc!: Document;
/** @hidden */ /** If true, the ripple effect will listen to any click events and animate */
@Prop() tapClick = false; @Prop() tapClick = false;
@Watch('tapClick') @Watch('tapClick')
tapClickChanged(tapClick: boolean) { tapClickChanged(tapClick: boolean) {

View File

@ -1,5 +1,7 @@
# ion-show-when # 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 --> <!-- Auto Generated Below -->

View File

@ -1,9 +1,7 @@
import { Component, Element, Listen, Prop, State } from '@stencil/core'; import { Component, Element, Listen, Prop, State } from '@stencil/core';
import { Config, Mode } from '../../interface'; import { Config, Mode } from '../../interface';
import { import { DisplayWhen, PLATFORM_CONFIGS, PlatformConfig, detectPlatforms, updateTestResults } from '../../utils/show-hide-when-utils';
DisplayWhen, PLATFORM_CONFIGS, PlatformConfig, detectPlatforms, updateTestResults,
} from '../../utils/show-hide-when-utils';
@Component({ @Component({
tag: 'ion-show-when', tag: 'ion-show-when',
@ -11,18 +9,44 @@ import {
}) })
export class ShowWhen implements DisplayWhen { export class ShowWhen implements DisplayWhen {
mode!: Mode;
@Element() element?: HTMLElement; @Element() element?: HTMLElement;
@Prop({ context: 'config' }) config!: Config; @Prop({ context: 'config' }) config!: Config;
@Prop({ context: 'platforms' }) calculatedPlatforms!: PlatformConfig[]; @Prop({ context: 'platforms' }) calculatedPlatforms!: PlatformConfig[];
@Prop({ context: 'window' }) win!: Window; @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; @Prop() orientation?: string;
/**
* If the current media query matches this value, the element will show.
*/
@Prop() mediaQuery?: string; @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; @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; @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; @Prop() or = false;
@State() passesTest = false; @State() passesTest = false;

View File

@ -1,6 +1,7 @@
import { Component, Listen, Prop } from '@stencil/core'; import { Component, Listen, Prop } from '@stencil/core';
import { QueueController } from '../../interface'; import { QueueController } from '../../interface';
/** @hidden */
@Component({ @Component({
tag: 'ion-status-tap' tag: 'ion-status-tap'
}) })

View File

@ -2,6 +2,7 @@ import { Component, Element, EventListenerEnable, Listen, Prop } from '@stencil/
import { now, pointerCoord } from '../../utils/helpers'; import { now, pointerCoord } from '../../utils/helpers';
/** @hidden */
@Component({ @Component({
tag: 'ion-tap-click', tag: 'ion-tap-click',
}) })