포지셔닝 전략

    포지션 전략은 콘텐츠가 제공된IgxOverlayService 곳에 표시되는 위치를 결정합니다. 기본적으로 콘텐츠는 화면 중앙에 위치해 있습니다.

    Angular Positioning Strategies Example

    Strategies Overview

    5가지 포지셔닝 전략이 있습니다.

    Global

    전달된 지시positionSettings에 따라 내용을 위치시킵니다. 이들은 왼쪽/중앙/오른쪽,horizontalDirection 위/가운데/하단verticalDirection 입니다. 디폴트는 다음과 같습니다:

    수평 방향 수직 방향
    수평정렬.중심 수직정렬.중간

    Container

    콘텐츠를GlobalPositionStrategy 다음과 같이 배치합니다. 화면ContainerPositionStrategy 위치와 관련된 위치 대신, 제공되는OverlaySettings outlet 내용과 관련된 내용이 있습니다. 디폴트는 다음과 같습니다:

    수평 방향 수직 방향
    수평정렬.중심 수직정렬.중간

    Connected

    출발점overlaySettings과 통과positionSettings 한 방향을 바탕으로 요소를 위치시킵니다. 출발점(유형Point)을 통과시키거나 위치HTMLElement 기반 기반으로 할 수 있습니다. 디폴트는 다음과 같습니다:

    표적 수평 방향 수직 방향 수평시작점 수직시작점
    새로운 포인트(0, 0) 수평 정렬.오른쪽 수직 정렬.하단 수평정렬.왼쪽 수직 정렬.하단

    Auto

    ​Connected 위치 지정 전략과 동일한 방식으로 요소를 배치합니다. 또한 요소가 뷰포트에서 부분적으로 벗어나는 경우 다른 시작점을 계산합니다. Auto 전략은 처음에는 Connected 전략과 같은 요소를 표시하려고 시도합니다. 요소가 뷰포트 밖으로 나가면 자동은 시작점과 방향을 반전시킵니다. 즉, 방향이 '하단'이면 '상단'으로 전환하는 식입니다. 뒤집은 후에도 요소가 여전히 뷰포트 밖에 있으면 자동은 초기 방향과 시작점을 사용하여 요소를 뷰포트로 밀어 넣습니다. 예를 들어 요소가 뷰포트의 오른쪽에서 50px만큼 벗어나면 자동은 해당 요소를 왼쪽으로 50px만큼 밀어냅니다. 나중에 요소가 부분적으로 뷰포트를 벗어나면 해당 높이나 너비가 뷰포트보다 크면 자동은 요소의 왼쪽/상단 가장자리를 뷰포트의 왼쪽/상단 가장자리에 정렬합니다. 기본값은 다음과 같습니다.

    표적 수평 방향 수직 방향 수평시작점 수직시작점
    새로운 포인트(0, 0) 수평 정렬.오른쪽 수직 정렬.하단 수평정렬.왼쪽 수직 정렬.하단

    Elastic

    ​Connected 위치 전략처럼 요소를 위치시키고, 요소가 부분적으로 시야에서 벗어났을 경우를 대비해 뷰포트 안에 맞게 크기를 조정합니다(너비 및/또는 높이를 재계산).minSize 원소의 치수가 일정 임계값 이하로 떨어질 경우 크기 조정을 방지하기 위해 패스 인(Pass)할positionSettings 수 있습니다. 디폴트는 다음과 같습니다:

    표적 수평 방향 수직 방향 수평시작점 수직시작점 최소 크기
    새로운 포인트(0, 0) 수평 정렬.오른쪽 수직 정렬.하단 수평정렬.왼쪽 수직 정렬.하단 { 너비: 0, 높이: 0 }
    Note

    전략이 HorizontalDirection = Center / VerticalDirection = Middle을 사용하는 경우 요소 크기 조정을 시도하지 않습니다.

    Note

    오버레이 요소 그럴 것이다 크기 변경, 하지만 위치 전략 그렇지 않습니다 핸들overflow. 예를 들어, 원소가 다음이 필요하다면,overflow-y 크기를 조정할 때는 적절한 스타일을 반영하세요.

    Usage

    위치 전략을 사용하면 다양한 조합으로 오버레이에 콘텐츠를 표시할 수 있습니다. 다양한 포지션 전략을 사용하려면 먼저 다음과 같이 사용되는 각 전략에 필요한 종속성을 포함해야 합니다.

    import {
    AutoPositionStrategy,
    ConnectedPositioningStrategy,
    ContainerPositionStrategy,
    ElasticPositionStrategy,
    GlobalPositionStrategy
} from 'igniteui-angular/core';
// import { AutoPositionStrategy, 
//    ConnectedPositioningStrategy, 
//    ContainerPositionStrategy,
//    ElasticPositionStrategy,
//    GlobalPositionStrategy } from '@infragistics/igniteui-angular'; for licensed package

    그 다음 오버레이가 사용할 위치 전략을 지정합니다. 포지션 전략은 메서드가 호출될 때overlaySettings 매개변수의overlay.attach() 속성으로 전달됩니다. 아래 예시에서는 기본값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);

    Positioning Settings

    각 위치 전략마다 고유한 위치 설정이 있습니다. 이 설정들이 콘텐츠가 어떻게 보여질지 결정합니다. 아래 예시에서는 새로운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);

    Changing Strategies

    오버레이가 사용하는 위치 전략을 변경할 수도 있는데, 오버레이에 전달되는 객체의positionStrategy 속성을 덮overlaySettings 어쓰면 됩니다:

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

    Changing Settings

    기존 전략의 포지션 설정을 변경하려면 해당 전략의 설정을 재정의하세요. 전략이 이미 연결된 경우 이전에 생성된 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);

    Offsetting Content

    이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);

    // 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);

    API References

    Additional Resources