포지셔닝 전략

    Position strategies determine where the content is displayed in the provided IgxOverlayService. By default, the content is positioned in the middle of the screen.

    Angular 위치 전략

    전략 개요

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

    글로벌

    Positions the content, based on the directions passed in through positionSettings. These are Left/Center/Right for horizontalDirection and Top/Middle/Bottom for verticalDirection. Defaults are:

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

    컨테이너

    Positions the content as GlobalPositionStrategy. Instead of position related to the screen ContainerPositionStrategy positions the content related to the provided in OverlaySettings outlet. Defaults are:

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

    연결됨

    Positions the element based on the start point from overlaySettings and directions passed in through positionSettings. It is possible to either pass a start point (type Point) or an HTMLElement as a positioning base. Defaults are:

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

    자동

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

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

    탄력있는

    Positions the element like the Connected positioning strategy and re-sizes the element to fit inside the view port (re-calculating width and/or height) in case the element is partially out of view. minSize can be passed in positionSettings to prevent resizing if it would put the element's dimensions below a certain threshold. Defaults are:

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

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

    메모

    The overlay element will be resized, but the positioning strategy does not handle overflow. For example, if the element needs to have overflow-y when resized, incorporate the appropriate style to provide that.

    용법

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

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

    Then specify the positioning strategy to be used by the overlay. The position strategy is passed in as a property in the overlaySettings parameter when the overlay.attach() method is called. In the example below we are changing the default GlobalPositionStrategy with 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);

    포지셔닝 설정

    Each positioning strategy has its own positioning settings. These settings determine how the content will be shown. In the example below, we are creating a new PositionSettings object. Using it we force the overlay to show the content starting from the top right point of the provided target - the buttonElement. The direction in which the content is shown is set to top-left. Then we create a new ConnectedPositionStrategy and pass it the 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);

    전략 변경

    You can also change the positioning strategy, used by the overlay, by overriding the positionStrategy property of the overlaySettings object that is passed to the overlay:

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

    설정 변경

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

    내용 상쇄

    The setOffset method enables precise adjustment of content positioning along the corresponding axis by a specified amount. Additionally, it supports an optional offsetMode parameter, providing control over how offset values are applied.

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

    추가 리소스