Components List

スクロールストラテジ (スクロール方法)

スクロール方法は指定された IgxOverlayService でスクロールを処理する方法を決定します。4 つのスクロール方法があります。

NoOperation - 何もしません。
Block - イベントはキャンセルされ、コンポーネントはウィンドウと共にスクロールしません。
Close - 許容値を使用して許容範囲を超えた場合にスクロールで展開したコンポーネントを閉じます。
Absolute - すべてをスクロールします。

使用方法

各スクロール方法は以下のメソッドがあります。

initialize - スクロール方法を初期化します。ドキュメントへの参照、オーバーレイサービスへの参照、および描画されるコンポーネントの id が必要です。
attach - スクロール方法を指定した要素またはドキュメントにアタッチします。
detach - スクロール方法をデタッチします。

this.scrollStrategy.initialize(document, overlayService, id);
this.scrollStrategy.attach();
this.scrollStrategy.detach();
typescript

作業の開始

ポジションストラテジは、overlay.attach() メソッドが呼ばれたときに overlaySettings パラメーターのプロパティとして渡されます。

// Initializing and using overlay settings
const overlaySettings: OverlaySettings = {
    positionStrategy: new GlobalPositionStrategy(),
    scrollStrategy: new AbsoluteScrollStrategy(), //Passes the scroll strategy
    modal: true,
    closeOnOutsideClick: true
}
const overlayId = overlay.attach(dummyElement, overlaySettings); 
typescript

オーバーレイで使用するスクロール方法の変更は、オーバーレイに渡される [overlaySettings] (https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/overlaysettings.html) オブジェクトの [scrollStrategy] (https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/iscrollstrategy.html) プロパティをオーバーライドします。ストラテジがすでにアタッチされている場合は、以前に生成された ID をデタッチする必要があります:

// overlaySettings is an existing object of type OverlaySettings
// to override the scroll strategy
const newOverlaySettings = Object.assing({}, overlaySettings);
Object.assing(newOverlaySettings, {
    scrollStrategy: new CloseScrollStrategy()
})
const overlayId = overlay.attach(dummyElement, newOverlaySettings);
overlay.show(overlayId);
typescript

依存関係

以下は、スクロールストラテジをインポートする方法です。

import { NoOpScrollStrategy } from "./scroll/NoOpScrollStrategy";
typescript

スクロール方法

オーバーレイのスクロールの処理方法を決定するためにスクロール方法を overlaySettings オブジェクトによって渡すことができます。以下のデモは複数の scrollStrategies を紹介します。

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 { OverlayScrollSample2Component } from "./overlay-scroll-2/overlay-scroll-sample-2.component";
import { MyDynamicCardComponent } from "./overlay-dynamic-card/overlay-dynamic-card.component";



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

import { Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
import {
    AbsoluteScrollStrategy,
    BlockScrollStrategy,
    CloseScrollStrategy,
    ConnectedPositioningStrategy,
    IgxOverlayService,
    NoOpScrollStrategy
} from 'igniteui-angular';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic-card.component';
@Component({
    selector: 'app-overlay-sample',
    styleUrls: ['./overlay-scroll-sample-2.component.scss'],
    templateUrl: './overlay-scroll-sample-2.component.html',
    providers: [IgxOverlayService]
})
export class OverlayScrollSample2Component implements OnInit, OnDestroy {
    @ViewChild('scrollDemo', { static: true })
    public scrollDemo: ElementRef;

    @ViewChild(MyDynamicCardComponent, { static: true })
    public overlayDemo: MyDynamicCardComponent;

    @ViewChild('mainContainer', { static: true })
    public mainContainer: ElementRef;

    public previewHidden = false;
    private destroy$ = new Subject<boolean>();
    private _overlayId: string;
    private _target: HTMLElement;

    constructor(
        @Inject(IgxOverlayService) public overlay: IgxOverlayService) {
            this.overlay.opening
                .pipe(takeUntil(this.destroy$))
                .subscribe(() => this.previewHidden = true);

            this.overlay
                .closed
                .pipe(takeUntil(this.destroy$))
                .subscribe(() => this.previewHidden = false);
        }

    public ngOnInit(): void {
        (this.mainContainer.nativeElement as HTMLElement).style.height = '450px';
        this.overlay.opening.subscribe(() => {
            this.previewHidden = true;
        });
        this.overlay.closing.subscribe(() => {
            this.previewHidden = false;
        });
    }

    public onClickScrollStrategy(strategy: string) {
        let scrollStrategy;
        const positionStrategy = new ConnectedPositioningStrategy();
        switch (strategy) {
            case ('absolute'):
                scrollStrategy = new AbsoluteScrollStrategy();
                this._target = this.scrollDemo.nativeElement.children[0];
                break;
            case ('block'):
                scrollStrategy = new BlockScrollStrategy();
                this._target = this.scrollDemo.nativeElement.children[1];
                break;
            case ('close'):
                scrollStrategy = new CloseScrollStrategy(this.mainContainer.nativeElement);
                this._target = this.scrollDemo.nativeElement.children[2];
                break;
            default:
                scrollStrategy = new NoOpScrollStrategy();
                this._target = this.scrollDemo.nativeElement.children[3];
        }
        if (this._overlayId) {
            this.overlay.detach(this._overlayId);
            delete this._overlayId;
        }
        this._overlayId = this.overlay.attach(MyDynamicCardComponent, {
            target: this._target,
            positionStrategy,
            scrollStrategy,
            modal: false,
            closeOnOutsideClick: true
        });
        this.overlay.show(this._overlayId);
    }

    public ngOnDestroy(): void {
        this.destroy$.next(true);
        this.destroy$.complete();
        if (this._overlayId) {
            this.overlay.detach(this._overlayId);
            delete this._overlayId;
        }
    }
}
ts

<div class='overlay-sample' #mainContainer>
    <div class='container'>
        <div class='container__row'>
            <div class='section__row--wide'>
                <div class='section__container--wide' #scrollDemo>
                    <span (click)="onClickScrollStrategy('absolute')">
                        <igx-icon>notifications</igx-icon>
                        <p>Absolute</p>
                    </span>
                    <span (click)="onClickScrollStrategy('block')">
                        <igx-icon>notifications</igx-icon>
                        <p>Block</p>
                    </span>
                    <span (click)="onClickScrollStrategy('close')">
                        <igx-icon>notifications</igx-icon>
                        <p>Close</p>
                    </span>
                    <span (click)="onClickScrollStrategy('')">
                        <igx-icon>notifications</igx-icon>
                        <p>None</p>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class='container' [hidden]="previewHidden">
        <app-overlay-dynamic-card-component></app-overlay-dynamic-card-component>
    </div>
</div>html

body {
    overflow-y: scroll !important;
}

.overlay-sample {
    padding: 32px 0px 32px 32px;
    overflow-y: scroll;
    display: flex;
    flex-direction: row;
    height: 200px;
    overflow-y: scroll;
}


.container__row > div, .section__container--wide > span, .section__position-element > div {
    display: inline-block;
}
.section__row--wide, .container__row, .section__header {
    width: 100%;
}

.section__row > span {
    height: 48px;
}
.section__row--wide, .section__container--wide > span {
    height: 80px;
    max-width: 320px;
}

span:hover {
    border: 1px solid #e41c77;
    box-sizing: border-box;
    cursor: pointer;
}

.section__container--wide {
    align-content: flex-start;
    display: flex;;
}

.section__container--wide > span {
    text-align: center;
    vertical-align: middle;
    line-height: 12px;
    font-weight: 500;
    width: 80px;
    padding-top: 16px;

    p {
        margin-top: 0px;
    }
}

.section__position-element, .section__position-header {
    width: 144px;
    text-align: center;
}

.section__separator {
    width: 32px;
}
.container {
    width: 50%;
    height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.overlay__element {
    width: 288px;
    height: 144px;
}

.section__header {
    max-height: 96px;
    text-align: left;
    font-weight: 700;
    font-size: 16px;
}

.container__row {
    height: 100%;
    text-align: left;
    margin-top: 16px;
}
.section__position-element, .section__row--wide {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
scss

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

モーダル

overlaySettings オブジェクトにブール値 (modal) を渡すことができます。これはオーバーレイが表示される方法を制御します。

modal プロパティが false の場合、要素は DOM 前景にアタッチされますが、すべての要素がまだアクティブで操作可能 (スクロール、クリックなど) です。
modal プロパティが true の場合、要素が DOM 前景にアタッチされ、背景の要素が非アクティブなため操作不能となり、すべてのイベントが中止されます。

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,
	IgxSwitchModule,
	IgxCardModule
 } from "igniteui-angular";
import { OverlayScrollSample1Component } from "./overlay-scroll-1/overlay-scroll-sample-1.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	OverlayScrollSample1Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxIconModule,
	IgxSwitchModule,
	IgxCardModule
],
  providers: [IgxOverlayService],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, ElementRef, Inject, OnDestroy, ViewChild } from '@angular/core';
import {
    AbsoluteScrollStrategy,
    AutoPositionStrategy,
    ConnectedPositioningStrategy,
    ElasticPositionStrategy,
    GlobalPositionStrategy,
    HorizontalAlignment,
    IgxOverlayService,
    OverlaySettings,
    PositionSettings,
    VerticalAlignment
} from 'igniteui-angular';
// tslint:disable:object-literal-sort-keys
@Component({
    selector: 'app-overlay-sample',
    styleUrls: ['./overlay-scroll-sample-1.component.scss'],
    templateUrl: './overlay-scroll-sample-1.component.html',
    providers: [IgxOverlayService]
})
export class OverlayScrollSample1Component implements OnDestroy {
    @ViewChild('modalDemo', { static: true })
    public modalDemo: ElementRef;

    @ViewChild('overlayDemo', { static: true })
    public overlayDemo: ElementRef;

    @ViewChild('mainContainer', { static: true })
    public mainContainer: ElementRef;

    public modalValue = true;
    private _defaultPositionSettings: PositionSettings = {
        horizontalDirection: HorizontalAlignment.Center,
        horizontalStartPoint: HorizontalAlignment.Center,
        verticalDirection: VerticalAlignment.Middle,
        verticalStartPoint: VerticalAlignment.Middle
    };

