Question

我正在使用cdkoverlay，它似乎具有默认的深色背景。查看文档Overlay Documentation，我应该能够通过设置背景类更改为透明背景。我在做错什么吗？

角度版本-7.2.7
cdk版本-7.3.3

<button mat-icon-button (click)="isOpen = !isOpen" cdkOverlayOrigin 
        #trigger="cdkOverlayOrigin">
  <mat-icon>opacity</mat-icon>
</button>

<ng-template cdkConnectedOverlay 
        [cdkConnectedOverlayHasBackdrop]="true"
        [cdkConnectedOverlayBackdropClass]="cdk-overlay-transparent-backdrop"   
        (backdropClick)="isOpen = false" 
        [cdkConnectedOverlayOrigin]="trigger" 
        [cdkConnectedOverlayOpen]="isOpen">

    <div class="e6-menu-panel" role="dialog">
    <div class="e6-grid-container" role="listbox" tabindex="0" cdkTrapFocus>
    <div class="e6-grid-item" *ngFor="let theme of themes; index as i"
        (click)="install(theme); isOpen=false" role="option"
        [style.background-color]="theme.primary">

        <mat-icon class="e6-active-icon" *ngIf="current == theme">
          check_circle
        </mat-icon>
    </div>
    </div>
    </div>

</ng-template>

Answer 1

我以错误的方式添加了透明类：

[cdkConnectedOverlayBackdropClass]="cdk-overlay-transparent-backdrop"

这是正确的方法：

cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"

来自Documentation：

一次性字符串初始化

满足以下所有条件时，请省略方括号：


target属性接受字符串值。

字符串是一个固定值，您可以将其烘焙到模板中。

此初始值永不变。

角材料7 cdkoverlay设置透明/自定义背景类

1 个答案: