代码之家 › 专栏 › 技术社区 › bryan60

角CDK连接叠加,如何不覆盖原点与叠加背景?

angular-material angular css

0

bryan60 · 技术社区 · 7 年前

这是我的行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

注意:可展开的行不是我想要的。我需要覆盖整个表的覆盖行为,而不是向下推。

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

0 回复 | 直到 7 年前

1

im.pankratov 6 年前

CDK overlay的工作方式是创建 <div class="cdk-overlay-container"> 就在收盘前 </body>

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

因此,为了使任何元素位于覆盖容器之上,可以使用一些CSS规则,例如:

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

relative 在这个 article .

现在您需要将该类附加到所需的元素(显示覆盖时最好这样做):

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

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

我也试过让stackblitz示例工作,看起来表需要更多的修改,因为它不允许重新标记单行。也许值得一试 alternative html CDK表的变体。

2

0

Shah 7 年前

我已经在你的代码中添加了这个。。

  if(this.isAllSelected()){
          this.selection.clear();
          // this.isButtonEnable = true;
      }else{
          this.dataSource.data.forEach(row => this.selection.select(row));
          // this.isButtonEnable = false;
  }

你可以在这里看更多 stackblitz