테마

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

Note

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

Basic Usage

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

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

모든 테마는 밝은 색과 어두운 색 변형을 제공하며, 기본적으로 왼쪽에서 오른쪽(LTR) 및 오른쪽에서 왼쪽(RTL) 콘텐츠를 지원합니다. 애플리케이션에서 번들로 제공되는 테마를 사용하기 가장 쉬운 방법은 구성에서angular.json CSS 테마 파일의 경로를 지정하는 것입니다. 예를 들어, 다크 머티리얼 테마를 사용하고 싶다면, 다음과 같이 테마 파일 경로가 포함되어야 합니다:

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

Note

Ignite UI for Angular 패키지ng add igniteui-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 많은 Sassfunctions가 공개되어 애플리케이션 내 모든 구성 요소를 완전히 재설계할 수 있습니다.

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

Global Variables

위의 CSS 테마 중 어느 하나라도 살펴보면, 범위에:root 꽤 많은 CSS 변수가 포함되어 있음을 알 수 있습니다; 변수들도colors 포함하며,shadows,typography​configuration이 변수들 중 하나를 수정하면 테마의 전체적인 느낌과 구성 요소를 커스터마이즈할 수 있습니다.

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

원색과 보조색을 바꾸고 싶다면, 파일에 다음과styles.css 같은 입력만 입력하면 됩니다:

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

이 색상 변수들의 이름을 세분화해 보겠습니다. 접두사는ig이 변수가 Ignite UI for Angular 테마의 일부임을 나타내는 고유 식별자이며,primary 색상 변수 이름500 이고 색상 변형을 나타냅니다. 문서의 팔레트 섹션에서 팔레트에 대해 더 깊이 살펴보겠습니다. 지금은 여러 기본 색상 변수(primary, secondary, surface, success, info 등)가 있으며, 이들은 모두 주요 색상 변형에서 생성된 다양한 음영이나 변형을 포함하고 있습니다.500 위 예시에서 설정한 색상 변형들은 주요 변수 색상으로 간주되며, 주어진 색상 변수의 다른 모든 변형은 이500 변형에서 생성됩니다.

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

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

이들은 본질적으로 스택된 CSSbox-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 포럼
• ​GitHub Ignite UI for Angular