구성 요소 테마

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

    개요

    구성 요소 수준 테마를 만드는 방법에 대해 자세히 알아보기 전에 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);

    The above code produces CSS variables for the igx-avatar component. These new CSS variables overwrite the default avatar rules. Similarly, if you were to include css-vars mixin later down in the global scss file, the mixin will again overwrite any previously defined themes.

    예를 들어:

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

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

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

    In the above code, the de facto global theme is now the $avatar-royalblue-theme as it overwrites any previously included css-vars mixins.

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

    Scoping Themes

    As we saw in the previous example, when adding multiple themes targeting the same component at the same level, the last theme mixin takes precedence. This is due to the way the CSS cascade works. If you want to have two or more themes targeting the same type of component, you will have to scope them to a selector. For instance we can create multiple igx-avatar themes and scope them to specific CSS selectors we can later use in our component markup.

    // ...
// 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 파일을 특정 구성 요소에 바인딩하고 싶을 것입니다. 그러한 경우 뷰 캡슐화와 특히 Angular에서 에뮬레이션하는 방법을 고려해야 합니다.

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

    What exactly does Emulated View Encapsulation mean, anyway? This type of View Encapsulation does not take advantage of the Shadow DOM specification, instead it employs a way to bind styles for a component and its children by using a unique attribute identifier applied on the host element.

    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);
}

    When using CSS variables, we don't have to use the ::ng-deep pseudo-selector. With the code above we've created CSS variables for the igx-avatar, which will always have royalblue as its background color. The theme for our custom avatar will not 'leak' into other igx-avatar component instances, thus staying encapsulated within our custom app-avatar component.

    The above instance could also be achieved without using any Sass. All we need to do is to set the value of --igx-avatar-background CSS variable to the desired color:

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

    API Overview

    Additional Resources

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

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