mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import { Attribute, Directive, NgZone } from '@angular/core';
|
|
|
|
import { Platform } from '../../platform/platform';
|
|
|
|
import { DisplayWhen } from './display-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/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);
|
|
}
|
|
|
|
}
|