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

问题描述 投票:1回答:1

我正在使用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>
angular angular-cdk
1个回答
2
投票

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

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

这是正确的方法:

cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"

来自Documentation

一次性字符串初始化

如果满足以下所有条件,则应省略括号:

  • target属性接受字符串值。
  • 该字符串是一个固定值,您可以将其烘焙到模板中。
  • 这个初始值永远不会改变。
© www.soinside.com 2019 - 2024. All rights reserved.