글로벌 테마
개요
지원 프로젝트에 해당 파일을 포함igniteui-angular.css 했다면, 지금이 삭제하기에 좋은 시기입니다. 저희는 자체my-app-theme.scss 파일을 사용해 애플리케이션 내 모든 컴포넌트에 대한 글로벌 테마를 생성할 예정입니다.
Ignite UI for Angular 기본적으로 전체 구성 요소 세트를 테마화하기 위해 전역 테마를 사용합니다. 하지만 사용 사례에 따라 앱 내 구성 요소에 맞게 테마를 생성할 수 있습니다. 지금은 모든 테마를 하나의 파일에 포함할 예정입니다. 글로벌 테마를 만들기 위해 두 개의 믹싱core 앤theme 드를 포함할 예정입니다. 이 두 믹싱 모두 몇 가지 논증을 받아들입니다:
Core mixin
| 이름 | 유형 | 기본 | 설명 |
|---|---|---|---|
$print-layout |
부울 | 진실 | 인쇄 스타일을 포함/제외합니다. |
$enhanced-accessibility |
부울 | 거짓 | 구성요소 색상 및 기타 속성을 더 접근하기 쉬운 값으로 전환합니다. |
Theme mixins
| 이름 | 유형 | 기본 | 설명 |
|---|---|---|---|
$palette |
지도 | null |
모든 컴포넌트의 기본 테마에 사용되는 팔레트 맵입니다. |
$schema |
지도 | $light-material-schema |
구성 요소 스타일을 지정하기 위한 기초로 사용되는 스키마입니다. |
$exclude |
목록 | () |
전역 테마에서 제외할 구성 요소 테마 목록입니다. |
$roundness |
숫자 | null |
모든 구성요소에 대한 전역 진원도 계수를 설정합니다(값은 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;
$surface-color: #fff;
$my-color-palette: palette(
$primary: $primary-color,
$secondary: $secondary-color,
$surface: $surface-color
);
// IMPORTANT: Make sure you always include core first!
@include core();
@include typography();
// Pass the color palette we generated to the theme mixin.
@include theme($my-color-palette);
그리고core 믹신이theme 무엇을 하는지 설명해 봅시다. 믹스인은core 색맹 사용자에게 적합한 색상 등 향상된 접근성 추가나 모든 구성 요소의 인쇄 스타일 등 일부 구성을 처리합니다. 믹스인은theme 각 개별 컴포넌트 스타일(제외된 것 제외)을 포함하며, 컴포넌트 목록에 없는$exclude 팔레트, 스키마, 고도, 둥근 형태를 구성합니다.
Important
이전core도 포함하는theme 것이 필수적입니다. 믹신은core 믹신이theme 올바르게 작동하기 위해 필요한 모든 기본 정의를 제공합니다.
Excluding Components
믹스인은theme 글로벌 테마 스타일에서 제외할 컴포넌트 이름 목록을 제공할 수 있게 해줍니다. 예를 들어, 포함된igx-avatar 모든 스타일을 완전히 제거하고igx-badge 생성되는 CSS 양을 줄이거나 자신만의 커스텀 스타일을 제공하고 싶다면, 다음과 같은 구성 요소 목록을 전달하여 할 수 있습니다:
// ...
$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
또한 Material, Fluent, Indigo, Bootstrap의 네 가지 테마에 대한 밝은 버전과 어두운 버전을 제공합니다.
어떤 버전을 사용하려면, 테마 믹스인에 전달하기만 하면 됩니다.
광
@include core();
@include typography(
$font-family: $material-typeface,
$type-scale: $material-type-scale
);
@include theme(
$schema: $light-material-schema,
$palette: $light-material-palette,
);
* 어둡다_
@include core();
@include typography(
$font-family: $material-typeface,
$type-scale: $material-type-scale
);
@include theme(
$schema: $dark-material-schema,
$palette: $dark-material-palette,
);
Available Themes
Ignite UI for Angular 에서는 미리 정의된 테마 세트에서 선택할 수 있는 옵션을 제공합니다. 아래 표에는 바로 사용할 수 있는 모든 기본 제공 테마가 나와 있습니다.
| 주제 | 개요 | 색상 팔레트 |
|---|---|---|
| 재질 : 조명 | $light-material-schema |
$ 가벼운 재료 팔레트 |
| 재질 : Dark | $dark-material-schema |
$어두운 재료 팔레트 |
| 플루언트 라이트 | $light-fluent-schema |
$ 가벼운 유창 팔레트 $light-fluent-excel-팔레트 $light-fluent-단어 팔레트 |
| 유창한 다크 | $dark-fluent-schema |
$dark-fluent-팔레트 $dark-fluent-excel-팔레트 $dark-fluent-단어 팔레트 |
| 부트스트랩 라이트 | $light-bootstrap-schema |
$라이트-부트스트랩-팔레트 |
| 부트 스트랩 다크 | $dark-bootstrap-schema |
$어두운-부트스트랩-팔레트 |
| 인디고 라이트 | $light-indigo-schema |
$라이트-인디고-팔레트 |
| 인디고 다크 | $dark-indigo-schema |
$ 다크 인디고 팔레트 |
Additional Resources
개별 구성 요소 테마를 만드는 방법을 알아보세요.
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub