Customizing Ignite UI for Angular Theming

이 문서에서는 Ignite UI for Angular 사용자 정의하고 생성된 스타일시트의 크기를 최적화하는 방법을 자세히 안내합니다. 이 기사에서는 Ignite UI for Angular 어떻게 작동하는지 자세히 설명하고 고급 사용법을 제시합니다. 이 기사는 Angular 애플리케이션이 원하는 모양과 느낌에 맞게 조정되도록 구성 요소 스타일을 완전히 사용자 정의하는 것과 스타일 크기를 사용되는 크기로 줄여 애플리케이션을 배포에 최적화하는 데 매우 유용합니다. 앱.

Note

이 문서에서는 버전 15 이후 Ignite UI for Angular의 테마 시스템에 대해 설명합니다. 예에는 테마 엔진에서 제공하는 Sass API 사용과 노출된 CSS 변수가 모두 포함됩니다.

Getting Started

​App Builder 사용하여 Angular 애플리케이션을 생성한 다음 생성된 저장소에서 해당 스타일을 수정하겠습니다. 먼저 App Builder의 "헤더 + 미니 탐색 + 콘텐츠 + 측면 창" 템플릿에서 새 앱을 만들고 디자인 화면에 일부 구성 요소를 추가합니다.

그런 다음 Angular 대상으로 사용하여 GitHub 저장소에 앱을 생성합니다. 그 위에서 App Builder에서 작업하고 생성된 코드 자체를 수정합니다. 저장소를 복제하고 프로젝트를 빌드한 후 초기 상태에서 실행 중인 Angular 애플리케이션을 얻습니다.

보시다시피, 애플리케이션은 Material Light Variant 인 기본 테마를 적용했습니다. 생성된 styles.scss 파일은 다음과 같습니다:

/* You can add global styles to this file, and also import other style files */

// Standard CSS normalize, comment out if not required or using a different module
@use "minireset.css/minireset";
@use "@infragistics/igniteui-angular/theming" as *;

@include core();
@include typography();
@include light-theme($light-material-palette);

body {
  background: hsla(var(--ig-surface-500));
  color: var(--ig-surface-500-contrast);
}

html, body {
  height: 100%;
}

.ig-typography {
  h1, h2, h3, h4, h5, h6, p, .ig-typography__body-1 {
    margin: 0;
  }
}

.outer-wrapper > *:not(router-outlet) {
  width: 100%;
}

Theme Customization

우리는 동일한 테마의 어두운 변형을 원하고, 브랜드에 맞게 자체 색상 팔레트를 추가하고, 글꼴을 기본 Titillium Web 대신 Poppins로 변경합니다. 이 모든 사항은 App Builder를 통해 직접 변경할 수 있으며 변경 사항을 적용할 수 있습니다. App Builder에서 저장소로의 풀 요청으로.

업데이트된 styles.scss 다음과 같습니다:

@include core();
@include typography($font-family: "Poppins");

$custom-palette: palette(
  $primary: #1028c7,
  $secondary: #e0d94c,
  $surface: #000,
  $gray: #fff
);

@include theme(
    $palette: $custom-palette, 
    $schema: $dark-material-schema
);

보시다시피 코드 생성은 특정 @include light-theme($light-material-palette);​ ​기본 테마 및 색상 팔레트 인 를 일반 theme() 포함으로 변환하여 매개변수로 사용자 정의 색상 팔레트와 테마 구조를 위한 어두운 재질 스키마를 제공합니다. 실행 중인 Angular 앱 결과는 이제 다음과 같습니다.

우리는 애플리케이션에서 더 깊이 파고들어 특정 구성 요소 테마를 사용자 정의하고 싶고 개별 구성 요소 테마(이 경우 그리드 도구 모음 테마)에 대한 CSS 변수를 가져와 이를 수행할 것입니다.

@include core();
@include typography($font-family: "Poppins");

$primary: #1028c7;

/* All of the components will use this custom color palette */
$custom-palette: palette(
  $primary: $primary,
  $secondary: #e0d94c,
  $surface: #000,
  $gray: #fff
);

