2.0.1 • Published 4 years ago
ng-peek-behind v2.0.1
NgPeekBehind
Utility directive to peek behind overlay panels and dialogs.
Usage
<div class="cdk-overlay-pane dialog">
<!--Nested inside-->
<button
[libPeekBehind]="'cdk-overlay-pane'"
[libPeekBehindTrigger]="showPanel"
>
</button>
</div>Setting showPanel = false will fade away the dialog and showPanel = true will fade it in.
Inputs
| Input | Type | Value | Default |
|---|---|---|---|
| libPeekBehind | string | Class to identify parent overlay dialog. | 'cdk-overlay-dialog' |
| libPeekBehindTrigger | boolean | This input triggers the fade in/out transitions. true will fade in the dialog. false will fade out the dialog. | - |
Fallback directive
libPeekBehind directive uses Angular's Animations and AnimationBuilder under the hood. In case you are not happy with the responsiveness, consider using libPeekBehindListener which relies on @HostListeners to do the job.
In libPeekBehindListener, the peeker will listen for mousedown event on the attached element to fade out and document:mouseup event to fade in, custom trigger cannot be configured -
Inputs
| Input | Type | Value | Default |
|---|---|---|---|
| libPeekBehindListener | string | Class to identify parent overlay dialog. | 'cdk-overlay-dialog' |
Usage
<div class="cdk-overlay-pane dialog">
<!--Nested inside-->
<button
[libPeekBehindListener]="'cdk-overlay-pane'"
>
</button>
</div>