글로벌 테마
개요
애플리케이션 프로젝트에 igniteui-angular.css 파일을 포함했다면 이제 이를 제거할 때입니다. 우리는 자체 my-app-theme.scss 파일을 사용하여 애플리케이션의 모든 구성 요소에 대한 전역 테마를 생성할 것입니다.
Ignite UI for Angular 기본적으로 전역 테마를 사용하여 전체 구성 요소 제품군의 테마를 지정합니다. 그러나 사용 사례에 따라 앱에 있는 구성 요소로 범위가 지정된 테마를 만들 수 있습니다. 지금은 모든 테마를 하나의 파일에 포함하겠습니다. 글로벌 테마를 생성하기 위해 우리는 두 개의 믹스인 core와 theme 포함할 것입니다. 두 믹스인 모두 몇 가지 인수를 허용합니다.
###핵심
| 이름 | 유형 | 기본 | 설명 |
|---|---|---|---|
$print-layout |
부울 | 진실 | 인쇄 스타일을 포함/제외합니다. |
$enhanced-accessibility |
부울 | 거짓 | 구성요소 색상 및 기타 속성을 더 접근하기 쉬운 값으로 전환합니다. |
###주제
| 이름 | 유형 | 기본 | 설명 |
|---|---|---|---|
$palette |
지도 | 없는 | 모든 컴포넌트의 기본 테마에 사용되는 팔레트 맵입니다. |
$schema |
지도 | $light-material-schema |
구성 요소 스타일을 지정하기 위한 기초로 사용되는 스키마입니다. |
$exclude |
목록 | () | 전역 테마에서 제외할 구성 요소 테마 목록입니다. |
$roundness |
숫자 | 1 | 모든 구성요소에 대한 전역 진원도 계수를 설정합니다(값은 0과 1 사이의 소수일 수 있음). |
$elevation |
부울 | true |
테마의 모든 구성요소에 대한 고도를 켜거나 끕니다. |
$elevations |
지도 | $material-elevations |
모든 구성 요소 테마에서 사용되는 고도 지도입니다. |
우리 회사의 기본 색상과 보조 색상을 사용하는 사용자 정의 글로벌 테마를 만들어 보겠습니다.
// 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';
$primary-color: #2ab759;
$secondary-color: #f96a88;
$my-color-palette: palette(
$primary: $primary-color,
$secondary: $secondary-color
);
// IMPORTANT: Make sure you always includecore first!
@include core();
// Add the typography styles before the main theme.
@include typography();
// Pass the color palette we generated to thetheme mixin.
@include theme($my-color-palette);
core 믹스인과 theme 믹스인의 기능을 설명하겠습니다. core 믹스인은 향상된 접근성(예: 색맹 사용자에게 적합한 색상) 추가 및 모든 구성 요소에 대한 인쇄 스타일과 같은 일부 구성을 처리합니다. theme 믹스인에는 각 개별 구성 요소 스타일(제외된 것으로 나열된 항목 제외)이 포함되어 있으며 $exclude 구성 요소 목록에 나열되지 않은 팔레트, 스키마, 높이 및 원형 정도를 구성합니다.
Important
theme 앞에 core과 typography 포함하는 것은 필수적입니다. core 및 typography 믹스인은 theme 믹스인이 올바르게 작동하는 데 필요한 모든 기본 정의를 제공합니다.
Excluding Components
theme 믹스인을 사용하면 전역 테마 스타일에서 제외할 구성 요소 이름 목록을 제공할 수 있습니다. 예를 들어 생성된 CSS 양을 줄이거나 사용자 정의 스타일을 제공하기 위해 igx-avatar 및 igx-badge에 포함된 모든 스타일을 완전히 제거하려는 경우 다음과 같이 구성 요소 목록을 전달하면 됩니다.
// ...
$unnecessary: (igx-avatar, igx-badge);
@include theme($my-color-palette, $exclude: $unnecessary);
귀하의 앱이 일부 구성 요소를 사용하지 않을 것임을 알고 있다면 해당 구성 요소를 $exclude 목록에 추가하는 것이 좋습니다.
반대의 경우도 있습니다. 즉, 아래 방법을 사용하여 원하는 구성 요소 스타일만 포함할 수 있습니다.
@use 'sass:map';
@function include($items, $register) {
@return map.keys(map.remove($register, $items...));
}
$allowed: (igx-avatar, igx-badge);
@include theme(
$exclude: include($allowed, $components)
);
Light and Dark Themes
보다 강력한 theme 믹스인 외에도 밝은 테마와 어두운 테마를 빠르게 부트스트래핑하기 위한 두 개의 추가 전역 테마 믹스인이 포함되어 있습니다. 해당 믹스인은 light-theme과 dark-theme 입니다.
다음은 애플리케이션에 대한 밝은 테마와 어두운 테마를 만드는 방법에 대한 간단한 쇼케이스입니다.
.light-theme {
@include light-theme($light-material-palette);
}
.dark-theme {
background: #333;
color: #fff;
@include dark-theme($light-material-palette);
}
이상적으로는 애플리케이션 DOM 트리의 상위 요소에.light-theme 또는.dark-theme 클래스를 설정합니다. app-root 요소가 이에 대한 좋은 후보입니다.
Available Themes
Ignite UI for Angular 사전 정의된 테마 세트에서 선택할 수 있는 옵션을 제공합니다. 아래 표에는 바로 사용할 수 있는 기본 제공 테마가 모두 나와 있습니다.
| 주제 | 믹스인 | 개요 | 색상 팔레트 | 버전에서 사용 가능 |
|---|---|---|---|---|
| 소재(베이스) | 주제() | $light-material-schema |
없는 | 모두 |
| 소재(가벼움) | 밝은 테마() | $light-material-schema |
$ 가벼운 재료 팔레트 | 6.2 + |
| 소재(어두움) | 어두운 테마() | $dark-material-schema |
$어두운 재료 팔레트 | 6.2 + |
| 유창한 | 유창한 조명 테마() | $light-fluent-schema |
$ 가벼운 유창 팔레트 $light-fluent-excel-팔레트 $light-fluent-단어 팔레트 |
8.2+ |
| 유창함 (어두움) | 유창한 어두운 테마() | $dark-fluent-schema |
$dark-fluent-팔레트 $dark-fluent-excel-팔레트 $dark-fluent-단어 팔레트 |
8.2+ |
| 부트스트랩 | 부트스트랩 조명 테마() | $light-bootstrap-schema |
$라이트-부트스트랩-팔레트 | 9.0 + |
| 부트스트랩(어두운) | 부트스트랩-어두운 테마() | $dark-bootstrap-schema |
$어두운-부트스트랩-팔레트 | 9.0 + |
| 남빛 | 남색 빛 테마() | $light-indigo-schema |
$라이트-인디고-팔레트 | 10.1 + |
| 인디고(다크) | 남색-어두운 테마() | $dark-indigo-schema |
$ 다크 인디고 팔레트 | 10.1 + |
Note
모든 상위 수준 테마 믹스인은 기본 theme 믹스인을 래핑합니다.
모든 테마 믹스인은 자신만의 테마를 만들기 위한 출발점으로 사용될 수 있습니다. bootstrap-light-theme 믹스인을 사용하여 새로운 테마를 만들어 보겠습니다.
// 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';
$primary-color: #b71053;
$secondary-color: #6c757d;
$my-color-palette: palette(
$primary: $primary-color,
$secondary: $secondary-color
);
// IMPORTANT: Make sure you always includecore first!
@include core();
// Pass the color palette we generated to thebootstrap-theme mixin
@include bootstrap-light-theme($my-color-palette);
Browser Support
Ignite UI for Angular 이전에는 $igx-legacy-support 값이 구성 요소 테마 작동 방식을 결정하므로 매우 중요합니다. 해당 값이 true로 설정되면 개별 구성 요소 스타일 규칙의 값은 빌드 시 테마에 정의된 하드 코딩된 값으로 설정됩니다. 그러나 $igx-legacy-support 값을 false로 설정하면 스타일 규칙은:root 범위 또는 가장 가까운 블록 범위에 정의된 CSS 변수에서 값을 찾습니다.
$legacy-support의 값에 관한 일반적인 경험 법칙은 Internet Explorer 11에 대한 지원을 포함할지 여부에 따라 결정됩니다. IE11에 대한 지원을 포함하려면 $legacy-support 값을 true로 설정하고, 그렇지 않으면 해당 값을 false (기본값)로 설정하면 테마에 CSS 변수가 적용됩니다. IE11 및 이전 브라우저에 대한 지원은 Ignite UI for Angular에서 제거되었습니다.
API Overview
Additional Resources
개별 구성 요소 테마를 만드는 방법을 알아보세요.
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub