угловой материал 7 cdkoverlay set прозрачный / нестандартный класс фона - PullRequest
Новая
       10

угловой материал 7 cdkoverlay set прозрачный / нестандартный класс фона

0 голосов
/ 02 марта 2019

Я использую cdkoverlay, который, кажется, имеет темный фон по умолчанию.Глядя на документы Оверлейная документация , я смогу перейти на прозрачный фон, установив класс фона.Я что-то не так делаю?

угловая версия - 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>

1 Ответ

0 голосов
/ 05 марта 2019

Я добавил прозрачный класс неверным способом: 

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

Это правильный путь: 

cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"

Из Документации :

Однократная инициализация строки

Вы должны опустить скобки, когда выполняются все следующие условия:

  • Свойство target принимаетстроковое значение.
  • Строка - это фиксированное значение, которое вы можете вставить в шаблон.
  • Это начальное значение никогда не меняется.
...