配置ストラテジ

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

Angular 配置ストラテジの例

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxIconModule,
	IgxOverlayService,
	IgxCardModule
 } from "igniteui-angular";
import { OverlaySampleMain1Component } from "./overlay-main-1/overlay-main-sample-1.component";
import { MyDynamicCardComponent } from "./overlay-dynamic-card/overlay-dynamic-card.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	OverlaySampleMain1Component,
	MyDynamicCardComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxIconModule,
	IgxCardModule
],
  providers: [IgxOverlayService],
  entryComponents: [MyDynamicCardComponent],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, Inject, OnDestroy } from '@angular/core';
import { IgxOverlayService } from 'igniteui-angular';
import { MyDynamicCardComponent} from '../overlay-dynamic-card/overlay-dynamic-card.component';
@Component({
    selector: 'app-overlay-sample',
    templateUrl: `./overlay-main-sample-1.component.html`,
    styleUrls: [`./overlay-main-sample-1.component.scss`]
})
export class OverlaySampleMain1Component implements OnDestroy {
    private _overlayId: string;

    constructor(@Inject(IgxOverlayService) public overlayService: IgxOverlayService) {}

    public showOverlay() {
        if (!this._overlayId) {
            this._overlayId = this.overlayService.attach(MyDynamicCardComponent);
        }

        this.overlayService.show(this._overlayId);
    }

    public ngOnDestroy(): void {
        if (this._overlayId) {
            this.overlayService.detach(this._overlayId);
            delete this._overlayId;
        }
    }
}
tsコピー

<div class="content">
    <button class="igx-button--raised" #buttonElement igxButton (click)='showOverlay()'>
        Show Card
    </button>
</div>htmlコピー

.content {
    width: 100%;
    height: 100%;
} 
button {
    margin-top: 10%;
    margin-left: 45%;
    width: 160px;
}scssコピー

Edit in: CodesandboxStackBlitz

このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた 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 }

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

オーバーレイ要素はサイズ変更されますが配置ストラテジは 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

typescript

次に、オーバーレイで使用される配置ストラテジを指定します。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); 
typescript

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxIconModule,
	IgxOverlayService,
	IgxCardModule
 } from "igniteui-angular";
import { OverlayPositionSample1Component } from "./overlay-positioning-1/overlay-position-sample-1.component";
import { MyDynamicCardComponent } from "./overlay-dynamic-card/overlay-dynamic-card.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	OverlayPositionSample1Component,
	MyDynamicCardComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxIconModule,
	IgxCardModule
],
  providers: [IgxOverlayService],
  entryComponents: [MyDynamicCardComponent],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ElementRef, Inject, OnDestroy, ViewChild } from '@angular/core';
import { ConnectedPositioningStrategy, IgxOverlayService, OverlaySettings } from 'igniteui-angular';
import { Subject } from 'rxjs';
import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic-card.component';
@Component({
    selector: 'app-overlay-sample',
    styleUrls: ['./overlay-position-sample-1.component.scss'],
    templateUrl: './overlay-position-sample-1.component.html',
    providers: [IgxOverlayService]
})
export class OverlayPositionSample1Component implements OnDestroy {
    @ViewChild('buttonElement', { static: true })
    private buttonElement: ElementRef;
    private _overlayId: string;

    constructor(@Inject(IgxOverlayService) public overlayService: IgxOverlayService) { }

    public showOverlay() {
        if (!this._overlayId) {
            // 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, overlaySettings);
        }

        this.overlayService.show(this._overlayId);
    }

    public ngOnDestroy(): void {
        if (this._overlayId) {
            this.overlayService.detach(this._overlayId);
            delete this._overlayId;
        }
    }
}
tsコピー

<div class="content">
    <button class="igx-button--raised" #buttonElement igxButton (click)='showOverlay()'>
        Show Card
    </button>
</div>htmlコピー

.content {
    width: 100%;
    height: 100%;
}
button {
    margin-top: 10%;
    margin-left: calc(50% - 80px);
    width: 160px;
}
scssコピー

Edit in: CodesandboxStackBlitz

配置設定

各配置ストラテジには、固有の配置設定があります。この設定により、コンテンツの表示方法が決まります。以下の例では、新しい 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);
typescript

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxIconModule,
	IgxOverlayService,
	IgxCardModule
 } from "igniteui-angular";
import { OverlayPositionSample2Component } from "./overlay-positioning-2/overlay-position-sample-2.component";
import { MyDynamicCardComponent } from "./overlay-dynamic-card/overlay-dynamic-card.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	OverlayPositionSample2Component,
	MyDynamicCardComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxIconModule,
	IgxCardModule
],
  providers: [IgxOverlayService],
  entryComponents: [MyDynamicCardComponent],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ElementRef, Inject, OnDestroy, ViewChild } from '@angular/core';
import {
    ConnectedPositioningStrategy,
    HorizontalAlignment,
    IgxOverlayService,
    OverlaySettings,
    PositionSettings,
    VerticalAlignment
} from 'igniteui-angular';
import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic-card.component';
@Component({
    selector: 'app-overlay-sample',
    styleUrls: ['./overlay-position-sample-2.component.scss'],
    templateUrl: './overlay-position-sample-2.component.html',
    providers: [IgxOverlayService]
})
export class OverlayPositionSample2Component implements OnDestroy {
    @ViewChild('buttonElement', { static: true })
    private buttonElement: ElementRef;
    private _overlayId: string;

    constructor(@Inject(IgxOverlayService) public overlayService: IgxOverlayService) { }

    public showOverlay() {
        if (!this._overlayId) {
            const positionSettings: PositionSettings = {
                horizontalDirection: HorizontalAlignment.Left,
                verticalDirection: VerticalAlignment.Top,
                horizontalStartPoint: HorizontalAlignment.Right,
                verticalStartPoint: VerticalAlignment.Top
            };
            const strategy = new ConnectedPositioningStrategy(positionSettings);

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

        this.overlayService.show(this._overlayId);
    }

    public ngOnDestroy(): void {
        if (this._overlayId) {
            this.overlayService.detach(this._overlayId);
            delete this._overlayId;
        }
    }
}
tsコピー

<div class="content">
    <button class="igx-button--raised" #buttonElement igxButton (click)='showOverlay()'>
        Show Card
    </button>
</div>
htmlコピー

.content {
    width: 100%;
    height: 100%;
}
button {
    margin-top: 270px;
    margin-left: calc(50% - 80px);
    width: 160px;
}
scssコピー

Edit in: CodesandboxStackBlitz

ストラテジの変更

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

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxIconModule,
	IgxOverlayService,
	IgxCardModule
 } from "igniteui-angular";
import { OverlayPositionSample3Component } from "./overlay-positioning-3/overlay-position-sample-3.component";
import { MyDynamicCardComponent } from "./overlay-dynamic-card/overlay-dynamic-card.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	OverlayPositionSample3Component,
	MyDynamicCardComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxIconModule,
	IgxCardModule
],
  providers: [IgxOverlayService],
  entryComponents: [MyDynamicCardComponent],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ElementRef, Inject, OnDestroy, ViewChild } from '@angular/core';
import { AutoPositionStrategy, IgxOverlayService } from 'igniteui-angular';
import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic-card.component';
@Component({
    selector: 'app-overlay-sample',
    styleUrls: ['./overlay-position-sample-3.component.scss'],
    templateUrl: './overlay-position-sample-3.component.html',
    providers: [IgxOverlayService]
})
export class OverlayPositionSample3Component implements OnDestroy {
    @ViewChild('buttonElement', { static: true })
    private buttonElement: ElementRef;
    private _overlayId: string;

    constructor(@Inject(IgxOverlayService) public overlayService: IgxOverlayService) { }

    public showOverlay() {
        if (!this._overlayId) {
            const myPositionStrategy = new AutoPositionStrategy();
            this._overlayId = this.overlayService.attach(
                MyDynamicCardComponent, {
                    target: this.buttonElement.nativeElement,
                    positionStrategy: myPositionStrategy
                });
        }

        this.overlayService.show(this._overlayId);
    }

    public ngOnDestroy(): void {
        if (this._overlayId) {
            this.overlayService.detach(this._overlayId);
            delete this._overlayId;
        }
    }
}
tsコピー

<div class="content">
    <button class="igx-button--raised" #buttonElement igxButton (click)='showOverlay()'>
        Show Card
    </button>
</div>
htmlコピー

.content {
    width: 100%;
    height: 100%;
}
button {
    margin-top: 270px;
    margin-left: calc(50% - 80px);
    width: 160px;
}
scssコピー

Edit in: CodesandboxStackBlitz

設定の変更

既存ストラテジのポジション設定の変更は、そのストラテジの設定のいずれかをオーバーライドします。ストラテジがすでにアタッチされている場合は、以前に生成された 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);
typescript

コンテンツのオフセット

setOffset メソッドを使用すると、対応する軸に沿って指定された量だけコンテンツの位置を正確に調整できます。さらに、オプションの offsetMode パラメーターをサポートしており、オフセット値の適用方法を制御できます。

// deltaX and deltaY determine the amount by which the content will be offset.
// Using OffsetMode.Add to add the values (default behavior)
const deltaX: number = 30;
const deltaY: number = 15;
overlay.setOffset(this._overlayId, deltaX, deltaY, OffsetMode.Add);
typescript

// deltaX and deltaY determine the exact position to set the content to, relative to its target element.
// Using OffsetMode.Set to set the offset to specific values
const deltaX: number = 30;
const deltaY: number = 15;
overlay.setOffset(this._overlayId, deltaX, deltaY, OffsetMode.Set);
typescript

API リファレンス

• IPositionStrategy

その他のリソース

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