@include theme(
    $palette: $custom-palette, 
    $schema: $dark-material-schema
);

/* Grid Toolbar */
/* All grid toolbars will have custom background and elevations */
$toolbar-theme: grid-toolbar-theme(
  $background-color: $primary
);

@include css-vars($toolbar-theme);
/* END Grid Toolbar */

이제 우리 앱의 결과는 다음과 같습니다.

동일한 프로세스를 적용하여 구성 요소 테마를 개별적으로 재정의하고 사용자 정의할 수 있습니다.

Switching custom themes at runtime

이제 더 깊이 파고들어 런타임에 전환할 수 있는 테마의 두 가지 사용자 정의 버전을 만들어 보겠습니다. 사용자 제어/기본 설정을 사용하여 이 작업을 수행하고 언제든지 전환하도록 할 수 있습니다. 그러나 예에서는 현재 OS 설정과 일치하는 테마를 적용하기 위해 OS 정의 사용자 기본 설정(밝음 또는 어두움)을 사용합니다. 이를 위해서는 두 가지 색상 팔레트가 필요합니다.

@use "minireset.css/minireset";
@use "@infragistics/igniteui-angular/theming" as *;

@include core();
@include typography($font-family: "Poppins");

$primary-dark: #1028c7;
$primary-light: #3c55f1;
$secondary-dark: #e0d94c;
$secondary-light: #b4a904;

$custom-palette-dark: palette(
  $primary: $primary-dark,
  $secondary: $secondary-dark,
  $surface: #000,
  $gray: #ccc
);

$custom-palette-light: palette(
  $primary: $primary-light,
  $secondary: $secondary-light,
  $surface: #fff,
  $gray: #222
);

그런 다음 테마 정의는 조명 변형에 사용할 일반 범위에 들어가고 어두운 색상 스키마 OS 기본 설정이 감지되면 @media 쿼리에서 팔레트 재정의를 생성합니다.

@include theme(
  $palette: $custom-palette-light,
  $schema: $light-material-schema
);

@media (prefers-color-scheme: light) {
  /* Grid Toolbar override for light color scheme */
  igx-grid-toolbar {
    --background-color: #{$primary-light};
    --title-text-color: #{text-contrast($primary-light)};
  }
  /* END Grid Toolbar */
}

@media (prefers-color-scheme: dark) {
  // changes native element schema (scrollbars, select, etc.)
  :root {
    color-scheme: dark;
  }

  @include palette($custom-palette-dark);

  /* Grid Toolbar override for dark color scheme */
  igx-grid-toolbar {
    --background-color: #{$primary-dark};
    --title-text-color: #{text-contrast($primary-dark)};
  }
  /* END Grid Toolbar */
}

Note

나는 전환했다 igx-grid-toolbar 테마 재정의를 사용하여 모든 테마 변수를 다시 포함하는 대신 두 개의 변수만 재정의합니다. css-vars(). 모든 테마 변수는 다음에서 찾을 수 있습니다. 해당 Sass API 문서 sass 변수와 동일하지만 접두사가 붙습니다.--대신에 $.

결과는 이제 밝은 OS 테마에서 다음과 같습니다.

어두운 OS 테마에서는 다음과 같이 보입니다.

Note

Ignite UI 테마 스키마 사전 설정 전환을 포함한 전체 런타임 전환은 두 개의 전체 테마가 빌드된 경우에만 가능합니다. 위의 예에서는 색상 팔레트를 전환하지만 테마 스키마는 $light-material-schema로 유지되므로 어두운 색상 팔레트로 전환할 때 색상 팔레트의 올바른 음영 중 일부가 사용되지는 않습니다.

What can be customized

Ignite UI 테마 지정은 다양한 차원의 테마 지정을 추상화하고 매우 강력한 테마 변경 기능을 제공합니다. 개발자와 디자이너는 테마 엔진 API를 활용하여 애플리케이션에 맞는 맞춤형 시각적 디자인을 만들 수 있으며, 이는 Ignite UI for Angular 사용할 때 독특한 모양과 느낌을 제공합니다. 또한 테마 엔진은 각 차원의 변수를 노출합니다. 이 변수는 Ignite UI for Angular UI로 직접 구축하지 않은 나머지 애플리케이션 구조에 테마를 적용하는 데 사용할 수 있습니다. 수정을 위해 노출되는 치수는 다음과 같습니다.

• Colors (color palette)
• Shape (borders and radiuses)
• Elevations (shadows)
• 타이포그래피 (글꼴 및 글꼴 크기)
• 크기 (화면에 표시되는 정보의 크기)

Note

완전히 사용자 정의된 시각적 디자인을 정말로 원한다면 지원되는 모든 테마 차원을 수정해야 하며 Sass API를 최대한 활용하게 될 것입니다. 글꼴이나 몇 가지 색상 등을 변경해야 한다면 팔레트 및 타이포그래피 섹션을 살펴보세요. 대부분의 경우 CSS 변수 몇 개만 변경하면 전체 Sass API가 필요하지 않습니다. 우리는 이것을 최대한 세분화하여 애플리케이션의 시각적 디자인에 예상치 못한 부작용 없이 수정 사항을 적용할 수 있도록 했습니다.

Theme Optimization

몇 가지 사용자 정의를 수행한 후 생성하고 수정한 애플리케이션을 빌드하여 애플리케이션 테마가 크기 측면에서 어떻게 보이는지 확인하겠습니다.

보시다시피, 애플리케이션 테마는 400kb를 약간 넘는데, 압축하여 전송하면 ~40kb로 줄어듭니다. 이것은 크지 않지만 더 최적일 수 있습니까? Ignite UI for Angular의 모든 단일 구성 요소가 사용되지 않는 한 대답은 '예'입니다. @include theme() 호출하면 모든 구성요소 테마가 가져오지만 함수에 무엇을 제외할지 알려주는 메커니즘이 있습니다. 테마 믹스인에는 구성 요소 이름을 배열로 사용하고 빌드 시 테마에서 해당 이름을 제외하는 $exclude 매개 변수가 있습니다. 패키지에서 사용 가능한 모든 구성 요소를 찾아서 나열하는 것은 그리 쉽지 않으므로 사용하는 모든 구성 요소만 나열할 수 있는 것이 바람직합니다. 우리는 전체 구성 요소 목록을 변수로 노출하며, 일단 액세스하면 액세스할 수 있습니다.

@use "@infragistics/igniteui-angular/theming" as *;

구성 요소 배열은 $components에 있으며 다음 예와 같이 사용하는 구성 요소로이 목록을 줄이고 나머지는 모두 제외할 수 있습니다.

$include: (
  igx-navbar,
  igx-ripple,
  igx-icon,
  igx-button,
  igx-input-group,
  igx-combo,
  igx-nav-drawer,
  igx-grid,
  igx-grid-toolbar
);

@include theme(
  $palette: $custom-palette,
  $schema: $dark-material-schema,
  /* Removing all included components from the full list and excluding the rest  */
  $exclude: map.keys(map.remove($components, $include...))
);

Note

일부 구성 요소 테마는 다른 구성 요소 테마에 따라 달라집니다.
특정 테마를 제외하더라도 제외된 테마에 따라 달라지는 구성 요소 테마를 사용하는 경우 빌드에서 해당 테마를 유지합니다.

특정 테마를 제외하면 빌드는 어떤 모습일까요?

