[Angular] Overlay CDK

易美發表於 2021-9-30 18:42:00

Some basic exmaple on Doc: https://material.angular.io/cdk/overlay/overview
 
<div class="cnblogs_code">
<pre>
<button (click)="isOpen = !isOpen" type="button" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
{{isOpen ? "Close" : "Open"}}
</button>


<ng-template
cdkConnectedOverlay
="trigger"
="isOpen"
>
<ul class="example-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</ng-template></pre>
</div>
 
<h2>Positioning</h2>
<div class="cnblogs_code">
<pre>="positions"</pre>
</div>
<div class="cnblogs_code">
<pre>import {
Component,
OnInit,
ChangeDetectionStrategy,
ViewChild,
ElementRef,
} from '@angular/core';
import { FocusMonitor } from '@angular/cdk/a11y';
import {
CdkConnectedOverlay,
ConnectedPosition,
ScrollStrategyOptions,
ScrollStrategy,
} from '@angular/cdk/overlay';
import { OverlayReference } from '@angular/cdk/overlay/overlay-reference';
...

@Component({
...
})
export class DropDownSearchComponent implements OnInit {

positions: ConnectedPosition[] = [
{
 originX: 'center',
 originY: 'bottom',
 overlayX: 'center',
 overlayY: 'top',
 offsetY: -21,
},
{
 originX: 'center',
 originY: 'top',
 overlayX: 'center',
 overlayY: 'bottom',
 panelClass: 'no-enogh-space-at-bottom',
},
];

} </pre>
</div>
We have defined two Postions:
1. Center aligned. Overlay stay bottom
<img src="https://img2020.cnblogs.com/blog/364241/202109/364241-20210930182201926-518950260.png" alt="" width="615" height="289" loading="lazy">
2. Center aligned. Overlay stay on top, if not enough space at bottom
<img src="https://img2020.cnblogs.com/blog/364241/202109/364241-20210930182238278-1421414352.png" alt="" width="613" height="253" loading="lazy">
Basiclly it will go though each position in array, apply it if previous position has not enough space for showing.
 
<h2>Creating Overlay and define position</h2>
<div class="cnblogs_code">
<pre>import {
ConnectedPosition,
Overlay,
OverlayPositionBuilder,
} from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';

@Component({
...
})
export class AppComponent implements OnInit {

@ViewChild(DropDownSearchComponent, { read: ElementRef, static: true })
dropdown;

createDialog() {
const overlayRef = this.overly.create({
 hasBackdrop: true,
 positionStrategy: this.positionBuilder
 .global()
 .centerHorizontally()
 .centerVertically(),
 // .flexibleConnectedTo(this.dropdown)
 // .withPositions([
 // {
 // // here, top-left of the overlay is connected to bottom-left of the origin;
 // // of course, you can change this object or generate it dynamically;
 // // moreover, you can specify multiple objects in this array for CDK to find the most suitable option
 // originX: 'center',
 // originY: 'bottom',
 // overlayX: 'center',
 // overlayY: 'top',
 // } as ConnectedPosition,
 // ])
 // .withPush(false),
 });
const dialogPortal = new ComponentPortal(DialogComponent);
overlayRef.attach(dialogPortal);
overlayRef.backdropClick().subscribe(() => overlayRef.detach());
}
}</pre>
</div>
 
you can have
1. global position: for example center the overlay
2. flex position: attach to one origin
 
<h2>Scolling</h2>
<div class="cnblogs_code">
<pre>="scrollStrategy"</pre>
</div>
<div class="cnblogs_code">
<pre>import {
CdkConnectedOverlay,
ConnectedPosition,
ScrollStrategyOptions,
ScrollStrategy,
} from '@angular/cdk/overlay';

@Component({
...
})
export class DropDownSearchComponent implements OnInit {

scrollStrategy: ScrollStrategy;

constructor(
private focusMonitor: FocusMonitor,
private scrollStrategies: ScrollStrategyOptions
) {}

// this.scrollStrategy = new ConfirmScrollStrategy(this.inputEl); // this.scrollStrategy = this.scrollStrategies.none()
// this.scrollStrategy = this.scrollStrategies.block();
// this.scrollStrategy = this.scrollStrategies.close({
// threshold: 50,
// });
this.scrollStrategy = this.scrollStrategies.reposition();
..
}

class ConfirmScrollStrategy implements ScrollStrategy {
_overlay: OverlayReference;

constructor(private inputRef: ElementRef) {}

attach(overlayRef: OverlayReference) {
this._overlay = overlayRef;
}

enable() {
document.addEventListener('scroll', this.scrollListener);
}

disable() {
document.removeEventListener('scroll', this.scrollListener);
}

private scrollListener = () => {
if (confirm('The overlay will be closed. Procced?')) {
 this._overlay.detach();
 this.inputRef.nativeElement.blur();
 return;
}
this._overlay.updatePosition();
};
}</pre>
</div>
There are 4 built-in srolling types:
1. none: Overlay stay where it was, no matter how you scroll your app
2. block: App cannot scroll at all
3. close: close the overlay once over the threhold
4. reposition: follow the origin when srcolling
 
You can also build a custom scrolling type as the one ´ConfirmScrollStrategy´.
 
<h2>Misc</h2>
<h3>Breakpoint</h3>
<div class="cnblogs_code">
<pre>import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
..

constructor(
..
private breakpointObserver: BreakpointObserver
) {}

ngOnInit(): void {
if (this.breakpointObserver.isMatched('(max-width: 600px)')) {
 console.info('The screen width is less than 600px');
}
this.isWideScreen$ = this.breakpointObserver
 .observe()
 .pipe(map(({ matches }) => matches));
}</pre>
</div>
 
<h3>focusMonitor</h3>
<div class="cnblogs_code">
<pre>import { FocusMonitor } from '@angular/cdk/a11y';

constructor(
private focusMonitor: FocusMonitor,

) {}

this.isPanelVisible$ = this.focusMonitor.monitor(this.inputEl).pipe()

}</pre>
</div>
 
<h3>Listen to keyboard event for Overlay</h3>
<div class="cnblogs_code">
<div>import { ESCAPE } from '@angular/cdk/keycodes';</div>
<pre> @ViewChild(CdkConnectedOverlay, { static: true })
private connectedOverlay: CdkConnectedOverlay;

const onEscClick$ = this.connectedOverlay.overlayKeydown.pipe(
 filter(({ keyCode }) => {
 return keyCode === ESCAPE;
 })
);</pre>
</div>
 
<h3>More directives</h3>
<div class="cnblogs_code">
<pre><ng-template
cdkConnectedOverlay
cdkConnectedOverlayHasBackdrop
cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
="scrollStrategy"
="originOverlay"
="showPanel$ | async"
="positions"
></pre>
</div>
 
Code:
https://github.com/DMezhenskyi/angular-cdk-lessons
videos:
https://www.youtube.com/watch?v=2pS9bYtsBRo 
来源：https://www.cnblogs.com/Answer1215/p/15357882.html

頁: [1]

琼殿技术论坛's Archiver

[Angular] Overlay CDK