오버레이 스타일링

    IgxOverlayService페이지 내용 위에 콘텐츠를 표시하는 데 사용됩니다. 많은 Ignite UI for Angular 구성 요소들이 오버레이를 사용합니다 - 드 롭다운, 콤보, 날짜 선택기 등 - 오버레이가 콘텐츠를 어떻게 표시하는지 이해하는 것이 중요합니다. 다른 요소 위에 콘텐츠를 표시하려면, 서비스는 문서를 본문 끝에 기본적으로 부착하는 특수 아울렛 컨테이너로 옮깁니다. 이 동작은 특정 컨테이너에 적용된 스타일에 영향을 줄 수 있습니다.

    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(
  $background-color: #efefef
);

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

    전역 스타일은 범위 규칙에 따라 생성되지 않으며 캡슐화의 영향을 받지 않기 때문에, 오버레이 콘센트로 옮겨진 서비스 포함igx-drop-down-item 페이지 내 모든 요소와 일치할 수 있습니다.

    Scoped Component Styles

    오버레이에 표시되는 요소의 스타일을 지정할 때, 범위가 설정된 DOM. CSS 규칙에서 오버레이outlet의 위치를 명시해야 하며, 적용하려는 스타일의 올바른 맥락에서 오버레이 내용이 표시되어야 합니다.

    예를 들어,igx-combo 아이템 스타일은 테마를igx-drop-down 사용하는데, 콤보가 자체 뷰 안에서 콘텐츠를 정의하기 때문입니다.

    // overlay-styling.component.scss
@include css-vars($my-drop-down-theme);
    Note

    만약 컴포넌트가 ViewEncapsulation을 사용Emulated 한다면, 스타일을 적용하려면 이 캡슐화penetrate가::ng-deep 필요합니다.

    // overlay-styling.component.scss
:host {
  ::ng-deep { 
    @include css-vars($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 단일 속성 -$background-color를 노출시키는데, 오버레이가 설정된modal: true 배경 색상에 영향을 줍니다.

    Global Styles

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

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

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

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

    Note

    만약 컴포넌트가 ViewEncapsulation을 사용Emulated 한다면, 스타일을 적용하려면 이 캡슐화penetrate가::ng-deep 필요합니다.

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

    Scoped Overlay Styles

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

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

    API References

    Additional Resources