씌우다

    오버레이 서비스는 앱 포그라운드에서 콘텐츠를 동적으로 렌더링하는 쉽고 빠른 방법을 제공합니다. 렌더링할 콘텐츠와 렌더링 방식(예: 배치, 애니메이션, 스크롤 및 클릭 동작)은 고도로 구성 가능하며 가능한 모든 시나리오와 일치할 수 있습니다. 오버레이 서비스는 토글 지시문에 완전히 통합되어 있습니다.

    Angular Overlay Example

    Getting Started

    먼저 컴포넌트에서 를IgxOverlayService 가져오고,inject 컴포넌트의 구성자에서 참조를 가져와야 합니다:

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

...

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

...

    Displaying Content

    오버레이 서비스는 오버레이 DOM에 부착하여 동적으로 표시하거나 Angular 컴포넌트를 표시HTMLNode 할 수 있습니다.

    오버레이 서비스에 대한 참조가 설정되면, 이를 통해 콘텐츠를 동적으로 표시하거나 숨길 수 있습니다. 예를 들어, 메서드에서attach Angular 컴포넌트를 전달할 수 있습니다. 이렇게 하면 고유 ID가 생성되고, 컴포넌트를 표시하는 메서드에 전달show 할 수 있습니다. Angular 컴포넌트를 표시할 때는 메서드에ViewContainerRef 두 번째 필수 매개변수attach를 전달해야 합니다.

    
// 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 하는 파일을 페이지에서 theIgxOverlayService로 전달하고 싶다면, 다음과 같이 할 수 있습니다:

    <!-- 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);
    }
}

    오버레이 서비스의 방식에는attach() 두 가지 오버로드가 있습니다:

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

    두 오버로드의 첫 번째 매개변수는 필수이며 오버레이에 표시될 콘텐츠를 나타냅니다. 콘텐츠를 전달하는 방법에는 몇 가지 시나리오가 있습니다.

    • 컴포넌트 정의 - 컴포넌트를 첫 번째 인자로 전달할 때, 오버레이 서비스는 그 컴포넌트의 새로운 인스턴스를 생성하고 동적으로 DOM에ElementRef 연결합니다overlay. 이 방법은 생성된 컴포넌트의 호스트 뷰가 삽입될 컨테이너에 대한 참조인 두 번째 필수 매개변수ViewContainerRef도 받아들입니다.
    • 기존 DOM 요소(위 샘플에 나타난 것)로의 AElementRef- 이미 페이지에 렌더링된 모든 뷰는 오버레이 서비스를 통해 오버레이 DOM에서 렌더링될 수 있습니다.

    두 경우 모두 이attach() 방법은 다음과 같은 역할을 합니다:

    • Angular에서 전달된 뷰에 대한 참조를 가져옵니다.
    • DOM에서 뷰를 분리하고 그 자리에 앵커를 남겨둡니다.
    • 제공된OverlaySettings 오버레이로 뷰를 다시 붙이거나 기본 오버레이로 돌아가세요

    그 후show(id) 호출하면 열린 애니메이션이 재생되고, 첨부된 콘텐츠가 표시됩니다. 콜을 하면hide(id) 클로즈 애니메이션이 재생되고, 첨부된 콘텐츠가 숨겨집니다.

    마지막으로 호출detach(id) 메서드는 뷰를 DOM 내 원래 위치로 다시 연결합니다. 만약 컴포넌트가 메서드에 제공되었다면,attach() 호출detach(id)은 생성된 인스턴스를 파괴합니다.

    Attaching Components

    아래 데모에서는 IgxCard 컴포넌트를 오버레이 서비스의 메서드를attach() 통해 ID를 생성할 수 있습니다. 그 다음 제공된 ID로 메서드를show() 호출해 모달 컨테이너 내 DOM에 동적으로 카드를 부착합니다.

    Overlay Settings

    메서드는attach() 또한 콘텐츠OverlaySettings 표시 방식을 구성하는 유형의 객체도 받아들입니다. 만약 그런 객체가 제공되지 않을 경우, 오버레이 서비스는 기본 설정을 사용해 전달된 콘텐츠를 렌더링합니다.

    예를 들어, 내용을 요소를 기준으로 위치시키고 싶다면, 다른target와positioningStrategy를 메서드에attach() 전달할 수 있습니다. 예를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 됩니다.

    Preset Overlay Settings

    그리고IgxOverlayService.createAbsolutePositionSettings() 메서드는IgxOverlayService.createRelativePositionSettings() 미리 정의된 설정 집합을 기반으로 쉽게 생성OverlaySettings 할 수 있는 방법을 제공합니다.

    그IgxOverlayService.createAbsolutePositionSettings() 방법은 비양상 생성OverlaySettings와GlobalPositionStrategy 또는ContainerPositionStrategy 만약outlet 매개변수가 제공됩니다. 그AbsolutePosition 열거는 선택할 수 있는 가능한 배치를 정의합니다:Center,Top 또는Bottom. 기본 위치는 다음과 같습니다Center.

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

    ​IgxOverlayService.createRelativePositionSettings()이 방법은 와 또는 를OverlaySettings​AutoPositionStrategy​ConnectedPositioningStrategy 만듭니다ElasticPositionStrategy. 목표, 위치, 전략을 수락합니다. 는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);

    Demo

    Hiding the Overlay

    오버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>

    Attaching Settings

    메서드의overlaySettings 매개변수를 사용attach() 해 콘텐츠가 표시되는 방식을 변경할 수 있습니다 - 예를 들어, 콘텐츠가 어디에 위치하는지, 스크롤이 어떻게 동작해야 하는지, 컨테이너가 모달인지 아닌지 등이 있습니다

    만약 설정이 없 overlaySettings 으면, 토글된 요소는 기본 디스플레이 설정을 받게 됩니다:

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

    Integration with igxToggle

    이 부분IgxToggleDirective은 완전히 통합되어 있습니다.IgxOverlayService 따라서 토글 지시의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)
    }
}

    Assumptions and Limitations

    만약 오버레이를 콘센트에서 보여주고, 그 콘센트가 CSS에서 변환, 원근법, 필터가 설정된 요소의 자식이라면, 모달 오버레이를 보여줄 수 없습니다. 이는 위에서 언급한 CSS 속성 중 하나가 설정되면 브라우저가 새로운 포함 블록을 생성하고, 오버레이가 MDN 위치 문서에 설명된 대로 이 포함된 블록으로 제한되기 때문입니다.

    API References

    Additional Resources