테마

    단 몇 줄의 코드만으로 사용자는 구성 요소의 테마를 쉽게 변경할 수 있습니다. SASS를 통해 개발된 API 사용은 난이도가 낮으며 하나의 구성 요소, 여러 구성 요소 또는 전체 제품군의 스타일을 다시 지정할 수 있습니다.

    The Essence of a Theme

    ​Angular 용 IgniteUI는​ ​Material Design Guidelines에 따라 컴포넌트 디자인을 기반으로 하므로 컴포넌트의 색상, 크기, 전반적인 모양과 느낌을 Google에서 만든 것과 최대한 비슷하게 만들려고 노력합니다.

    테마에 대한 우리의 접근 방식은 몇 가지 간단한 개념을 기반으로 합니다.

    팔레트

    첫 번째 컨셉은 색상 팔레트 중 하나입니다. 모든 시각적 도구와 마찬가지로 색상은 응용 프로그램 간 주요 차이점입니다. 머티리얼 디자인 지침은 기본 색상의 색조와 밝기 범위에 따라 미리 정의된 색상 팔레트를 규정합니다. 그럴만한 이유가 있습니다. 그들은 배경색과 전경 텍스트 색상 간의 색상 일치와 대비가 잘 이루어지길 원합니다. 이는 훌륭하지만 동시에 제한적입니다. 귀하의 브랜딩에 맞는 나만의 맞춤형 팔레트를 갖고 싶다면 운이 없을 것입니다. 우리는 이것이 문제라는 것을 인식하고 귀하가 제공하는 기본 색상에서 머티리얼과 유사한 팔레트를 생성하는 알고리즘을 발명했습니다. 또한 팔레트의 각 색상에 대해 대비 텍스트 색상도 생성합니다.

    테마

    두 번째 컨셉은 테마 중 하나이다. 팔레트는 테마에 의해 사용되지 않으면 별로 도움이 되지 않습니다. 따라서 우리는 전체 애플리케이션과 그 안에 있는 모든 구성 요소의 스타일을 지정하는 각 구성 요소와 전역 테마에 대한 테마를 가지고 있습니다. 생성된 팔레트를 전역 테마에 전달하기만 하면 나머지는 저희가 처리해 드립니다. 물론 각 구성 요소의 스타일을 원하는 대로 개별적으로 지정할 수 있습니다. 이 기사의 뒷부분에서 이를 수행하는 방법을 자세히 살펴보겠습니다.

    타이포그래피

    마지막 개념은 타이포그래피를 중심으로 전개됩니다. 기본 서체 선택이 있지만 모든 방식으로 애플리케이션의 스타일을 지정할 수 있는 기능을 제공하고 싶습니다. 타이포그래피는 매우 중요한 부분입니다. 우리는 앱에서 글꼴 모음, 제목, 부제목 및 단락 텍스트의 크기와 두께를 변경하는 방법을 제공합니다.

    Note

    테마 필요하다 사스.

    Generating Color Palettes

    테마 라이브러리는 Sass를 기반으로 합니다. Ignite UI CLI를 사용하여 앱을 부트스트랩한 경우 angular.json 구성에서 scss로 스타일을 지정할 수 있으며, CLI는 Sass 스타일 컴파일을 처리합니다. CLI Ignite UI 사용하지 않았다면 Sass 스타일을 컴파일하도록 빌더를 구성해야 합니다.

    우리 팔레트는 ,,primary,secondary​surface,,info, 색상success에 대한warn​error 인수를 받아들입니다. 기본 색상은 적용 과정에서 더 두드러지는 색상입니다. 보조 색상은 버튼, 스위치, 슬라이더 등 실행 가능한 요소에 사용됩니다. 표면 색상은 일부 부품의 배경색으로 사용됩니다. 필요한 논항은 색상primary​secondary​surface과 우리는 미리 정해진 집합에 대해info​success​warn​error 기본값으로 설정합니다.

    첫 번째 색상 팔레트를 시작하려면 전역 테마의 기본 파일이 될 scss 파일을 만듭니다. 내 이름은 "my-app-theme.scss" 입니다.

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

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

$company-color: #2ab759; // Some green shade I like
$secondary-color: #f96a88; // Watermelon pink
$surface-color: #e5e5e5; // Light gray

$my-color-palette: palette(
  $primary: $company-color,
  $secondary: $secondary-color,
  $surface: $surface-color
);

    이제 정확히 216가지 색상이 포함된 팔레트가 완성되었습니다! 잠깐, 뭐라고? 어떻게 그런 일이 일어난 거죠? 3개를 제출했는데 216개를 받았다고요? 나머지 213가지 색상은 어디서 왔나요? 여기서 멈추고 방금 일어난 일을 설명하겠다. 꽤 중요한 내용이다. 색상을 제공primary​secondary​surface 하셨을 때, 우리는 그것들을 받아 각 색상에 맞는 음영과 포인트 색상을 생성했습니다. 기본적으로 팔레트에는 색상별로primary​secondary​surface 3개의 하위 팔레트가 있습니다. 각 하위 팔레트에는 원래 색상을 기반으로 한 13가지 추가 색상 변형이 포함되어 있습니다. 13가지 색상 중 5가지는 원래 색상의 더 밝은 색이고, 4가지는 더 어둡습니다. 나머지 4가지 색상은 원래 색상의 더 과장된 '강조' 버전입니다. 원래 색상으로 각 팔레트에 총 14가지 색상이 있습니다.

    각 하위 팔레트에 이렇게 많은 색상이 들어가 있는데, 도대체 어떻게 어떤 색이 어떤 색인지 알 수 있을지 궁금할 수도 있겠죠? 사실 아주 간단해요. 하위 팔레트의 각 색상에는 번호가 있습니다. 우리는 그 숫자500를 원래 색상에 할당합니다. 밝은 색상은 시작50 해서 범위400가 다양합니다. 어두운 색상은 시작600 해서 범위900가 넓어요. 악센트 색상은 각각 문자열 이름A100,A200,A400, 그리고A700 있습니다. 좋아, 하지만 지금은 216개 중 42개만 차지했어. 걱정 마세요, 저희가 드리는 또 다른 서브 팔레트가 있습니다. 회색 '색상'으로 구성된 것, 이른바grays 다른 두 색상 서브 팔레트와 비슷하지만, 악센트 변형은 포함되어 있지 않습니다. 좋아요, 이제 42 + 10으로 총 52가지 색상이 되었습니다. 216년과는 아직 멀었다. 나머지 164가지 색상은 어디서 오는 걸까요? 마지막 퍼즐을 풀자. 또한 4가지 추가 색상info을 추가할 수 있다는 점을 기억하세요.success​warn​error 그래서 56가지 색깔이 더 미확인된 상태입니다. 기억하세요,primary,secondary​surface​info​success​warn​error,그리고 서브 팔레트의grays 카운트가 정확히 108이었고, 이는 216가지 색상의 절반입니다. 나머지 절반은 각 색상 변형의 대비 텍스트 색상으로, 변수-contrast 이름에 접미사가 붙어 있고, 검정 또는 흰색입니다.

    알았어요? 좋은! 하지만 팔레트에 있는 색상에 어떻게 접근하나요?

    Getting Sub-Palette Colors

    우리는 기억하기 쉽고 사용하기color 쉬운 기능을 제공합니다. 세 가지 논항 -palette,,color, 그리고variant;

    $my-primary-600: color($my-color-palette, "primary", 600);
$my-primary-A700: color($my-color-palette, "secondary", "A700");
$my-warning-color: color($my-color-palette, "warn");
// sample usage

.my-awesome-class {
  background: $my-primary-600;
  border-color: $my-primary-A700;
}

.warning-bg {
  background: $my-warning-color;
}

    Getting Contrast Text Colors

    하위 팔레트 색상을 얻는 방법과 유사하게 하위 팔레트의 각 색상에 대한 대비 텍스트 색상을 얻는 방법이 있습니다.

    $my-primary-800: color($my-palette, "primary", 600);
$my-primary-800-text: contrast-color($my-palette, "primary", 600);
// sample usage

.my-awesome-article {
  background: $my-primary-800;
  color: $my-primary-800-text;
}

    Generating a Theme

    애플리케이션 프로젝트에 "igniteui-angular.css" 파일을 포함했다면 이제 이를 제거할 때입니다. 우리는 우리만의 "my-app-theme.scss" 파일을 사용하여 우리만의 테마를 생성할 것입니다.

    이 페이지의 첫 번째 예시부터 시작해 보겠습니다. 이번에는 두 개의 믹싱core 곡theme과 ; 현재core 로서는 어떤 논증도 받아들이지 않지만,theme 몇 가지 -$palette,$schema,$exclude,$roundness​$elevation.$elevations 지금은 논쟁에 대해서만 이야기$palette 하자.

    Important

    이전core도 포함하는theme 것이 필수적입니다. 믹싱은core 작동에theme 필요한 모든 기본 정의를 제공합니다.

    // Import the IgniteUI themes library first
@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

$company-color: #2ab759; // Some green shade I like
$secondary-color: #f96a88; // Watermelon pink
$surface-color: #e5e5e5; // Light gray

$my-color-palette: palette(
  $primary: $company-color,
  $secondary: $secondary-color,
  $surface: $surface-color
);

// IMPORTANT: Make sure you always include core first!
@include core();
// Pass the color palette we generated to the theme mixin
@include theme($my-color-palette);

    그게 다야. 이제 응용 프로그램은 새로 생성된 팔레트의 색상을 사용합니다.

    현재 상태에서는 정의되는 커스텀 타이포그래피가 애플리케이션의 변경font family 에만 국한되어 있습니다. 이 기능은 이후 버전에서 계속 업데이트할 예정입니다. 저희의 의도는 애플리케이션 내 타이포그래피를 강력하게 맞춤화할 수 있는 방법을 제공하는 것입니다.

    타이포그래피를 커스터마이즈하려면 믹스인을typography 사용하세요. 정확히 하나의 논증이 필요합니다 -config.

    Important

    이후typography를 포함하는core 것은 필수적입니다. 이는 향후 릴리스에서 변경될 수 있습니다.

    // Import the IgniteUI themes library first
@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

// IMPORTANT: Make sure you always include core first!
@include core();
// Include typography before theme
@include typography(
  $config: (
    font-family: "Comic Sans MS",
  )
);
@include theme($default-palette);