Angular Material Theming
Ignite UI for Angular 하면 Angular Material 라이브러리와 같은 다른 테마 라이브러리에서 가져온 외부 구성 요소와 함께 사용하기가 쉽습니다.
Ignite UI and Angular Material Overview
Angular Material은 모바일 및 데스크톱 Angular 웹 애플리케이션을 위한 UI 구성 요소 라이브러리입니다. 여기에는 여러 개의 사전 빌드된 테마와 Material Design specification 기반으로 하는 많은 수의 구성 요소가 포함됩니다.
이 Ignite UI for Angular는 머티리얼 기반 UI 위젯, 컴포넌트 및 Sketch UI 키트의 완전한 세트이며, 개발자가 최신 고성능 앱을 구축할 수 있도록 하는 Angular 용 지원 지시문입니다. 우리의 테마 엔진은 사용하기 쉽고 단일 구성 요소, 여러 구성 요소 또는 전체 제품군에서 다양한 수준에서 테마 세분성을 허용합니다. 또한 매우 적은 노력으로 다른 테마 라이브러리의 구성 요소의 스타일을 지정하는 데 사용할 수 있습니다.
다음 문서에서는 Ignite UI와 Angular Material 구성 요소를 하나의 애플리케이션에서 사용하는 방법과 두 구성 요소를 비슷하게 보이도록 스타일을 지정하는 방법을 보여줍니다.
Angular Material Theming Example
Getting Started with Ignite UI and Angular Material
How to install Angular Material
Angular CLI를 사용하고 기존 Angular 프로젝트가 있는 경우 아래 명령을 사용하여 Angular Material을 추가할 수 있습니다.
ng add @angular/material
그런 다음, 미리 빌드된 테마 중 하나를 선택하고 Angular Material에 대한 글로벌 타이포그래피 스타일과 브라우저 애니메이션을 설정할지 여부를 선택해야 합니다. 이 구성을 마치면 애플리케이션에서 Angular Material 구성 요소를 사용할 준비가 됩니다.
Angular Material 라이브러리 사용에 관한 자세한 내용은 official documentation에서 확인할 수 있습니다.
How to install Ignite UI for Angular
모든 종속성, 글꼴 가져오기, 스타일 참조와 함께 Ignite UI for Angular 패키지를 설치하려면 프로젝트에서 다음 명령을 실행하세요.
ng add igniteui-angular
그런 다음 app.module.ts 파일에 해당 모듈을 가져와서 Ignite UI 구성 요소를 사용할 수 있습니다.
// manually addition of the Igx Avatar component
import { IgxAvatarModule } from 'igniteui-angular';
// import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...,
IgxAvatarModule,
...
]
)}
기존 프로젝트에서 Ignite UI for Angular 사용하는 방법에 대한 전체 소개는 Getting Started 토픽을 참조하세요. 각 구성 요소를 가져오고 사용하는 방법에 대한 자세한 정보와 가이드 예제는 구성 요소의 설명서에서 찾을 수 있습니다.
Ignite UI and Angular Material components
데모 샘플이 어떻게 만들어졌는지 살펴보겠습니다. Ignite UI와 Angular Material 구성 요소를 혼합하여 하나의 애플리케이션에 잘 어울리도록 스타일을 지정했습니다. 예제의 탐색은 mat-toolbar material과 igx-buttons, igx-avatar 함께 사용하여 만들었습니다. Campaigns 버튼 아래의 menu도 Angular Material 라이브러리에서 가져왔습니다. 탐색 아래에서 igx-card 구성 요소를 사용하여 일부 통계를 표시합니다. 카드 내부에는 igx-avatars, igx-icons, 그리고 material buttons 등 여러 항목을 배치했습니다.
More 버튼을 클릭하면 igx-dialog 표시됩니다.
다음으로 일부 신용 카드에 대한 정보를 표시하는 igx-expansion-panel 추가했습니다. 콘텐츠 내부에는 mat-sliders, igx-divider 및 mat-form-fields가 포함된 mat-stepper가 있습니다.
마지막으로 Ignite UI for Angular 삽입했습니다. icon button 오른쪽 상단 모서리에 있는 버튼을 클릭하면 앱 전체의 테마가 변경됩니다.
Styling Angular Components
Ignite UI 테마 엔진을 사용하여 구성 요소 스타일링을 시작하려면 글로벌 테마의 기본 파일이 될 원하는 이름의 scss 파일을 만듭니다. 이 파일을_variables.scss 라고 합니다. 다음으로 Ignite UI 및 Angular Material index 파일을 가져와야 합니다.
// _variables.scss
```scss
@use "igniteui-angular/theming" as *;
@use "@angular/material" as mat;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Color Palettes
palette Ignite UI for Angular의 기능은 에 secondary primary 대한 3개의 하위 팔레트와 음영, , gray 및 surface에 대한 warn info success error 5개의 추가 색상을 포함하는 색상 팔레트 맵을 생성합니다. 각 색상 변형에 대해 테마 엔진은 런타임에 텍스트 대비 색상을 자동으로 생성하며, 이는 팔레트에도 포함됩니다. 아래에서 미리 정의된 조명 재질 팔레트를 볼 수 있습니다.
$igx-light-palette: palette(
$primary: #09f,
$secondary: #e41c77
$info: #1377d5,
$success: #4eb862,
$warn: #fbb13c,
$error: #ff134a,
$gray: #000,
$surface: #fff
);
Ignite UI 팔레트와 달리 Angular Material 색상 팔레트 맵에는 한 가지 색상에 대한 음영과 해당 대비 색상이 포함됩니다. 예를 들어 $mat-purple 팔레트를 볼 수 있습니다.
$light-primary-text: white;
$dark-primary-text: rgba(black, 0.87);
$mat-purple: (
50: #f3e5f5,
100: #e1bee7,
...,
A700: #aa00ff,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
...,
A700: $light-primary-text,
)
);
Generating Theme Palettes
테마 팔레트를 정의하려면 색조에서 색상으로의 맵을 생성하는 material define-palette 함수를 사용해야 합니다. 샘플에서는 Ignite UI 테마로 Angular Material 구성 요소를 스타일링하려고 하므로 $light-material-palette 구조에 따라 변환해야 합니다.
이를 달성하기 위해 모든 색상 변형과 대비 색상의 맵을 반환하는 $color, $saturations 및 $palette에 대한 매개 변수를 사용하여 Sass 함수를 만들 것입니다. 우리가 사용하는 채도는 Material Design color system 따릅니다.
$saturations: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700);
@function material-like-palette(
$color,
$saturations,
$palette,
) {
$shade: ();
$contrast: ();
$result: ();
@each $saturation in $saturations {
$shade: map-merge($shade, (
$saturation: color($palette, $color, $saturation)
));
$contrast: map-merge($contrast, (
$saturation: color($palette, $color, #{$saturation}-contrast)
));
$result: map-merge($shade, (contrast: $contrast));
}
@return $result;
}
Light Theme Palette
Ignite UI $igx-light-palette의 primary 색상과 새로 만든 material-like-palette 함수를 사용하여 밝은 기본 소재 테마 팔레트를 정의합니다. 결과는 define-palette 함수에 매개변수로 전달해야 하며, 이 함수는 default, lighter, darker 및 text 셰이드에 대한 색상 값을 생성하여 팔레트 맵에 추가합니다.
$light-palette-primary: mat.define-palette(
material-like-palette('primary', $saturations, $igx-light-palette));
밝은 액센트 팔레트에 대해서도 동일한 작업을 수행해 보겠습니다.
$light-palette-accent: mat.define-palette(
material-like-palette('secondary', $saturations, $igx-light-palette));
마지막으로 두 가지 색상 팔레트를 define-light-theme 함수에 전달할 준비가 되었습니다. 이 함수는 Ignite UI 머티리얼 색상 팔레트에서 가져온 색상으로 Angular Material 테마를 생성합니다.
$custom-mat-light-theme: mat.define-light-theme((
color: (
primary: $light-palette-primary,
accent: $light-palette-accent
)
));
Note
Ignite UI for Angular에서 제공하는 팔레트에 대해 자세히 알아보고 새로운 팔레트를 만드는 방법을 알아보려면 palettes with Sass 섹션을 방문하세요.
Dark Theme Palette
이전 접근 방식에 따라 다크 모드용 재질 팔레트를 만들 예정입니다. 이번에는 사용자 정의 igx-palette도 정의하겠습니다.
// Custom palette
$custom-dark-palette: palette(
$primary: #206094,
$secondary: #72da67,
$surface: #222,
$info: #1377d5,
$success: #4eb862,
$warn: #fbb13c,
$error: #ff134a,
);
// Material dark primary palette
$dark-palette-primary: mat.define-palette(
material-like-palette('primary', $saturations, $custom-dark-palette));
// Material dark accent palette
$dark-palette-accent: mat.define-palette(
material-like-palette('secondary', $saturations, $custom-dark-palette));
// Material dark theme
$custom-mat-dark-theme: mat.define-dark-theme((
color: (
primary: $dark-palette-primary,
accent: $dark-palette-accent
)
));
Themes
light 모드와 dark 모드 사이를 전환하기 위해 버튼 클릭 시 변경되는 사용자 정의 dark 클래스를 추가하고 있습니다. 스타일시트 파일에는 각 클래스에 적용되는 다양한 색상 팔레트가 포함됩니다.
Ignite UI for Angular Material Design에서 영감을 받은 사전 정의된 테마가 제공됩니다. 이를 사용하려면 먼저 core 믹스인을 포함하고 그 다음에 기본 제공 테마 믹스인 theme을 포함해야 합니다. 또한 사전 정의된 Material 팔레트인 $light-material-palette와 $dark-material-palette도 사용할 것입니다.
Angular Material 구성 요소의 경우에도 core 믹스인을 포함해야 하고, 그 다음에 앞서 언급한 사용자 정의 Material 테마와 함께 all-component-themes 믹스인을 포함해야 합니다.
// Make sure you always include the core mixin first
@include core();
::ng-deep {
@include mat.core();
@include theme($igx-light-palette);
@include mat.all-component-themes($custom-mat-light-theme);
.dark {
@include dark-theme($custom-dark-palette);
@include mat.all-component-themes($custom-mat-dark-theme);
}
}
Warning
위의 코드를 안에 넣어주세요.::ng-deep 선택기 penetrate 그만큼 Emulated ViewEncapsulation.
Light Mode
색상 팔레트와 테마 구성이 완료되면 구성 요소에 몇 가지 추가 색상 변경을 수행할 수 있습니다. 응용 프로그램의 배경색은 호스트 요소에서 명시적으로 설정해야 합니다. 이 샘플에서는 전달된 색상표의 색을 surface 사용하려고 합니다. 로고는 SVG 이미지이므로 CSS를 사용하여 색상을 쉽게 변경할 수 있습니다. 또한 앱에 더 잘 맞도록 구성 요소의 secondary 일부 색상을 mat-slider 변경합니다.
:host {
&.light {
// The background color of the application in light mode
background: color($igx-light-palette, 'surface');
// The application logo fill color
#Path1 {
fill: color($igx-light-palette, 'secondary');
}
// The application logo stroke color
#Path2 {
stroke: color($igx-light-palette, 'secondary');
stroke-width: "0.8";
}
}
// Update material slider component colors for both light and dark mode
.mat-mdc-slider.secondary .mdc-slider__track--inactive,
.mat-mdc-slider.secondary .mdc-slider__thumb-knob {
background-color: color($custom-mat-light-theme, 'secondary');
}
.mat-mdc-slider.secondary .mdc-slider__track--active_fill,
.mat-mdc-slider.secondary .mdc-slider__thumb-knob {
border-color: color($custom-mat-light-theme, 'secondary');
}
.mat-mdc-slider.secondary .mat-mdc-slider-visual-thumb .mat-ripple > * {
background-color: color($custom-mat-light-theme, 'secondary');
opacity: .12;
}
}
Dark Mode
어두운 변형의 경우 동일한 CSS 스타일을 적용하지만 사용합니다 $custom-dark-palette. 또한 구성 요소의 일부 색상을 업데이트합니다 mat-stepper.
:host {
&.dark {
// The background color of the application in dark mode
background: color($custom-dark-palette, 'surface');
// The application logo fill color
#Path1 {
fill: color($custom-dark-palette, 'secondary');
}
// The application logo stroke color
#Path2 {
stroke: color($custom-dark-palette, 'secondary');
stroke-width: "0.8";
}
::ng-deep {
// The background of the selected step icon inside the material stepper
.mat-step-header .mat-step-icon-selected {
background-color: color($custom-dark-palette, 'secondary');
}
// The background of the material stepper
.mat-stepper-horizontal {
background: color($custom-dark-palette, 'surface');
}
}
}
}
Generate class
Angular Material toolbar 배경색에 CSS 클래스를 사용합니다. 샘플에서는 선택한 테마에 따라 색상을 변경하고자 하므로 color-classes 믹스인을 사용합니다. 이 믹스인은 주어진 속성과 색상 팔레트에 대한 모든 색상에 대한 CSS 클래스 이름을 생성하며, 클래스 이름에 선택적으로 접두사와 접미사를 붙입니다. 데모에서는 믹스인을 두 번 포함합니다. 첫 번째는 해당 $igx-light-palette 첫 번째 값으로 사용하는 밝은 모드이고, 두 번째는 $custom-dark-palette 사용하는 어두운 모드입니다.
:host {
&.light {
@include color-classes(
$palette: $igx-light-palette,
$prop: 'background',
$prefix: 'bg'
);
}
&.dark {
@include color-classes(
$palette: $custom-dark-palette,
$prop: "background",
$prefix: "bg"
);
}
}
그런 다음 "bg - 팔레트의 색상 - 색상 변형" 패턴에 따라 navbar 구성 요소에 CSS 클래스를 추가합니다. 샘플 앱에서는 bg-gray-100 사용하고 있습니다.
Angular Components Typography
Ignite UI for Angular 각 테마에 대해 4개의 기본 글꼴 크기를 노출하는데, 이는 애플리케이션의 글로벌 글꼴 스타일을 정의하기 위해 typography 믹스인 내부에서 사용할 수 있습니다. 이 예에서는 미리 정의된 typeface과 type-scale 적용하지만 원하는 경우 사용자 정의 글꼴과 글꼴 크기를 만들 수 있습니다.
:host {
@include typography($font-family: $material-typeface, $type-scale: $material-type-scale);
}
Angular Material 타이포그래피를 사용자 지정하려면 define-typography-config 함수를 사용해야 합니다. 다음과 같이 $font-family를 Ignite UI $material-typeface와 $button 스타일로 재정의합니다.
$custom-typography: mat.define-typography-config(
$font-family: $material-typeface,
$button: mat.define-typography-level(14px, $font-weight: 600)
);
그런 다음 타이포그래피 구성을 mixin에 전달해야 합니다 define-light-theme.
$custom-mat-light-theme: mat.define-light-theme((
color: (
primary: $light-palette-primary,
accent: $light-palette-accent
),
typography: $custom-typography
));
자세한 내용은 Angular Material Typography documentation 확인하세요.
API References
관련 주제:
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub