Angular Material Theming

    Ignite UI for Angular 하면 Angular Material 라이브러리와 같은 다른 테마 라이브러리에서 가져온 외부 구성 요소와 함께 사용하기가 쉽습니다.

    Ignite UI 및 Angular Material 개요

    Angular Material은 모바일 및 데스크톱 Angular 웹 애플리케이션을 위한 UI 구성 요소 라이브러리입니다. 여기에는 여러 개의 사전 빌드된 테마와 Material Design specification 기반으로 하는 많은 수의 구성 요소가 포함됩니다.

    이 Ignite UI for Angular는 머티리얼 기반 UI 위젯, 컴포넌트 및 Sketch UI 키트의 완전한 세트이며, 개발자가 최신 고성능 앱을 구축할 수 있도록 하는 Angular 용 지원 지시문입니다. 우리의 테마 엔진은 사용하기 쉽고 단일 구성 요소, 여러 구성 요소 또는 전체 제품군에서 다양한 수준에서 테마 세분성을 허용합니다. 또한 매우 적은 노력으로 다른 테마 라이브러리의 구성 요소의 스타일을 지정하는 데 사용할 수 있습니다.

    다음 문서에서는 Ignite UI와 Angular Material 구성 요소를 하나의 애플리케이션에서 사용하는 방법과 두 구성 요소를 비슷하게 보이도록 스타일을 지정하는 방법을 보여줍니다.

    Angular Material 테마 예제

    EXAMPLE
    TS
    HTML
    SCSS

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    Ignite UI 및 Angular Material 시작하기

    Angular Material을 설치하는 방법

    Angular CLI를 사용하고 기존 Angular 프로젝트가 있는 경우 아래 명령을 사용하여 Angular Material을 추가할 수 있습니다.

    ng add @angular/material
    cmd

    그런 다음, 미리 빌드된 테마 중 하나를 선택하고 Angular Material에 대한 글로벌 타이포그래피 스타일과 브라우저 애니메이션을 설정할지 여부를 선택해야 합니다. 이 구성을 마치면 애플리케이션에서 Angular Material 구성 요소를 사용할 준비가 됩니다.

    Angular Material 라이브러리 사용에 관한 자세한 내용은 official documentation에서 확인할 수 있습니다.

    Ignite UI for Angular 설치하는 방법

    모든 종속성, 글꼴 가져오기, 스타일 참조와 함께 Ignite UI for Angular 패키지를 설치하려면 프로젝트에서 다음 명령을 실행하세요.

    ng add igniteui-angular
    cmd

    그런 다음 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,
            ...
        ]
    )}
    ts

    기존 프로젝트에서 Ignite UI for Angular 사용하는 방법에 대한 전체 소개는 Getting Started 토픽을 참조하세요. 각 구성 요소를 가져오고 사용하는 방법에 대한 자세한 정보와 가이드 예제는 구성 요소의 설명서에서 찾을 수 있습니다.

    Ignite UI 및 Angular Material 구성 요소

    데모 샘플이 어떻게 만들어졌는지 살펴보겠습니다. 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-dividermat-form-fields가 포함된 mat-stepper가 있습니다.

    마지막으로 Ignite UI for Angular 삽입했습니다. icon button 오른쪽 상단 모서리에 있는 버튼을 클릭하면 앱 전체의 테마가 변경됩니다.

    App Builder | CTA 배너

    Angular 컴포넌트 스타일링

    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';
    scss

    색상 팔레트

    Ignite UI for Angular igx-palette 함수는 primary, secondarygray 음영에 대한 세 개의 하위 팔레트와 info, success, warn, errorsurface 대한 다섯 가지 추가 색상을 포함하는 색상 팔레트 맵을 생성합니다. 각 색상 변형에 대해 테마 엔진은 빌드 시 자동으로 텍스트 대비 색상을 생성하며, 이 색상도 팔레트에 포함됩니다. 아래에서 미리 정의된 light material 팔레트를 볼 수 있습니다.

    $igx-light-palette: palette(
        $primary: #09f,
        $secondary: #e41c77
        $info: #1377d5,
        $success: #4eb862,
        $warn: #fbb13c,
        $error: #ff134a,
        $gray: #000,
        $surface: #fff
    );
    scss

    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,
      )
    );
    scss

    테마 팔레트 생성

    테마 팔레트를 정의하려면 색조에서 색상으로의 맵을 생성하는 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;
    }
    scss

    Light Theme Palette

    Ignite UI $igx-light-paletteprimary 색상과 새로 만든 material-like-palette 함수를 사용하여 밝은 기본 소재 테마 팔레트를 정의합니다. 결과는 define-palette 함수에 매개변수로 전달해야 하며, 이 함수는 default, lighter, darkertext 셰이드에 대한 색상 값을 생성하여 팔레트 맵에 추가합니다.

    $light-palette-primary: mat.define-palette(
        material-like-palette('primary', $saturations, $igx-light-palette));
    scss

    밝은 액센트 팔레트에 대해서도 동일한 작업을 수행해 보겠습니다.

    $light-palette-accent: mat.define-palette(
        material-like-palette('secondary', $saturations, $igx-light-palette));
    scss

    마지막으로 두 가지 색상 팔레트를 define-light-theme 함수에 전달할 준비가 되었습니다. 이 함수는 Ignite UI 머티리얼 색상 팔레트에서 가져온 색상으로 Angular Material 테마를 생성합니다.

    $custom-mat-light-theme: mat.define-light-theme((
        color: (
            primary: $light-palette-primary,
            accent: $light-palette-accent
        )
    ));
    scss

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

    테마

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

    위의 코드를 안에 넣어주세요.::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;
        }
    }
    scss

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

    수업 생성

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

    그런 다음 "bg - 팔레트의 색상 - 색상 변형" 패턴에 따라 navbar 구성 요소에 CSS 클래스를 추가합니다. 샘플 앱에서는 bg-gray-100 사용하고 있습니다.

    Angular 구성 요소 타이포그래피

    Ignite UI for Angular 각 테마에 대해 4개의 기본 글꼴 크기를 노출하는데, 이는 애플리케이션의 글로벌 글꼴 스타일을 정의하기 위해 typography 믹스인 내부에서 사용할 수 있습니다. 이 예에서는 미리 정의된 typefacetype-scale 적용하지만 원하는 경우 사용자 정의 글꼴과 글꼴 크기를 만들 수 있습니다.

    :host {
        @include typography($font-family: $material-typeface, $type-scale: $material-type-scale);
    }
    scss

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

    그런 다음 타이포그래피 구성을 mixin에 전달해야 합니다 define-light-theme.

    $custom-mat-light-theme: mat.define-light-theme((
        color: (
            primary: $light-palette-primary,
            accent: $light-palette-accent
        ),
        typography: $custom-typography
    ));
    scss

    자세한 내용은 Angular Material Typography documentation 확인하세요.

    API 참조

    관련 주제:

    추가 리소스

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