오버레이 스타일링

    IgxOverlayService는 페이지 콘텐츠 위에 콘텐츠를 표시하는 데 사용됩니다. 많은 Ignite UI for Angular 오버레이(Drop Down, Combo, Date Picker 등)를 사용하므로 오버레이가 콘텐츠를 표시하는 방법을 이해하는 것이 중요합니다. 콘텐츠를 다른 요소 위에 표시하기 위해 서비스는 해당 콘텐츠를 특수 아웃렛 컨테이너(기본적으로 문서 본문 끝에 첨부됨)로 이동합니다. 이 동작은 특정 컨테이너로 범위가 지정된 스타일에 영향을 미칠 수 있습니다.

    Styling Overlay Components

    대부분의 경우에 글로벌 테마 스타일은 오버레이 아웃렛의 영향을 받지 않습니다. 예를 들어 드롭다운을 살펴보겠습니다. 스타일이 있는 글로벌에 의해 css-vars 믹스인:

    <!-- overlay-styling.component.html -->
<igx-drop-down #customDropDown height="350px">
    <igx-drop-down-item *ngFor="let item of items" [value]="item.id">
        {{ item.name }}
    </igx-drop-down-item>
</igx-drop-down>

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';


$my-drop-down-theme: drop-down-theme(
    $palette: $my-custom-palette
);

@include css-vars($my-drop-down-theme);

    전역 스타일은 범위가 지정된 규칙에 따라 생성되지 않으며 캡슐화의 영향을 받지 않으므로 서비스가 오버레이 아웃렛으로 이동된 igx-drop-down-item 포함하여 페이지의 모든 요소와 일치할 수 있습니다.

    Scoped Component Styles

    오버레이에 표시되는 요소의 스타일 범위를 지정할 때 DOM에서 오버레이 outlet 위치를 지정해야 합니다. 범위가 지정된 CSS 규칙에는 요소의 특정 계층 구조가 필요합니다. 오버레이 콘텐츠가 적용하려는 스타일의 올바른 컨텍스트에 표시되는지 확인해야 합니다.

    예를 들어 igx-combo 예로 들어보겠습니다. 해당 항목 스타일은​ ​igx-drop-down 테마를 사용합니다. 왜냐하면 콤보가 자체 뷰 내부에서 콘텐츠를 정의하기 때문입니다.

    Note

    스타일이 누출되는 것을 방지하려면 항상:host 선택기에서 스타일 범위를 지정하세요.

    // overlay-styling.component.scss
:host {
    @include css-vars($my-drop-down-theme);
}

    테마의 $legacy-support 변수가 true로 설정된 경우 구성 요소의 테마 기능을 사용하여 구성 요소의 스타일을 지정해야 합니다.

    Note

    구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다.

    // overlay-styling.component.scss
:host {
   ::ng-deep{ 
        @include drop-down($my-drop-down-theme);
    }
}

    콤보 목록의 항목 아니다 우리 구성 요소의 후손 host- 현재 문서 본문 끝의 기본 오버레이 콘센트에 표시되고 있습니다. 다음을 사용하여 이를 변경할 수 있습니다. outlet에 있는 재산 overlaySettings. 그만큼 outlet 오버레이 컨테이너를 렌더링해야 하는 위치를 제어합니다.

    여기에서 컨테이너를 배치할 요소에 대한 참조를 전달할 수 있습니다.

    <igx-combo [data]="items" valueKey="name" displayKey="name" [overlaySettings]="{ outlet: element, modal: true }">
</igx-combo>

    export class OverlayStylingComponent {
    ...
    constructor(public element: ElementRef) {
    }
}

    이제 콤보의 항목 목록이 구성 요소의 호스트 내부에 올바르게 렌더링되므로 사용자 정의 테마가 적용됩니다.

    Styling The Overlay

    이제 ViewEncapsulation 오버레이의 outlet 속성과 함께 작동하는 방식을 다루었으므로 오버레이 래퍼 자체의 스타일을 지정하는 방법을 살펴볼 수 있습니다. overlay-theme 오버레이가 modal: true로 설정된 경우 배경화면의 색상에 영향을 주는 단일 속성인 $background-color 노출합니다.

    Global Styles

    오버레이 모달의 스타일을 지정하는 가장 쉬운 방법은 해당 테마를 앱의 전역 스타일에 포함하는 것입니다.

    //  styles.scss
$my-overlay-theme: overlay-theme(
  $background-color: rgba(0, 153, 255, 0.3)
);

@include css-vars($my-overlay-theme);

    테마의 $legacy-support 변수가 true로 설정된 경우 오버레이의 테마 기능을 사용하여 구성 요소의 스타일을 지정해야 합니다.

    // styles.scss
...
@include overlay($my-overlay-theme);

    이제 모든 모달 오버레이의 배경이 보라색 색조를 갖게 됩니다.

    Scoped Overlay Styles

    오버레이가 특정 구성 요소 아래 에서만 특정 배경을 갖도록 하려면 테마 범위를 지정할 수 있습니다. 모달 오버레이의 범위를 지정할 때 오버레이 아웃렛을 이동해야 하는데 여기에는 몇 가지 제한 사항이 있습니다. 오버플로 클리핑, Z-색인 및 뷰포트 문제의 위험을 최소화하려면 상위 수준 구성 요소에서만 모달 오버레이용 콘센트를 사용하는 것이 좋습니다.

    //  styles.scss
...
.purple {
    @include css-vars($my-overlay-theme);
}

    테마가 앱의 다른 구성 요소에 영향을 미치지 않도록 하려면:host 선택기를 사용하세요.

    // overlay-styling.component.scss
@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
...
:host {
    @include css-vars($my-overlay-theme);
}
    Note

    구성 요소가 Emulated ViewEncapsulation을 사용하고 $legacy-support​ ​true로 설정된 경우 오버레이의 테마 기능을 사용하고::ng-deep 사용하여 캡슐화를 penetrate.

    API References

    Additional Resources