Angular CDK了解叠加位置系统

Question

我真的想了解叠加位置参数,但没有任何运气.我也找不到任何关于这个主题的文档.

以下代码是什么意思？

const positions = [
  new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }),
  new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' })
];
this.positionStrategy = this._overlay.position()
.flexibleConnectedTo(this.getConnectedElement())
.withPositions(positions)
.withFlexibleDimensions(false)
.withPush(false);

Answer 1

关于Angular Overlay CDK的文档仍然不多.我学到的大部分内容来自他们的Github回购.

全球定位战略

这将是一个全球定位战略.您正在创建的叠加层将直接定位在屏幕上,而不是与元素相关.这适用于对话框弹出窗口或模态窗口.

  overlayConfig = this.overlay.position().global()
    .centerHorizontally().centerVertically();

灵活连接战略

这是您想要用于工具栏,菜单,按钮弹出的东西.您必须传入对希望叠加层连接到的按钮的引用:

<button id="toolbar-icons" cdkOverlayOrigin mat-button class="toolbar-button" (click)="this.showAppContext()">

并在您的Component.ts中

showAppContext() {
  const appOverlayRef: AppOverlayRef = 
    this.appOverlayService.open(this.origin);
}

ConnectionPositionPair - 这是一个首选位置列表,从大多数到最不需要的位置.因此,它将首先尝试使用您传入的第一个位置.

originX:这将是"开始","结束"或"中心".它是叠加层的附着点.如果您已将按钮传递给.flexibleConnectedTo函数,则表示该元素的开始,结束和中心.

originY:这将是"顶部","底部"或"中心".这指的是传入元素的顶部,底部或中心.

那么{ originX: 'start', originY: 'bottom' }按钮的左下角也是如此.

overlayX和overlayY具有相同的选项,但请参考叠加层的附加位置.{ overlayX: 'start', overlayY: 'top' }将叠加层的左上角附加到我们指定的原点.

然后,正如你在数组中看到的那样,我们可以传入多个位置.如果叠加不适合第一个位置,它将尝试数组中的下一个位置.因此,如果叠加层在第一路上不适合屏幕,它将自动切换到第二个位置,这里定义为将底部的左上角连接到叠加层的左下角.

const positions = [
  new ConnectionPositionPair(
   { originX: 'start', originY: 'bottom' },
   { overlayX: 'start', overlayY: 'top' }),
  new ConnectionPositionPair(
  { originX: 'start', originY: 'top' },
  { overlayX: 'start', overlayY: 'bottom' })];
];

withPush

您可以将withPush设置为true,如果所提供的位置都不合适,它将在屏幕上推送叠加.

代码仍然是查看文档的最佳位置:https: //github.com/angular/material2/blob/master/src/cdk/overlay/position/connected-position.ts

Answer 2

经过几天的反复试验，大卫·林克（David Rinck）对这个问题的回答对我有所帮助，所以我想我应该发布我在此基础上整理的备忘单，希望它可以对将来的某人有所帮助。

这可能并不适合所有人，但它对我有帮助：

// top-left
originX: 'start', // left corner of the button
originY: 'bottom', // bottom corner of the button
overlayX: 'start', // left corner of the overlay to the origin
overlayY: 'top', // top corner of the overlay to the origin

// top-right
originX: 'end', // right corner of the button
originY: 'bottom', // bottom corner of the button
overlayX: 'end', // right corner of the overlay to the origin
overlayY: 'top', // top corner of the overlay to the origin

// bottom-left
originX: 'start', // left corner of the button
originY: 'top', // top corner of the button
overlayX: 'start', // left corner of the overlay to the origin
overlayY: 'bottom', // top corner of the overlay to the origin

// bottom-right
originX: 'end', // right corner of the button
originY: 'top', // top corner of the button
overlayX: 'end', // right corner of the overlay to the origin
overlayY: 'bottom', // top corner of the overlay to the origin

Answer 3

David Rinck 的回答非常出色，最终对我有用的是直接使用模板指令，甚至没有进入打字稿覆盖引用（overlay.postition /手动附加/分离等）。

这是一个示例，我创建了一个位于按钮下方的模式。如果没有明确设置位置，它的行为就会很奇怪，所以我必须实现位置数组。

html:

<button cdkOverlayOrigin
        #trigger="cdkOverlayOrigin"
        (click)="isOpen = true">
  View Menu
</button>


<ng-template
    [cdkConnectedOverlayPanelClass]="'pm-responsive-text'"
    *ngIf="filterGroup?.filters?.length > numberOfVisibleFilters"
    cdkConnectedOverlay
    cdkConnectedOverlayPush ----- this pushes things on screen
    [cdkConnectedOverlayPositions]="positionPairs"
    [cdkConnectedOverlayOrigin]="filterTrigger"
    [cdkConnectedOverlayOpen]="isOpen"
    [cdkConnectedOverlayHasBackdrop]="true"
    (backdropClick)="isOpen = false">
    <div>...my modal code....</div>
</ng-template>

TS：

 // from my testing it doesn't seem to want to switch positions when 
 // resizing so I went ahead and just set it to the position I wanted and 
 // relied on cdkConnectedOverlayPush to handle the rest
positionPairs: ConnectionPositionPair[] = [
    {
      offsetX: 0,
      offsetY: 165,
      originX: 'start',
      originY: 'bottom',
      overlayX: 'start',
      overlayY: 'bottom',
      panelClass: null,
    },
  ];