私は本当にオーバーレイ位置パラメーターを理解しようとしていますが、運がありません。このトピックに関するドキュメントも見つかりません。
次のコードはどういう意味ですか?
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);
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