web-dev-qa-db-ja.com

Angular CDK、オーバーレイ位置システムを理解する

私は本当にオーバーレイ位置パラメーターを理解しようとしていますが、運がありません。このトピックに関するドキュメントも見つかりません。

次のコードはどういう意味ですか？

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);
angularangular-cdk
11
undefined

Angularオーバーレイ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' }は、オーバーレイの左上隅を、指定したOriginに接続しています。

次に、配列で確認できるように、複数の位置を渡すことができます。オーバーレイが最初の位置に収まらない場合は、配列の次の位置を試します。したがって、オーバーレイが最初に画面に収まらない場合は、自動的に2番目の位置に移動します。2番目の位置は、ここで下部の左上をオーバーレイの左下に接続するように定義されています。

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

28
David Rinck