Question

我正在使用cdk覆盖flexibleConnectedTo（origin）。因此，它的开放取决于可用空间，如果底部没有足够的空间，则它在顶部是开放的。但是默认情况下，如果顶部和底部有足够的空间，则顶部会打开。是否可以更改默认位置以在底部打开它？

  private getOverlayPosition(origin): PositionStrategy {
    return this.overlay.position()
      .flexibleConnectedTo(origin)
      .withPositions(this.getPositions())
      .withFlexibleDimensions(false)
      .withPush(false)
  }

  private getPositions(): ConnectionPositionPair[] {
    return [
      {
        originX: 'center',
        originY: 'top',
        overlayX: 'center',
        overlayY: 'bottom'
      },
      {
        originX: 'center',
        originY: 'bottom',
        overlayX: 'center',
        overlayY: 'top',
      },
    ]
  }

Answer 1

只需交换ConnectionPositionPair[]数组中的那些元素，因为它们的顺序很重要。如果cdk可以将元素定位在第一个位置，那么它将不会进入第二个位置。

  private getPositions(): ConnectionPositionPair[] {
    return [
      {
        originX: 'center',
        originY: 'bottom',
        overlayX: 'center',
        overlayY: 'top'
      },
      {
        originX: 'center',
        originY: 'top',
        overlayX: 'center',
        overlayY: 'bottom',
      },
    ]
  }

参考link

positions：ConnectionPositionPair [] //首选职位的排序列表，从最高到最低。

cdk覆盖默认位置

1 个答案: