Overlay

Angular Overlay の例

はじめに

はじめに、IgxOverlayService をインポートし、コンポーネントへの参照をコンポーネントのコンストラクターに注入する必要があります。

import { Inject } from '@angular/core'
import { IgxOverlayService } from `igniteui-angular`;

...

export class MyOverlayComponent {
    constructor(
        @Inject(IgxOverlayService) private overlayService: IgxOverlayService
    ) {}
}

...

コンテンツの表示

オーバーレイ サービスでオーバーレイ DOM にアタッチすると HTMLNode または Angular コンポーネントを動的に表示できます。

Overlay サービスへの参照を追加した後、コンテンツを動的に表示/非表示できます。たとえば、Angular コンポーネントは attach メソッドで渡せます。これは一意の ID を生成し、show メソッドに渡してコンポーネントを表示します。Angular コンポーネントを表示する場合、attach メソッドに 2 番目の必須パラメーター ViewContainerRef を渡す必要があります。

// my-overlay-component.component.ts
import { MyDynamicComponent } from '../my-dynamic-component/my-dynamic-component.component';

@Component({...})
export class MyOverlayComponent {
    private _overlayId = ''; // The unique identifier assigned to the component by the Overlay service

    constructor(
        @Inject(IgxOverlayService) private overlayService: IgxOverlayService,
        private viewContainerRef: ViewContainerRef
    ) {}

    public showInOverlay() {
        if (!this._overlayId) {
            this._overlayId = this.overlayService.attach(MyDynamicComponent, this.viewContainerRef);
        }
        this.overlayService.show(this._overlayId);
    }
}

<!-- my-overlay-component.component.html -->
<div class='content'>
...
    <button (click)="showInOverlay()">Show Overlay</button>
</div>

ページの既存の ElementRef から IgxOverlayService へ渡す場合は以下の手順に従ってください。

<!-- my-overlay-component.component.html -->
<div class='content'>
    <button (click)="showInOverlay()">Show Overlay</button>
</div>
<div>
    <img #exampleImage width='200px' src='../assets/example.png' title='Click Me!'>
</div>

// my-overlay-component.component.ts
import { Inject, ViewChild } from '@angular/core'

@Component({...})
export class MyOverlayComponent {
    private _overlayId = ''; // The unique identifier assigned to the component by the Overlay service

    @ViewChild('exampleImage', {read: ElementRef})
    private exampleImage: ElementRef;
    public showInOverlay() {
        if (!this._overlayId) {
            this._overlayId = this.overlayService.attach(this.exampleImage);
        }
        this.overlayService.show(this._overlayId);
    }
}

Overlay サービスの attach() メソッドには 2 つのオーバーロードがあります。

• attach(element, settings?)
• attach(component, viewContainerRef, settings?)

オーバーロードの最初のパラメーターは必須でオーバーレイに表示されるコンテンツを表します。以下は、コンテンツを渡す場合の例です。

• コンポーネント定義 - コンポーネントを最初の引数として渡す場合、オーバーレイ サービスがそのコンポーネントの新しいインスタンスを作成し、その ElementRef を動的に オーバーレイ DOM にアタッチします。このメソッドは、2 番目の必須パラメーター ViewContainerRef に、作成されたコンポーネントのホスト ビューが挿入されるコンテナへの参照も受け入れます。
• ElementRef から既存の DOM 要素 (上記のサンプルを参照) - ページで既に描画されたビューはオーバーレイ サービスで渡して、オーバーレイ DOM で描画できます。

どちらの場合も、attach() メソッドは次のようになります:

• Angular から渡されるビューへの参照を取得します。
• ビューを DOM からデタッチし、そこにアンカーを追加します。
• 提供されている OverlaySettings を使用するか、デフォルトのオーバーレイにフォールバックして、ビューをオーバーレイに再アタッチします。

次に show(id) を呼び出すと、開くアニメーションが再生され、添付されたコンテンツが表示されます。hide(id) を呼び出すと、閉じるアニメーションが再生され、添付されているコンテンツが非表示になります。

最後に detach(id) メソッドを呼び出すと、ビューが DOM 内の元の場所に再アタッチされます。コンポーネントが attach() メソッドに提供された場合、detach(id) を呼び出すと、作成されたインスタンスが破棄されます。

• Get the reference to the passed view from Angular
• Detach the view from the DOM and leave an anchor in its place
• Re-attach the view to the overlay using the provided OverlaySettings or falling back to the default overlay ones

Calling then show(id) will play the open animation, if there is any, and will show the attached content. Calling hide(id) will play close animation, if there is any, and will hide the attached content.

Finally calling detach(id) method will re-attach the view back to its original location in the DOM. If a component was provided to the attach() method calling detach(id) will destroy the created instance.

コンポーネントのアタッチ

閉じた後、ビューを DOM にある元の位置にアタッチします。以下のデモでは、IgxCard コンポーネントをオーバーレイ サービスの attach() メソッドに渡し、IDを生成します。次に、提供された ID で show() メソッドを呼び出し、カードをモーダル コンテナーで DOM にアタッチします。

オーバーレイ設定

attach() メソッドは OverlaySettings 型のオブジェクトを受け取ります。このオブジェクトはコンテンツの表示方法を構成します。このオブジェクトが指定されていない場合、Overlay サービスは渡されたコンテンツを描画するためにデフォルト設定を使用します。

たとえば、コンテンツを要素に相対的に配置するには、オーバーレイの attach() メソッドに別の OverlaySettings.target と OverlaySettings.positionStrategy (ConnectedPositioningStrategy など) を渡します。コンポーネントの表示方法を構成するには、最初に OverlaySettings オブジェクトを作成します。

// my-overlay-component.component.ts
// import the ConnectedPositioningStategy class
import { ConnectedPositioningStrategy } from 'igniteui-angular/core';
// import { ConnectedPositioningStrategy } from '@infragistics/igniteui-angular'; for licensed package
...
export class MyOverlayComponent {

    @ViewChild(`myAnchorButton`)
    private myAnchorButton: ElementRef;
    private _overlayId = ''; // The unique identifier assigned to the component by the Overlay service

    public showInOverlay() {
        if (!this._overlayId) {
            this._overlayId = this.overlayService.attach(MyDynamicComponent, this.viewContainerRef, {
                target: this.myAnchorButton.nativeElement,
                positionStrategy: new ConnectedPositioningStrategy()
            });
        }
        this.overlayService.show(this._overlayId);
    }
}

<!-- my-overlay-component.component.html -->
<div class='content'>
...
<button #myAnchorButton (click)="showInOverlay()">Show Overlay</button>
</div>

ボタンをクリックすると、ボタンに相対的に配置される MyDynamicComponent を表示します。

プリセット オーバーレイ設定

IgxOverlayService.createAbsolutePositionSettings() および IgxOverlayService.createRelativePositionSettings() メソッドにより、事前定義された設定セットに基づいて OverlaySettings を容易に作成することができます。

IgxOverlayService.createAbsolutePositionSettings() メソッドは、outlet パラメーターが指定されている場合、GlobalPositionStrategy または ContainerPositionStrategy を使用して非モーダル OverlaySettings を作成します。AbsolutePosition 列挙体は、Center、Top、または Bottom から選択できる位置を定義します。デフォルトの位置は Center です。

const globalOverlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(AbsolutePosition.Top);

IgxOverlayService.createRelativePositionSettings() メソッドは、AutoPositionStrategy、ConnectedPositioningStrategy または ElasticPositionStrategy を使用して OverlaySettings を作成します。ターゲット、位置およびストラテジを受け入れます。target は、コンポーネントが表示するアタッチ ポイントまたは要素です。position は RelativePosition 列挙体であり、次のオプションがあります: Above、Below、Before、After、Default。Default オプションは、要素をターゲットの下に配置し、左揃えにします。位置ストラテジは、RelativePositionStrategy 列挙体を介して設定できます。デフォルト値は Auto です。

const targetElement = this.myAnchorButton.nativeElement;
const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings(
        targetElement,
        RelativePosition.Above,
        RelativePositionStrategy.Connected);

デモ

オーバーレイの非表示

hide(id) は、オーバーレイ コンテンツを非表示にします。すべてのオーバーレイ サービスで描画される要素がサービスによって割り当てられた一意の ID があります。attach() メソッドは、描画されたコンテンツの識別子を返します。コンテンツを非表示にするには、この ID をオーバーレイの hide(id) メソッドに渡す必要があります。すべてのオーバーレイを非表示にするには、hideAll() メソッドを呼び出すことができます。

描画されたコンテンツが不要になったら、detach(id) メソッドを呼び出す必要があります。このメソッドは、オーバーレイからコンテンツを削除し、該当する場合は、DOM 内の元の場所にコンテンツを再アタッチします。detach(id) メソッドは、attach() メソッドから生成された ID も必須パラメーターとして受け入れます。すべてのオーバーレイを削除するには、detachAll() メソッドを呼び出すことができます。

以前に定義されたオーバーレイ メソッドをオーバーレイ要素を表示して非表示するために変更できます。

// my-overlay-component.component.ts
// add an import for the definion of ConnectedPositioningStategy class
import { ConnectedPositioningStrategy } from 'igniteui-angular/core';
// import { ConnectedPositioningStrategy } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class MyOverlayComponent implements OnDestroy {
    private _overlayId = ''; // The unique identifier assigned to the component by the Overlay service
    private _overlayShown = false; // Is the component rendered in the Overlay?

    @ViewChild(`myAnchorButton`)
    private myAnchorButton: ElementRef;

    public toggleOverlay() {
        if (!this._overlayShown) { // If the element is not visible, show it
            //  generate ID
            if (!this._overlayId) {
                this._overlayId = this.overlayService.attach(MyDynamicComponent, this.viewContainerRef, {
                    target: this.myAnchorButton.nativeElement,
                    positionStrategy: new ConnectedPositioningStrategy({
                        closeOnOutsideClick: false, // overlay will not close on outside clicks
                        modal: false // overlay content will not be rendered in a modal dialog
                    }) // The attach method returns an ID that can be used to reference the shown content
                });
            }

            this.overlayService.show(this._overlayId);
        } else {
            this.overlayService.hide(this._overlayId); // If element if visible, hide it
        }
        this._overlayShown = !this._overlayShown;
    }

    // finally detach overlay content
    public ngOnDestroy(): void {
        if (this._overlayId) {
            this.overlayService.detach(this._overlayId);
            delete this._overlayId;
        }
    }
}

<!-- my-overlay-component.component.html -->
<div class='content'>
...
    <button #myAnchorButton (click)="toggleOverlay()">Toggle Overlay</button>
</div>

アタッチ設定

attach() メソッドの OverlaySettings パラメーターを使用してコンテンツの表示方法を変更できます。たとえば、コンテンツの配置、スクロールの動作、およびコンテナーがモーダルかどうかを設定できます。

OverlaySettings が指定されていない場合、切り替えた要素はデフォルト表示設定を使用します。

defaultOverlaySettings = {
    positionStrategy: new GlobalPositionStrategy(),
    scrollStrategy: new NoOpScrollStrategy(),
    modal: true,
    closeOnOutsideClick: true,
    closeOnEscape: false
};

igxToggle との統合

IgxToggleDirective は IgxOverlayService と完全に統合されます。コンテンツの切り替えで Toggle ディレクティブの toggle() メソッドにカスタム オーバーレイ設定を渡すことができます。

構成設定をトグルのメソッドに渡す方法は以下の例で紹介されます。

<!-- In example.component.html -->
<div>
    <button igxToggle (click)="callToggle()">Click me!</button>
    <div [style.visibility]="collapsed ? 'hidden ' : 'visible'">
        This content is toggle-able!
    </div>
</div>

// example.component.ts
@Component({
    selector: `example-component`,
    template: `example.component.html`
})
export class ExampleComponent {
    @ViewChild(IgxToggleDirective)
    private toggleDirective: IgxToggleDirective;

    public get collapsed(): boolean {
        return this.toggleDirective.collapsed;
    }

    public callToggle(): void {
        const overlaySettings: OverlaySettings = {
            positionStrategy: new AutoPositionStrategy(),
            scrollStrategy: new BlockScrollStrategy(),
            modal: true,
            closeOnOutsideClick: false
        }
        this.toggleDirective.toggle(overlaySettings)
    }
}

仮定と制限

アウトレットにオーバーレイを表示する際にアウトレットが CSS で変換、視点、またはフィルターが設定された要素の子である場合、モーダル オーバーレイが表示されません。これは、上記のいずれかの CSS プロパティが設定された際にブラウザーが新しく含まれるブロックを作成してこちらのようにオーバーレイがこのブロックに制限されるためです。

API リファレンス

• IgxOverlayService
• IgxOverlay スタイル

その他のリソース

• 配置方法
• スクロール方法
• スタイル設定