javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(show-hide-when): restructure show-when, hide-when component to separate modules

Browse Source 
restructure show-when, hide-when component to separate modules
This commit is contained in:
Dan Bucholtz
2017-03-02 15:01:02 -06:00
parent 2ef6d0ca75
commit d5149313e6
2 changed files with 64 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/show-hide-when/hide-when.ts Normal file
View File

@ -0,0 +1,64 @@
import { Attribute, Directive, NgZone } from '@angular/core';
import { Platform } from '../../platform/platform';
import { DisplayWhen } from './show-hide-when';
/**
* @name HideWhen
* @description
* The `hideWhen` attribute takes a string that represents a plaform or screen orientation.
* The element the attribute is added to will only be hidden when that platform or screen orientation is active.
*
* Complements the [showWhen attribute](../ShowWhen). If the `hideWhen` attribute is used on an
* element that also has the `showWhen` attribute, the element will not show if `hideWhen` evaluates
* to `true` or `showWhen` evaluates to `false`. If the `hidden` attribute is also added, the element
* will not show if `hidden` evaluates to `true`.
*
* View the [Platform API docs](../../../platform/Platform) for more information on the different
* platforms you can use.
*
* @usage
* ```html
* <div hideWhen="android">
* I am hidden on Android!
* </div>
*
* <div hideWhen="ios">
* I am hidden on iOS!
* </div>
*
* <div hideWhen="android,ios">
* I am hidden on Android and iOS!
* </div>
*
* <div hideWhen="portrait">
* I am hidden on Portrait!
* </div>
*
* <div hideWhen="landscape">
* I am hidden on Landscape!
* </div>
* ```
*
* @demo /docs/v2/demos/src/hide-when/
* @see {@link ../ShowWhen ShowWhen API Docs}
* @see {@link ../../../platform/Platform Platform API Docs}
*/
@Directive({
selector: '[hideWhen]',
host: {
'[class.hidden-hide-when]': 'isMatch'
}
})
export class HideWhen extends DisplayWhen {
constructor(
@Attribute('hideWhen') hideWhen: string,
plt: Platform,
zone: NgZone
) {
super(hideWhen, plt, zone);
}
}

61
src/components/show-hide-when/show-hide-when.ts
View File

@ -114,64 +114,3 @@ export class ShowWhen extends DisplayWhen {
// ngOnDestroy is implemente in DisplayWhen // ngOnDestroy is implemente in DisplayWhen
} }
/**
* @name HideWhen
* @description
* The `hideWhen` attribute takes a string that represents a plaform or screen orientation.
* The element the attribute is added to will only be hidden when that platform or screen orientation is active.
*
* Complements the [showWhen attribute](../ShowWhen). If the `hideWhen` attribute is used on an
* element that also has the `showWhen` attribute, the element will not show if `hideWhen` evaluates
* to `true` or `showWhen` evaluates to `false`. If the `hidden` attribute is also added, the element
* will not show if `hidden` evaluates to `true`.
*
* View the [Platform API docs](../../../platform/Platform) for more information on the different
* platforms you can use.
*
* @usage
* ```html
* <div hideWhen="android">
* I am hidden on Android!
* </div>
*
* <div hideWhen="ios">
* I am hidden on iOS!
* </div>
*
* <div hideWhen="android,ios">
* I am hidden on Android and iOS!
* </div>
*
* <div hideWhen="portrait">
* I am hidden on Portrait!
* </div>
*
* <div hideWhen="landscape">
* I am hidden on Landscape!
* </div>
* ```
*
* @demo /docs/v2/demos/src/hide-when/
* @see {@link ../ShowWhen ShowWhen API Docs}
* @see {@link ../../../platform/Platform Platform API Docs}
*/
@Directive({
selector: '[hideWhen]',
host: {
'[class.hidden-hide-when]': 'isMatch'
}
})
export class HideWhen extends DisplayWhen {
constructor(
@Attribute('hideWhen') hideWhen: string,
plt: Platform,
zone: NgZone
) {
super(hideWhen, plt, zone);
}
// ngOnDestroy is implemente in DisplayWhen
}