要设置Angular Material 7 CDK Overlay的透明/自定义背景样式,你可以遵循以下步骤:
import { OverlayModule } from '@angular/cdk/overlay';
import { MatTooltipModule } from '@angular/material/tooltip';
import { Component, ViewChild, TemplateRef, ElementRef, ViewContainerRef, OnInit } from '@angular/core';
import { Overlay, OverlayRef, OverlayConfig } from '@angular/cdk/overlay';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
@ViewChild('template', { static: true }) templateRef: TemplateRef;
overlayRef: OverlayRef;
constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef) { }
ngOnInit() {
const positionStrategy = this.overlay.position().global().centerHorizontally().centerVertically();
const overlayConfig = new OverlayConfig({
positionStrategy: positionStrategy,
hasBackdrop: true, // 设置是否有背景遮罩
backdropClass: 'cdk-overlay-transparent-backdrop' // 设置背景遮罩样式
});
this.overlayRef = this.overlay.create(overlayConfig);
}
openOverlay() {
this.overlayRef.attach(new TemplatePortal(this.templateRef, this.viewContainerRef));
}
closeOverlay() {
this.overlayRef.detach();
}
}
.cdk-overlay-transparent-backdrop {
background-color: rgba(0, 0, 0, 0.5); // 设置透明背景颜色
}
.cdk-overlay-custom-content {
background-color: #fff; // 设置自定义内容的背景颜色
padding: 20px;
}
这样,你就可以根据需要设置Angular Material 7 CDK Overlay的透明/自定义背景样式了。