时间戳

首页 > 解决方案 > Angular CDK Connected Overlay，如何不使用覆盖背景覆盖原点？

css - Angular CDK Connected Overlay，如何不使用覆盖背景覆盖原点？

问题描述

我正在尝试创建一个覆盖材料表中的一行。我已经完成了这项工作，但问题是我不希望它所连接的原始行被覆盖背景覆盖，但我确实希望它所覆盖的页面的其余部分。我尝试在叠加层中的元素上添加一些填充并将其定位到顶部，但这显然没有得到它。

这是我的行 html：

<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
  cdkOverlayOrigin
  #row
  (click)="setOverlay(row)">

和一些测试代码来设置覆盖：

  @ViewChildren(CdkOverlayOrigin)
  orgins: QueryList<CdkOverlayOrigin>;

  @ViewChildren('row')
  rows: QueryList<ElementRef>;

  constructor(private _overlay: Overlay) {}

  setOverlay(row) {
    let idx = this.rows.toArray().findIndex(e => e === row);
    let origin = this.orgins.toArray()[idx];
    const positionStrategy = this._overlay
        .position()
        .connectedTo(origin.elementRef, 
          {originX: 'start', originY: 'top'}, 
          {overlayX: 'start', overlayY: 'top'});

    const overlayRef = this._overlay.create({
        width: origin.elementRef.nativeElement.clientWidth,
        hasBackdrop: true,
        positionStrategy,
        scrollStrategy: this._overlay.scrollStrategies.reposition()
    });

    overlayRef.backdropClick().subscribe(() => overlayRef.detach());

    const overlayPortal = new ComponentPortal(TestOverlayComponent);

    overlayRef.attach(overlayPortal);
  }

这是我一直在玩的闪电战：https ://stackblitz.com/edit/angular-8sqnol?file=app%2Ftable-expandable-rows-example.ts

注意：可扩展的行不是我想要的。我需要覆盖覆盖整个表格并且不向下推的覆盖行为。

我将不胜感激任何帮助/建议。我不相信用目前的方法这是可能的。想知道我是否需要以某种方式将叠加背景限制为仅下降到叠加的顶部，然后将其余的背景创建为我实际叠加的一部分。

标签： cssangularangular-material

解决方案

CDK 覆盖的工作方式是它在结束标记<div class="cdk-overlay-container">之前创建。</body>覆盖容器具有以下 css 规则：

.cdk-overlay-container {
  position: fixed;
  z-index: 1000;
}

因此，为了使任何元素位于覆盖容器之上，您可以使用几个 CSS 规则，例如：

.show-above-overlay {
  position: relative; // *
  z-index: 1001; // This should be enough
}

* 您可以阅读更多关于我们为什么需要relative在本文中指定的信息。

现在您需要将该类附加到所需的元素（显示覆盖时的最佳方法）：

<div
  cdkOverlayOrigin
  [ngClass]="{ 'show-above-overlay': panelOpen }"
  (click)="setOverlay()">
</div>

其中panelOpen是boolean反映覆盖状态的变量。

我还尝试让您的 stackblitz 示例正常工作，看起来 table 需要更多的摆弄，因为它不允许重新堆叠单行。可能值得尝试CDK 表的替代 html变体。

推荐阅读