테마

Ignite UI for Angular 에서는 CSS 변수를 사용하여 모든 구성 요소 테마의 스타일을 수정할 수 있습니다. 정말 깊이 파고들고 싶다면 모든 최신 브라우저에서 작동하는 특정 디자인 언어에 맞는 글로벌 구성 요소 테마를 만들 수 있는 강력한 Sass 테마 엔진을 제공합니다.

메모

이 문서에서는 버전 12부터 Ignite UI for Angular 테마 시스템에 대해 설명합니다. 버전 12부터 CSS 변수는 전역 및 구성 요소 테마를 수정하는 데 권장되는 방법입니다. 버전 12 이전과 마찬가지로 Sass 테마 라이브러리를 계속 사용할 수 있습니다.

기본 사용법

Ignite UI for Angular 에는 패키지의 일부로 다음 테마가 포함되어 있습니다.

재료
부트스트랩
유창한
남빛

All themes have light and dark variants as well as support for left-to-right(LTR) and right-to-left(RTL) content by default. The easiest way to start using any of the bundled themes in your application is by specifying the path to a CSS theme file in your angular.json configuration. For example, if you wanted to use the dark Material theme, you would include the path to the theme file like so:

"styles": [
  "node_modules/igniteui-angular/styles/igniteui-angular-dark.css",
  "src/styles.css"
]

메모

If you've installed the Ignite UI for Angular package using ng add igniteui-angular, you will have noticed that we've already added igniteui-angular.css to the styles array.

스타일 폴더에 포함된 테마의 전체 목록은 다음과 같습니다.

테마 이름	길
머티리얼 라이트	`node_modules/igniteui-angular/styles/igniteui-angular.css`
어두운 소재	`node_modules/igniteui-angular/styles/igniteui-angular-dark.css`
부트스트랩 라이트	`node_modules/igniteui-angular/styles/igniteui-bootstrap-light.css`
부트스트랩 다크	`node_modules/igniteui-angular/styles/igniteui-bootstrap-dark.css`
소재 짙은 녹색	`node_modules/igniteui-angular/styles/igniteui-dark-green.css`
유창한 빛	`node_modules/igniteui-angular/styles/igniteui-fluent-light.css`
유창한 다크	`node_modules/igniteui-angular/styles/igniteui-fluent-dark.css`
유창한 라이트 엑셀	`node_modules/igniteui-angular/styles/igniteui-fluent-light-excel.css`
유창한 다크 엑셀	`node_modules/igniteui-angular/styles/igniteui-fluent-dark-excel.css`
유창한 가벼운 말씀	`node_modules/igniteui-angular/styles/igniteui-fluent-light-word.css`
유창한 어둠의 말씀	`node_modules/igniteui-angular/styles/igniteui-fluent-dark-word.css`
인디고 라이트	`node_modules/igniteui-angular/styles/igniteui-indigo-light.css`
인디고 다크	`node_modules/igniteui-angular/styles/igniteui-indigo-dark.css`

보시다시피, 우리는 상당한 양의 테마로 Ignite UI for Angular 배송합니다.

This is not the end of our theming story, though. All themes are compiled from Sass source and are built using our powerful theming engine. This engine contains Sass mixins and functions many of which are publicly exposed, which allows you to completely redesign all components in your application.

Sass가 마음에 들지 않는 경우에도 맞춤 CSS 속성 또는 CSS 변수를 사용하여 컴파일된 테마를 쉽게 수정할 수 있도록 했습니다. CSS 변수와 함께 Sass를 계속 사용할 수 있습니다.

전역 변수

If you inspect any of the CSS themes above, you will notice that there are quite a few CSS variables included in the :root scope; We include variables for colors, shadows, typography, and configuration. Modifying any of these variables will allow you to customize the overall look and feel of the theme and conversely the components.

테마를 수정할 때 대부분의 사람들이 찾는 것은 구성 요소에서 사용되는 기본 색상을 변경하는 것입니다.

If you wanted to change the primary and secondary colors, all you have to do is type the following in your styles.css file:

/* styles.css */
:root {
  --ig-primary-500: #09f;
  --ig-secondary-500: red;
  --ig-surface-500: rgb(221 211 211);
}

Let's break down the names of these color variables. The ig prefix is there as a unique identifier to indicate that this variable is part of an Ignite UI for Angular theme, primary is the color variable name, and 500 stands for the color variant. We will take a deeper look at palettes in the Palettes section of the documentation. For now all you need to know is that we have several base color variables (primary, secondary, surface, success, info, etc.) that include different shades or variants that are all generated from the main color variants. The 500 color variants that we set in the above example are considered the main variable color and all of the other variants for the given color variable are generated from the 500 variant.

이러한 변형을 변경하면 전체 팔레트를 완전히 점검할 수 있습니다.

경고

일부 구성 요소는 팔레트의 색상을 사용하지 않습니다. 이러한 경우 구성 요소 CSS 변수를 직접 대상으로 지정하여 색상을 수정해야 합니다. 어떤 구성 요소에서 어떤 팔레트 색상이 사용되는지 확인하려면 구성 요소 설명서를 살펴보세요.

Likewise, changing the elevations(shadows) is just as easy. We include 25 elevation levels (0-24). Here's a simplified version of what those variables look like:

/* styles.css */
:root {
  --ig-elevation-0: none;
  --ig-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.26),
                    0 1px 1px 0 rgba(0, 0, 0, 0.12),
                    0 2px 1px -1px rgba(0, 0, 0, 0.08);
  /* ... */
  --ig-elevation-24: 0 11px 15px -7px rgba(0, 0, 0, 0.26),
                  0 24px 38px 3px rgba(0, 0, 0, 0.12),
                  0 9px 46px 8px rgba(0, 0, 0, 0.08);
}

These are essentially stacked CSS box-shadow declarations. You can replace them with any other valid box-shadow value. The higher the elevation level number is, the bigger the shadow is. Again, different components use different elevation levels, to find out which elevation levels are used by which component, take look at the Components Documentation. We will take a deeper look at elevations in the Elevations of the documentation.

구성

테마의 전역 동작을 구성할 수 있는 여러 변수가 있습니다.

진원도

To configure the radius factor of all components you can change the value of the --ig-radius-factor variable. The default value is 1, meaning the default radius factor is used across component themes.

본보기:

/* Makes all components appear blocky in shape */
:root {
  --ig-radius-factor: 0;
}

고도 계수

To configure the elevation factor of all components you can change the value of the --ig-elevation-factor variable. The default value is 1, meaning the default elevations are used across component themes.

본보기:

/* Makes all components appear flat (no-shadows) */
:root {
  --ig-elevation-factor: 0;
}

구성 요소 변수

All components provide the ability to modify their themes using component-specific CSS variables. Each component exposes two variables that modify the same property. The exposed variables can be thought of as global and local. They both modify the component theme in the same way, the only difference is that global variables have the igx-[component-name] prefix attached to the variable name and can be used from parent selectors to style child components, while local variables are specific to a component instance.

예를 살펴보겠습니다. 아바타의 배경을 수정하고 싶다고 가정해 보겠습니다. 아바타는 배경을 수정하는 다음 CSS 변수를 찾습니다.

/* styles.css */
:root {
  --igx-avatar-background: black;
}

igx-avatar {
  --background: orange;
}

위의 스니펫은 모든 아바타의 배경을 주황색으로 설정합니다.

The avatar component will look for the --background variable first. If explicitly set, it will take its value. In other words, local variables have higher priority and will work only if applied to the igx-avatar directly, either by using its tag selector or any other selector that targets igx-avatar. The global --igx-avatar-background can be thought of as fallback variable. It's going to be used only if the local --background is not explicitly overridden.

궁금하신 분들을 위해 이것이 아바타 내부적으로 구현되는 방법은 다음과 같습니다.

igx-avatar {
  --background: var(--igx-avatar-background, var(--ig-gray-400));
  background: var(--background);
}

로컬 변수는 특정 구성 요소 인스턴스를 대상으로 하며 항상 전역 변수를 재정의하는 반면 구성 요소의 모든 인스턴스에 변경 사항을 적용하려는 경우 일반적으로 전역 변수를 사용합니다.

또 다른 예는 다음과 같습니다.

<!-- app.component.html -->
<igx-avatar>AB</igx-avatar>
<igx-avatar>CD</igx-avatar>
<app-contacts></app-contacts>

<!-- contacts.component.html -->
<igx-avatar>EF</igx-avatar>
<igx-avatar>GH</igx-avatar>

/* styles.css */
:root {
  --igx-avatar-background: lavender;
}

/* contacts.component.css */
igx-avatar {
  --background: purple;
}

Avatars AB and CD will use the globally set lavender color as background, while avatars EF and GH will have purple backgrounds.

각 구성 요소에는 구성 요소 설명서의 스타일 지정 섹션에 문서화된 모든 테마 속성이 있습니다.

이것이 테마 설정을 시작하는 데 필요한 전부입니다. 전역 및 로컬 구성 요소 테마를 생성하여 전역 팔레트 색상, 입면도를 수정하고 구성 요소 테마 속성을 변경할 수 있습니다. 더 자세히 알고 싶으시다면 팔레트, 고도, 타이포그래피, Sass를 사용한 테마 설정과 같은 주제를 심도 있게 다루는 광범위한 문서가 있습니다.

테마

메모

기본 사용법

메모

전역 변수

경고

구성

진원도

고도 계수

구성 요소 변수

추가 리소스

테마