配置ストラテジ

配置ストラテジは、提供された IgxOverlayService でコンポーネントを表示する場所を決定します。デフォルトでコンテンツは画面の中央に配置されます。

Angular 配置ストラテジの例

ストラテジの概要

5 つの配置ストラテジがあります。

Global

positionSettings を介して渡された指示に基づいてコンテンツを配置します。 horizontalDirection に Left/Center/Right、verticalDirection に Top/Middle/Bottom があります。デフォルトは:

horizontalDirection	verticalDirection
HorizontalAlignment.Center	VerticalAlignment.Middle

Container

コンテンツを GlobalPositionStrategy として配置します。 ContainerPositionStrategyは画面に関連する位置ではなく、OverlaySettings outletで提供されるコンテンツに関連する位置にコンテンツを配置します。デフォルトは:

horizontalDirection	verticalDirection
HorizontalAlignment.Center	VerticalAlignment.Middle

Connected

overlaySettings からの開始点と positionSettings から渡された方向に基づいて要素を配置します。開始点 (Point) または HTMLElement を配置決めのベースとして渡すことができます。デフォルトは:

target	horizontalDirection	verticalDirection	horizontalStartPoint	verticalStartPoint
new Point(0, 0)	HorizontalAlignment.Right	VerticalAlignment.Bottom	HorizontalAlignment.Left	VerticalAlignment.Bottom

Auto

Connected ポジション ストラテジと同じ方法で要素を配置します。 要素が部分的にビューポートから出た場合を考慮して、異なる開始点も計算します。Auto ストラテジは最初に Connected ストラテジと同じように要素を表示しようとします。要素がビューポートから出た場合 Auto は開始点と方向を反転します。つまり、方向が 'bottom' の場合、要素は 'top' に切り替わります。 反転後、要素がまだビューポートの外である場合、Auto は要素をビューポートに入れるために初期の方向と開始点を使用します。たとえば、エレメントがビューポートの右側から 50 ピクセル分外に出た場合、Auto はそれを 50 ピクセル分左へずらします。その後、要素がビューポートから部分的に外れている場合、そしてその高さまたは幅がビューポートのものより大きい場合、Auto は要素の左端/上端をビューポートの左端/上端に揃えます。デフォルトは:

target	horizontalDirection	verticalDirection	horizontalStartPoint	verticalStartPoint
new Point(0, 0)	HorizontalAlignment.Right	VerticalAlignment.Bottom	HorizontalAlignment.Left	VerticalAlignment.Bottom

Elastic

要素の一部が表示範囲外の場合、Connected 配置ストラテジのように要素を配置し、要素をビュー ポートに収まるように (幅や高さの再計算により) サイズ変更します。 minSize を positionSettings へ渡して要素のサイズが特定のしきい値を下回るようなサイズ変更を防ぐことができます。デフォルトは:

target	horizontalDirection	verticalDirection	horizontalStartPoint	verticalStartPoint	minSize
new Point(0, 0)	HorizontalAlignment.Right	VerticalAlignment.Bottom	HorizontalAlignment.Left	VerticalAlignment.Bottom	{ width: 0, height: 0 }

Note

ストラテジが HorizontalDirection = Center / VerticalDirection = Middle を使用している場合、要素はサイズ変更されません。

Note

オーバーレイ要素はサイズ変更されますが配置ストラテジは overflow を処理しません。たとえば、サイズ変更時の要素に overflow-y が必要な場合、適切なスタイルを組み込んで提供します。

使用方法

配置ストラテジを使用して、オーバーレイでさまざまな組み合わせのコンテンツを表示できます。他のポジション ストラテジの使用を開始するには、最初に次のように使用される各ストラテジに必要な依存関係を含める必要があります。

import {
    AutoPositionStrategy,
    ConnectedPositioningStrategy,
    ContainerPositionStrategy,
    ElasticPositionStrategy,
    GlobalPositionStrategy
} from 'igniteui-angular';
// import { AutoPositionStrategy, 
//    ConnectedPositioningStrategy, 
//    ContainerPositionStrategy,
//    ElasticPositionStrategy,
//    GlobalPositionStrategy } from '@infragistics/igniteui-angular'; for licensed package

次に、オーバーレイで使用される配置ストラテジを指定します。overlay.attach() メソッドが呼び出されると、配置ストラテジは overlaySettings パラメーターのプロパティとして渡されます。以下の例では、デフォルトの GlobalPositionStrategy を ConnectedPositionStrategy で変更しています。

// Initialize and use overlay settings
const overlaySettings: OverlaySettings = {
    // Set the target where content should be shown
    target: this.buttonElement.nativeElement,
    // Pass in the positioning strategy
    positionStrategy: new ConnectedPositioningStrategy()
};
this._overlayId = this.overlayService.attach(MyDynamicCardComponent, this.viewContainerRef, overlaySettings); 

配置設定

各配置ストラテジには、固有の配置設定があります。この設定により、コンテンツの表示方法が決まります。以下の例では、新しい PositionSettings オブジェクトを作成しています。これを使用して、オーバーレイに、指定された target (buttonElement) の右上の点から始まるコンテンツを強制的に表示します。コンテンツが表示される方向は左上に設定されます。次に、新しい ConnectedPositionStrategy を作成し、positionSettings を渡します。

const positionSettings: PositionSettings = {
    horizontalStartPoint: HorizontalAlignment.Right,
    verticalStartPoint: VerticalAlignment.Top,
    horizontalDirection: HorizontalAlignment.Left,
    verticalDirection: VerticalAlignment.Top
};

const strategy = new ConnectedPositioningStrategy(positionSettings);

// Initialize and use overlay settings
const overlaySettings: OverlaySettings = {
    target: buttonElement.nativeElement,
    // Pass in the positioning strategy
    positionStrategy: strategy
};
this._overlayId = this.overlayService.attach(MyDynamicCardComponent, this.viewContainerRef, overlaySettings);

ストラテジの変更

オーバーレイに渡される overlaySettings オブジェクトの positionStrategy プロパティをオーバーライドすることにより、オーバーレイで使用される配置ストラテジを変更することもできます。

const myPositionStrategy = new AutoPositionStrategy();
overlay.attach(element, { positionStrategy: myPositionStrategy }); 

設定の変更

既存ストラテジのポジション設定の変更は、そのストラテジの設定のいずれかをオーバーライドします。ストラテジがすでにアタッチされている場合は、以前に生成された ID をデタッチする必要があります:

// overlaySettings is an existing object of type OverlaySettings
// overlaySettings.positionStrategy is an existing PositionStrategy with settings of type PositionSettings
Object.assign(overlaySettings.positionStrategy.settings, {
    horizontalStartPoint: HorizontalAlignment.Left,
    horizontalDirection: HorizontalAlignment.Left
});
overlaySettings.target = dummyHTMLElement;
// the element will now start to the left of the target (dummyHTMLElement)
// and will align itself to the left
const overlayId = overlay.attach(overlayId, overlaySettings);
overlay.show(overlayId);

コンテンツのオフセット

対応する軸に沿って指定した量のみコンテンツをオフセットする方法:

// deltaX and deltaY determine by how much the content will be offset compared to its' previous position
const deltaX: number = 30;
const deltaY: number = 15;
overlay.setOffset(this._overlayId, deltaX, deltaY);

API リファレンス

• IPositionStrategy

その他のリソース

• オーバーレイ メイン トピック
• スクロール ストラテジ
• スタイル設定
• IgxOverlayService
• IgxOverlay スタイル