20

我真的想了解叠加位置参数，但没有任何运气。我也找不到有关此主题的任何文档。

下面的代码是什么意思？

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);
4

2 回答 2

60

关于 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 函数，则 this 指的是该元素的开始、结束和中心。

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 设置为 true，如果提供的位置都不适合，它将在屏幕上推送覆盖。

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

于 2018-10-17T16:28:35.960 回答
5

经过几天和几天的反复试验，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
于 2020-11-03T13:19:10.443 回答