구성 요소 테마

구성 요소 테마를 사용하면 전체적으로 정의된 테마를 재정의하여 특정 구성 요소 인스턴스의 스타일을 변경할 수 있습니다.

개요

구성 요소 수준 테마를 만드는 방법을 자세히 알아보기 전에 Ignite UI for Angular 요소 테마에 접근하는 방법에 대해 잠시 이야기해 보겠습니다. 우리는 IE11과 같은 구형 브라우저를 지원할 수 있기를 원하기 때문에 테마 구성 요소에 대해 완전히 다른 두 가지 접근 방식이 있습니다.

• 첫 번째 접근 방식은 CSS 변수를 사용하여 구성 요소 인스턴스의 스타일을 지정하는 것입니다. CSS 변수를 사용하면 스타일을 반복해서 복제하지 않고도 구성 요소 테마를 생성할 수 있습니다. 또한 이 접근 방식을 사용하면 런타임에 CSS 변수의 값을 수정할 수 있습니다.
• 두 번째 접근 방식은 특정 구성 요소에 대해 이전에 선언된 CSS 규칙을 덮어쓰는 새로운 CSS 규칙 세트를 만드는 것입니다. 이 접근 방식은 매우 간단하며 이전 브라우저에 합리적인 테마 지원을 제공할 수 있는 유일한 방법입니다. 하지만 생성된 CSS 테마에 많은 추가 CSS 규칙을 추가하므로 이상적이지는 않습니다.

이러한 접근 방식이 실제로 어떻게 작동하는지, 그리고 구성 요소 수준 테마를 생성할 때 다른 접근 방식 대신 사용하는 방법을 살펴보겠습니다.

Creating Themes

구성 요소 테마에는 여러 부분이 있습니다.

• 구성 요소 테마 함수- 전달된 인수를 정규화하고 구성 요소 믹스인에서 사용할 테마를 생성하는 Sass 함수입니다.
• CSS 변수 mixin- 구성 요소 테마를 사용하고 특정 구성 요소의 스타일을 지정하는 데 사용되는 CSS 변수를 생성하는 Sass 믹스인입니다.
• 구성 요소 믹스인- 구성 요소 테마를 사용하고 특정 구성 요소의 스타일을 지정하는 데 사용되는 CSS 규칙을 생성하는 Sass 믹스인입니다.

아바타의 기본 테마에 설정한 배경색과 다른 배경색을 갖는 새로운 전역 아바타 테마를 만들고 싶다고 가정해 보겠습니다. 개요 섹션에서 언급했듯이 구성 요소 테마를 만드는 데는 두 가지 일반적인 접근 방식이 있습니다. 구성 요소 테마를 구성하고 범위를 지정할 수 있는 더 많은 방법이 있습니다. 이를 수행하는 가장 간단한 방법은 전역 테마를 정의한 동일한 파일에 있는 것입니다.

아바타 테마 정의:

// Some place after @include theme(...);

// Change the background of the avatar to purple.
$avatar-purple-theme: avatar-theme(
  $background: purple,
);

// Pass the css-vars to the `css-vars` mixin
@include css-vars($avatar-purple-theme);

위 코드는 igx-avatar 구성 요소에 대한 CSS 변수를 생성합니다. 이러한 새로운 CSS 변수는 기본 아바타 규칙을 덮어씁니다. 마찬가지로 나중에 전역 scss 파일에 css-vars mixin을 포함시키려는 경우 해당 mixin은 이전에 정의된 테마를 다시 덮어씁니다.

예를 들어:

// ...
@include css-vars($avatar-purple-theme);

// Later
$avatar-royalblue-theme: avatar-theme(
  $background: royalblue,
);

@include css-vars($avatar-royalblue-theme);

위 코드에서 사실상 전역 테마는 이전에 포함된 css-vars 믹스인을 덮어쓰므로 이제 $avatar-royalblue-theme 입니다.

이것은 우리를 다음 요점으로 인도합니다.

Scoping Themes

이전 예제에서 보았듯이 동일한 레벨의 동일한 구성 요소를 대상으로 하는 여러 테마를 추가하는 경우 마지막 테마 믹스인이 우선 적용됩니다. 이는 CSS 캐스케이드가 작동하는 방식 때문입니다. 동일한 유형의 구성 요소를 대상으로 하는 두 개 이상의 테마를 갖고 싶다면 범위를 선택기로 지정해야 합니다. 예를 들어, 여러 개의 igx-avatar 테마를 생성하고 나중에 구성 요소 마크업에서 사용할 수 있는 특정 CSS 선택기로 범위를 지정할 수 있습니다.

// ...
// CSS class selectors
.avatar-royalblue {
  @include css-vars($avatar-royalblue-theme);
}

.avatar-purple {
  @include css-vars($avatar-purple-theme);
}

구성요소 템플릿에서:

<div class="avatar-royalblue">
  <igx-avatar initials="AZ"></igx-avatar>
</div>

<div class="avatar-purple">
  <igx-avatar icon="home"></igx-avatar>
</div>

View Encapsulation

지금까지 우리는 전역적으로 범위가 지정되고 단일 Sass 파일에 포함되는 테마를 만드는 방법을 탐색했습니다. 그러나 이것이 항상 바람직한 것은 아니며 어떤 경우에는 Sass 파일을 특정 구성 요소에 바인딩하기를 원할 수도 있습니다. 이러한 경우에는 View Encapsulation, 특히 Angular에서 에뮬레이션되는 방식을 고려해야 합니다.

Angular 팀은 뷰 캡슐화를 위해 Emulated(기본값), ShadowDom 및 None이라는 3가지 전략을 채택했습니다. 이러한 각 전략에 대해 자세히 알아보려면 Angular 문서를 살펴보세요. View Encapsulated 상위 구성 요소의 일부인 Ignite UI for Angular 테마를 처리하는 방법을 자세히 살펴보겠습니다.

어쨌든 Emulated 뷰 캡슐화는 정확히 무엇을 의미합니까? 이러한 유형의 뷰 캡슐화는 Shadow DOM 사양을 활용하지 않고 대신 호스트 요소에 적용된 고유 속성 식별자를 사용하여 구성 요소와 해당 하위 항목에 대한 스타일을 바인딩하는 방법을 사용합니다. 일부 내부 선택기를 대상으로 하는 View Encapsulated 구성 요소의 스타일시트에 추가하는 스타일 규칙은 호스트 요소의 고유 속성을 참조하지 않기 때문에 적용되지 않습니다. 이 캡슐화를 '침투'하려면 뷰 캡슐화 침투 전략을 사용해야 합니다. 현재 Angular에서 이 전략은::ng-deep 입니다. 이를 통해 호스트 요소에 의해 캡슐화된 내부 선택기를 대상으로 지정할 수 있습니다. CSS 변수 대신 CSS 규칙을 다루고 구성 요소의 단일 인스턴스를 사용자 정의하려는 경우::ng-deep 사용하는 것이 좋습니다. 다음 섹션에서 이에 대한 예를 제공하겠습니다.

CSS 변수를 사용하는 예를 살펴보겠습니다. 특정 상위 구성 요소에 바인딩된 아바타 테마를 만들어 보겠습니다.

간단한 구성 요소는 다음과 같습니다.

import { Component, Input } from "@angular/core";

@Component({
  selector: "app-avatar",
  styleUrls: ["./app-avatar.component.scss"],
  template: `<igx-avatar [initials]="initials"></igx-avatar>`,
})
export class AvatarComponent extends Component {
  @Input() public initials = "AZ";
}

Sass 스타일시트는 다음과 같습니다.

// app-avatar.component.scss

// Import the theming module
@use "igniteui-angular/theming" as *;

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

$avatar-royalblue-theme: avatar-theme(
  $background: royalblue,
);

:host {
  @include css-vars($avatar-royalblue-theme);
}

CSS 변수를 사용할 때::ng-deep 의사 선택기를 사용할 필요가 없습니다. 위의 코드를 사용하여 igx-avatar에 대한 CSS 변수를 만들었습니다. 이 변수의 배경색은 항상 royalblue 입니다. 사용자 정의 아바타의 테마는 다른 igx-avatar 구성 요소 인스턴스로 '유출'되지 않으므로 사용자 정의 app-avatar 구성 요소 내에 캡슐화되어 유지됩니다.

​$igx-legacy-support​ ​false로 설정하여 구축된 Ignite UI for Angular 사용하면 프로젝트에서 Sass가 필요 없이 구성 요소 스타일을 지정할 수 있습니다. 예를 들어 위의 내용은--igx-avatar-background CSS 변수의 값을 원하는 색상으로 설정하여 달성할 수 있습니다.

/* app-avatar.component.css */
:host {
  --igx-avatar-background: royalblue;
}

Targeting Older Browsers

​개요 섹션에서 $igx-legacy-support 전역 변수를 true로 설정하여 하드 코딩된 값을 사용하여 구성 요소의 스타일을 지정할 수 있다고 언급했습니다. theme 믹스인을 사용하고 $legacy-support​ ​true 값을 전달하면 $igx-legacy-support도 true로 설정됩니다.

Usage in global themes

아래 예에서는 하드 코딩된 값을 사용하여 구성 요소의 스타일을 지정하는 방법을 보여줍니다.

// Import the theming module
@use "igniteui-angular/theming" as *;

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

@include core();
@include theme($palette: $default-palette, $legacy-support: true);

// Overwrite the default themes for igx-avatar using hard-coded values:
$avatar-royalblue-theme: avatar-theme(
  $background: royalblue,
);

@include avatar($avatar-royalblue-theme);

Usage in encapsulated views

아래 샘플은 뷰 캡슐화 섹션의 샘플을 시작점으로 사용합니다.

// Import the theming module
@use "igniteui-angular/theming" as *;

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

// Enable legacy support first.
// !IMPORTANT: Only applicable for versions older than Ignite UI for Angular 13.
$igx-legacy-support: true;
$avatar-royalblue-theme: avatar-theme(
  $initials-background: royalblue,
);

:host ::ng-deep {
  @include avatar($avatar-royalblue-theme);
}

API Overview

• 글로벌 테마
• 아바타 테마

Additional Resources

전역 테마를 구성하는 방법을 알아보세요.

• 글로벌 테마

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub