씌우다

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

    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

    오버레이 서비스를 사용하면 HTMLNode 또는 Angular 구성 요소를 오버레이 DOM에 연결하여 동적으로 표시할 수 있습니다.

    오버레이 서비스에 대한 참조가 설정된 후에는 이를 사용하여 콘텐츠를 동적으로 표시/숨길 수 있습니다. 예를 들어, attach 메소드에서 Angular Component를 전달할 수 있습니다. 그러면 구성요소를 표시하기 위해 show 메소드에 전달할 수 있는 고유 ID가 생성됩니다. 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 페이지에서 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);
    }
}

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

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

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

    • 구성 요소 정의 - 구성 요소를 첫 번째 인수로 전달할 때 오버레이 서비스는 해당 구성 요소의 새 인스턴스를 생성하고 해당 ElementRef​ ​overlay DOM에 동적으로 연결합니다. 이 메소드는 생성된 구성 요소의 호스트 뷰가 삽입될 컨테이너에 대한 참조인 두 번째 필수 매개 변수 ViewContainerRef도 허용합니다.
    • 기존 DOM 요소에 대한 ElementRef (위 샘플에 설명됨) - 페이지에 이미 렌더링된 모든 보기는 오버레이 서비스를 통해 전달되어 오버레이 DOM에서 렌더링될 수 있습니다.

    두 경우 모두 attach() 메소드는 다음을 수행합니다.

    • Angular에서 전달된 뷰에 대한 참조 가져오기
    • DOM에서 뷰를 분리하고 그 자리에 앵커를 남겨둡니다.
    • 제공된 OverlaySettings 사용하거나 기본 오버레이 설정으로 대체하여 뷰를 오버레이에 다시 연결합니다.

    ​show(id)를 호출하면 열린 애니메이션이 있는 경우 재생되고 첨부된 콘텐츠가 표시됩니다. hide(id) 호출하면 닫기 애니메이션이 있는 경우 재생되고 첨부된 콘텐츠가 숨겨집니다.

    마지막으로 detach(id) 메소드를 호출하면 뷰가 DOM의 원래 위치에 다시 연결됩니다. attach() 메서드에 구성 요소가 제공된 경우 detach(id) 호출하면 생성된 인스턴스가 삭제됩니다.

    Attaching Components

    아래 데모에서는 IgxCard 오버레이 서비스를 통한 구성 요소 attach() 아이디를 생성하는 방법입니다. 그런 다음 우리는 show() 제공된 ID를 사용하여 모달 컨테이너의 DOM에 카드를 동적으로 연결합니다.

    Overlay Settings

    ​attach() 메서드는 콘텐츠가 표시되는 방식을 구성하는 OverlaySettings 유형의 개체도 허용합니다. 해당 개체가 제공되지 않으면 오버레이 서비스는 기본 설정을 사용하여 전달된 콘텐츠를 렌더링합니다.

    예를 들어, 요소를 기준으로 콘텐츠의 위치를 지정하려면 다른 target과 positioningStrategy​ ​attach() 메서드에 전달할 수 있습니다(예: ConnectedPositioningStrategy). 구성 요소가 표시되는 방식을 구성하려면 먼저 OverlaySettings 개체를 만들어야 합니다.

    // my-overlay-component.component.ts
// import the ConnectedPositioningStategy class
import { ConnectedPositioningStrategy } from 'igniteui-angular';
// 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() 메서드는 AutoPositionStrategy, ConnectedPositioningStrategy 또는 ElasticPositionStrategy 사용하여 OverlaySettings 생성합니다. 목표, 위치 및 전략을 받아들입니다. target은 구성요소가 표시할 연결 지점 또는 요소입니다. position​ ​Above, Below, Before, After 및 Default 옵션이 있는 RelativePosition 열거형입니다. 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';
// 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

    ​attach() 메소드의 overlaySettings 매개변수를 사용하면 콘텐츠가 표시되는 방식을 변경할 수 있습니다. 예를 들어 콘텐츠 위치, 스크롤 동작 방식, 컨테이너가 모달인지 여부 등이 있습니다.

    만약에 아니요 overlaySettings 구성되면 토글된 요소는 기본 디스플레이 설정:

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

    Integration with 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)
    }
}

    Assumptions and Limitations

    아웃렛에 오버레이를 표시하고 아웃렛이 CSS에 설정된 변환, 관점 또는 필터가 있는 요소의 하위인 경우 모달 오버레이를 표시할 수 없습니다. 그 이유는 위에서 언급한 CSS 속성 중 하나가 설정된 경우 브라우저가 새 포함 블록을 생성하고 여기에 설명된 대로 오버레이가 이 포함 블록으로 제한되기 때문입니다.

    API References

    Additional Resources