보시다시피 스타일 크기가 원래 크기의 거의 절반으로 줄어듭니다. 현재로서는 꽤 좋아 보이지만 이를 더 줄일 수 있습니까? 사실, 우리는 할 수 있습니다. 대부분의 스타일 크기는 제품군에서 가장 큰 구성 요소(이 경우 뷰 중 하나에 있는 IgxTreeGridComponent가 차지합니다. 그러나 다른 뷰에서는 이 구성 요소를 사용하지 않습니다. igx-tree-grid 사용하여 뷰를 지연 로드 경로로 만들고 해당 경로에 대해서만 그리드 테마를 포함할 수 있으므로 최상위 CSS를 더욱 작게 만들 수 있습니다. 이것은 어떻게 이루어 집니까?

앱의 직원 구성 요소가 있는 폴더에 새 모듈과 새 라우팅 모듈을 만드는 것부터 시작하겠습니다.

// employees.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { EmployeesRoutingModule } from './employees-routing.module';
import { EmployeesComponent } from './employees.component';
import { IgxButtonModule, IgxComboModule, IgxTreeGridModule } from '@infragistics/igniteui-angular';


@NgModule({
  declarations: [
    EmployeesComponent
  ],
  imports: [
    CommonModule,
    EmployeesRoutingModule,
    IgxComboModule,
    IgxTreeGridModule,
    IgxButtonModule
  ]
})
export class EmployeesModule { }

// employees-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { EmployeesComponent } from './employees.component';

const routes: Routes = [{ path: '', component: EmployeesComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class EmployeesRoutingModule { }

// Updated top-level app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { PageNotFoundComponent } from './error-routing/not-found/not-found.component';
import { UncaughtErrorComponent } from './error-routing/error/uncaught-error.component';
import { ErrorRoutingModule } from './error-routing/error-routing.module';
import { StatisticsComponent } from './statistics/statistics.component';

export const routes: Routes = [
  { path: '', redirectTo: 'statistics', pathMatch: 'full' },
  { path: 'error', component: UncaughtErrorComponent },
  // { path: 'employees', component: EmployeesComponent, data: { text: 'Employees' } },
  // lazy-loading the employees route
  { path: 'employees', loadChildren: () => import('./employees/employees.module').then(m => m.EmployeesModule) },
  { path: 'statistics', component: StatisticsComponent, data: { text: 'Statistics' } },
  { path: '**', component: PageNotFoundComponent } // must always be last
];

@NgModule({
  imports: [RouterModule.forRoot(routes), ErrorRoutingModule],
  exports: [RouterModule, ErrorRoutingModule]
})
export class AppRoutingModule {
}

이제 IgxTreeGridModule 및 IgxComboModule 가져오기와 app.module.ts에서 EmployeesComponent 제거합니다. 왜냐하면 다른 뷰에서는 가져오기를 사용하지 않고 모든 모듈에서 하나의 구성 요소 선언만 가질 수 있기 때문입니다.

그런 다음 테마 포함에서 igx-grid, igx-grid-toolbar 및 igx-combo 제거하고 employees.component.scss 수준에 포함합니다.

/* employees.component.scss */
@use "@infragistics/igniteui-angular/theming" as *;

:host ::ng-deep {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;

  $primary: #1028c7;
  @include core();

  @include grid(grid-theme());

  @include combo(combo-theme());

  @include grid-toolbar(
    grid-toolbar-theme(
        $background-color: $primary, 
    );
}

/* Updated styles.scss */
@use "sass:map";
@use "minireset.css/minireset";
@use "@infragistics/igniteui-angular/theming" as *;

@include core();
@include typography($font-family: "Poppins");

$primary: #1028c7;

$custom-palette: palette(
  $primary: $primary,
  $secondary: #e0d94c,
  $surface: #000,
  $gray: #fff
);

$include: (
  igx-navbar,
  igx-ripple,
  igx-icon,
  igx-button,
  igx-nav-drawer
);

@include theme(
  $palette: $custom-palette,
  $schema: $dark-material-schema,
  $exclude: map.keys(map.remove($components, $include...),)
);

Note

색상 팔레트 값과 같은 모든 변수를 별도의_variables.scss 파일에 넣을 수 있습니다. 이 파일은 여러 구성 요소에서 포함하여 변수를 재사용할 수 있습니다.

빌드 측면에서 결과는 다음과 같습니다.

보시다시피, 최상위 styles.css 70kb를 약간 넘는 수준으로 줄었습니다. 압축하면 6kb보다 약간 작아집니다. 우리는 ~428kb, ~40kb 압축으로 시작하여 압축 크기를 약 7배로 줄였습니다. 나머지는 igx-tree-grid 및 igx-combo 구성 요소가 포함된 뷰가 로드될 때만 전달됩니다.

Additional Resources

관련 주제:

• 팔레트
• 고도
• 타이포그래피
• Sass를 사용한 테마

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

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub