포지셔닝 전략

    위치 전략은 제공된 IgxOverlayService에서 콘텐츠가 표시되는 위치를 결정합니다. 기본적으로 콘텐츠는 화면 중앙에 배치됩니다.

    Angular Positioning Strategies Example

    Strategies Overview

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

    Global

    ​positionSettings 통해 전달된 방향에 따라 콘텐츠의 위치를 지정합니다. 이는 horizontalDirection의 경우 Left/Center/Right이고 verticalDirection의 경우 Top/Middle/Bottom입니다. 기본값은 다음과 같습니다.

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

    Container

    콘텐츠를 GlobalPositionStrategy로 배치합니다. 화면과 관련된 위치 대신 ContainerPositionStrategy​ ​OverlaySettings outlet에 제공된 것과 관련된 콘텐츠를 배치합니다. 기본값은 다음과 같습니다.

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

    Connected

    ​overlaySettings의 시작점과 positionSettings 통해 전달된 방향을 기준으로 요소의 위치를 지정합니다. 시작점(Point 유형) 또는 HTMLElement 위치 기준으로 전달할 수 있습니다. 기본값은 다음과 같습니다.

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

    Auto

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

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

    Elastic

    ​연결된 위치 지정 전략과 같이 요소를 배치하고 요소가 부분적으로 시야에서 벗어난 경우 뷰 포트 내부에 맞도록 요소 크기를 조정합니다(너비 및/또는 높이 다시 계산). minSize 요소의 크기가 특정 임계값 아래로 놓이는 경우 크기 조정을 방지하기 위해 positionSettings에 전달될 수 있습니다. 기본값은 다음과 같습니다.

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

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

    Note

    오버레이 요소 될거야 크기는 조정되었지만 포지셔닝 전략은 하지 않습니다 핸들 overflow. 예를 들어, 요소에 다음이 있어야 하는 경우 overflow-y 크기를 조정할 때 적절한 스타일을 통합하여 이를 제공하세요.

    Usage

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

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

    그런 다음 오버레이에서 사용할 위치 지정 전략을 지정합니다. 위치 전략은 overlay.attach() 메서드가 호출될 때 overlaySettings 변수의 속성으로 전달됩니다. 아래 예에서는 ConnectedPositionStrategy를 사용하여 기본 GlobalPositionStrategy 변경합니다.

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

    오버레이에 전달된 overlaySettings 객체의 positionStrategy 속성을 재정의하여 오버레이에서 사용하는 위치 지정 전략을 변경할 수도 있습니다.

    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