테마

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

Note

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

Basic Usage

Ignite UI for Angular 패키지의 일부로 다음 테마가 포함되어 있습니다. - 재질 - 부트스트랩 - Fluent - Indigo

모든 테마에는 밝은 색상과 어두운 색상이 있으며 기본적으로 왼쪽에서 오른쪽(LTR) 및 오른쪽에서 왼쪽(RTL) 콘텐츠가 지원됩니다. 애플리케이션에서 번들 테마를 사용하기 시작하는 가장 쉬운 방법은 angular.json 구성에서 CSS 테마 파일의 경로를 지정하는 것입니다. 예를 들어 어두운 Material 테마를 사용하려면 다음과 같이 테마 파일의 경로를 포함해야 합니다.

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

Note

​ng add igniteui-angular 사용하여 Ignite UI for Angular 설치한 경우 스타일 배열에 igniteui-angular.css 이미 추가되었음을 알 수 있습니다.

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

테마 이름	길
머티리얼 라이트	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 제공합니다.

하지만 이것이 테마 이야기의 끝은 아닙니다. 모든 테마는 Sass 소스에서 컴파일되었으며 강력한 테마 엔진을 사용하여 구축되었습니다. 이 엔진에는 공개적으로 노출된 Sass mixins과 functions 포함되어 있어 애플리케이션의 모든 구성 요소를 완전히 다시 디자인할 수 있습니다.

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

Global Variables

위의 CSS 테마 중 하나를 살펴보면:root 범위에 꽤 많은 CSS 변수가 포함되어 있음을 알 수 있습니다. colors, shadows, typography 및 configuration에 대한 변수가 포함됩니다. 이러한 변수를 수정하면 테마와 구성 요소의 전체적인 모양과 느낌을 사용자 정의할 수 있습니다.

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

기본 색상과 보조 색상을 변경하려면 styles.css 파일에 다음을 입력하기만 하면 됩니다.

/* styles.css */
:root {
  --ig-primary-h: 105deg;
  --ig-primary-s: 29%;
  --ig-primary-l: 56%;

  --ig-secondary-h: 259deg;
  --ig-secondary-s: 63%;
  --ig-secondary-l: 24%;
}

이러한 색상 변수의 이름을 분석해 보겠습니다. ig 접두사는 이 변수가 Ignite UI for Angular의 일부임을 나타내는 고유 식별자로 존재하며, primary은 color 팔레트의 이름이고, h, s 및 l 색조, 채도 및 밝기를 나타냅니다. 설명서의 팔레트 섹션에서 팔레트에 대해 자세히 살펴보겠습니다. 지금 알아야 할 것은 색조, 채도 및 밝기 CSS 변수에서 생성된 다양한 음영 또는 변형을 포함하는 여러 기본 색상(기본, 보조, 성공, 정보 등)이 있다는 것입니다. 500 색상 변형은 색상, 채도, 밝기에 대한 주요 표현 값으로 간주됩니다. 예를 들어 기본 500--ig-primary-500: hsla(var(--ig-primary-h), var(--ig-primary-s), var(--ig-primary-l), var(--ig-primary-a)).

이 접근 방식을 따르면 전체 팔레트를 완전히 점검할 수 있습니다.

Warning

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

마찬가지로 elevations (그림자)를 변경하는 것도 마찬가지로 쉽습니다. 25개의 고도 수준(0-24)이 포함되어 있습니다. 다음은 해당 변수의 모양을 단순화한 버전입니다.

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

이는 본질적으로 누적된 CSS box-shadow 선언입니다. 이를 다른 유효한 box-shadow 값으로 바꿀 수 있습니다. 고도 수준 숫자가 높을수록 그림자가 더 커집니다. 다시 말하지만, 서로 다른 구성 요소는 서로 다른 고도 수준을 사용합니다. 어떤 구성 요소가 어떤 고도 수준을 사용하는지 알아보려면 구성 요소 문서를 살펴보세요. 문서의 고도에서 고도에 대해 자세히 살펴보겠습니다.

구성

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

진원도

모든 구성 요소의 반경 요소를 구성하려면--ig-radius-factor 변수의 값을 변경할 수 있습니다. 기본값은 1입니다. 즉, 기본 반경 요소가 구성 요소 테마 전체에 사용된다는 의미입니다.

본보기:

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

고도 계수

모든 구성요소의 고도 계수를 구성하려면--ig-elevation-factor 변수의 값을 변경할 수 있습니다. 기본값은 1입니다. 즉, 기본 고도가 구성 요소 테마 전체에 사용된다는 의미입니다.

본보기:

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

Component Variables

모든 구성 요소는 구성 요소별 CSS 변수를 사용하여 테마를 수정하는 기능을 제공합니다. 각 구성 요소는 동일한 속성을 수정하는 두 개의 변수를 노출합니다. 노출된 변수는 global 및 local로 생각할 수 있습니다. 둘 다 동일한 방식으로 구성 요소 테마를 수정합니다. 유일한 차이점은 global 변수에는 변수 이름에 igx-[component-name] 접두사가 첨부되어 있으며 상위 선택기에서 하위 구성 요소의 스타일을 지정하는 데 사용할 수 있다는 점입니다. 반면 local 변수는 특정합니다. 구성 요소 인스턴스에.

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

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

igx-avatar {
  --background: orange;
}

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

아바타 구성 요소는 다음을 찾습니다.--background 먼저 변수. 명시적으로 설정된 경우 해당 값을 사용합니다. 다시 말해서, local 변수의 우선순위가 더 높으며 작동합니다. 오직에 적용하면 igx-avatar 태그 선택기나 타겟팅하는 다른 선택기를 사용하여 직접 igx-avatar. 글로벌--igx-avatar-background로 생각될 수 있다 대체 변하기 쉬운. 로컬인 경우에만 사용됩니다.--background 명시적으로 재정의되지 않습니다.

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

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

아바타 AB와 CD 전역적으로 설정된 라벤더 색상을 배경으로 사용하고, 아바타 EF와 GH​ ​보라색 배경을 사용합니다.

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

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

Additional Resources

관련 주제:

• 팔레트
• 고도
• 타이포그래피
• Sass를 사용한 테마

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

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