    private _overlaySettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy(),
        scrollStrategy: new AbsoluteScrollStrategy(),
        modal: true,
        closeOnOutsideClick: true
    };

    private _overlayId: string;

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

    public onClickModal(event: Event, strategy: string) {
        event.stopPropagation();
        const positionSettings = Object.assign(Object.assign({}, this._defaultPositionSettings), {
            horizontalDirection: HorizontalAlignment.Right,
            horizontalStartPoint: HorizontalAlignment.Right,
            verticalDirection: VerticalAlignment.Bottom,
            verticalStartPoint: VerticalAlignment.Bottom
        });
        let positionStrategy;
        switch (strategy) {
            case ('auto'):
                positionStrategy = new AutoPositionStrategy(positionSettings);
                break;
            case ('elastic'):
                positionStrategy = new ElasticPositionStrategy(positionSettings);
                break;
            case ('connected'):
                positionStrategy = new ConnectedPositioningStrategy(positionSettings);
                break;
            default:
                positionStrategy = new GlobalPositionStrategy(Object.assign(positionSettings, {
                    horizontalDirection: HorizontalAlignment.Center,
                    verticalDirection: VerticalAlignment.Middle
                }));
        }
        const showSettings = Object.assign(Object.assign({}, this._overlaySettings), {
            target: this.modalDemo.nativeElement,
            modal: this.modalValue,
            positionStrategy
        });
        if (this._overlayId) {
            this.overlay.detach(this._overlayId);
            delete this._overlayId;
        }
        this._overlayId = this.overlay.attach(this.overlayDemo, showSettings);
        this.overlay.show(this._overlayId, showSettings);
    }

    public ngOnDestroy(): void {
        if (this._overlayId) {
            this.overlay.detach(this._overlayId);
            delete this._overlayId;
        }
    }
}
ts

<div class='overlay-sample' #mainContainer>
    <div class='container'>
        <div class="container__row">
            <igx-switch [(ngModel)]='modalValue'>
                Modal
            </igx-switch>
            <div class='section__row--wide'>
                <div class="section__container--wide" #modalDemo>
                    <span (click)="onClickModal($event, 'auto')">
                        <igx-icon>notifications</igx-icon>
                        <p>Auto</p>
                    </span>
                    <span (click)="onClickModal($event, 'elastic')">
                        <igx-icon>notifications</igx-icon>
                        <p>Elastic</p>
                    </span>
                    <span (click)="onClickModal($event, 'connected')">
                        <igx-icon>notifications</igx-icon>
                        <p>Connect</p>
                    </span>
                    <span (click)="onClickModal($event, 'global')">
                        <igx-icon>notifications</igx-icon>
                        <p>Global</p>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class='container'>
        <div class="overlay__element" #overlayDemo>
            <igx-card>
                <igx-card-header>
                    <h3 class="igx-card-header__title">Overlay</h3>
                </igx-card-header>
                <igx-card-content>
                    <p class="igx-card-content__text">Click on the positioning settings to dynamically re-attach this
                        element.</p>
                </igx-card-content>
            </igx-card>
        </div>
    </div>
</div>html

.overlay-sample {
    padding: 32px 0px 32px 32px;
    overflow-y: scroll;
    display: flex;
    flex-direction: row;
    height: 1600px;
    margin-bottom: 500px;
}

.container__row > div, .section__container--wide > span, .section__position-element > div {
    display: inline-block;
}
.section__row--wide, .container__row, .section__header {
    width: 100%;
}

.section__row > span {
    height: 48px;
}
.section__row--wide, .section__container--wide > span {
    height: 80px;
    max-width: 320px;
}

span:hover {
    border: 1px solid #e41c77;
    box-sizing: border-box;
    cursor: pointer;
}

.section__container--wide {
    align-content: flex-start;
    display: flex;
}

.section__container--wide > span {
    text-align: center;
    vertical-align: middle;
    line-height: 12px;
    font-weight: 500;
    width: 80px;
    padding-top: 16px;

    p {
        margin-top: 0px;
    }
}

.section__position-element, .section__position-header {
    width: 144px;
    text-align: center;
}

.section__separator {
    width: 32px;
}
.container {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.overlay__element {
    width: 288px;
    height: 144px;
}

.section__header {
    max-height: 96px;
    text-align: left;
    font-weight: 700;
    font-size: 16px;
}

.container__row {
    height: 100%;
    text-align: left;
    margin-top: 16px;
}
.section__position-element, .section__row--wide {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
}

.igx-switch {
    padding: 16px;
}scss

API リファレンス

IScrollStrategy

スクロールストラテジ (スクロール方法)

使用方法

作業の開始

依存関係

スクロール方法

モーダル

API リファレンス

その他のリソース

テーマ設定

スクロール ストラテジ (スクロール方法)

使用方法

作業の開始

依存関係

スクロール方法

モーダル

API リファレンス

その他のリソース

テーマ設定

スクロールストラテジ (スクロール方法)