오버레이 스타일링

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

오버레이 구성요소 스타일 지정

대부분의 경우에 글로벌 테마 스타일은 오버레이 아웃렛의 영향을 받지 않습니다. 예를 들어 드롭다운을 살펴보겠습니다. 스타일이 있는 글로벌에 의해 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>
html

@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);
scss

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

범위가 지정된 구성요소 스타일

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

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

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

구성 요소가 를 사용하는 경우 Emulated ViewEncapsulation을 사용하려면 다음이 필요합니다. penetrate이 캡슐화는 다음을 사용합니다.::ng-deep을 클릭하여 스타일을 적용합니다.

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

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

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

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

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

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

import { Component, ElementRef, inject } from '@angular/core';
import { IgxOverlayService, IgxComboComponent } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-overlay-styling',
    styleUrls: ['overlay-styling.component.scss'],
    templateUrl: 'overlay-styling.component.html',
    imports: [IgxComboComponent, FormsModule]
})
export class OverlayStylingComponent {
    element = inject(ElementRef);
    private overlayService = inject(IgxOverlayService);

    public items = [{
            name: 'Option 1',
            id: 0
        }, {
            name: 'Option 2',
            id: 1
        }, {
            name: 'Option 3',
            id: 2
        }, {
            name: 'Option 4',
            id: 3
        }, {
            name: 'Option 5',
            id: 4
        }, {
            name: 'Option 6',
            id: 5
        }
    ];
}
ts

<div class="combo-wrapper">
  <igx-combo [data]="items" valueKey="name" displayKey="name" [ngModel]="[items[2].name]" width="410px" [overlaySettings]="{ outlet: element, modal: true }">
  </igx-combo>
</div>
html

@use "layout.scss";
@use "igniteui-angular/theming" as *;

$my-drop-down-theme: drop-down-theme(
  $background-color: #efefef
);

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

:host {
  ::ng-deep {
    @include css-vars($my-overlay-theme);
    @include css-vars($my-drop-down-theme);
  }
}
scss

이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.