부트스트랩 테마

Ignite UI for Angular Bootstrap의 마크업 및 CSS를 기반으로 하는 인기 있는 NG Bootstrap과 같은 다른 구성 요소 라이브러리와 함께 사용할 수 있는 기회를 제공합니다.

개요

Ignite UI for Angular 개발자가 최신 고성능 앱을 구축할 수 있도록 지원하는 Angular 머티리얼 기반 UI 위젯, 구성 요소 및 Sketch UI 키트와 지원 지시문의 완전한 세트입니다. 우리의 테마 엔진은 사용하기 쉽고 단일 구성 요소, 여러 구성 요소 또는 전체 제품군의 다양한 수준에서 테마 세분성을 허용합니다. 따라서 일부 사용자는 Ignite UI 구성 요소뿐만 아니라 다른 라이브러리에서도 이를 활용하고 싶어합니다. 이 기사에서는 Ng Bootstrap 구성 요소와 함께 Ignite UI의 사용법을 살펴보겠습니다.

Demo

Basic Usage

Add NG Bootstrap

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

ng add @ng-bootstrap/ng-bootstrap

설치가 완료되면 NG Bootstrap 기본 모듈을 app.module.ts 파일로 가져와야 합니다.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    imports: [
        ...,
        NgbModule,
        ...
    ]
)}

이제 애플리케이션은 NG Bootstrap 구성 요소를 사용할 준비가 되었습니다. official documentation에서 Bootstrap 라이브러리 사용에 대한 자세한 정보를 찾을 수 있습니다.

Add 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 항목을 따르세요. 안내 예제와 함께 각 구성 요소를 가져오고 사용하는 방법에 대한 자세한 내용은 구성 요소 설명서에서 확인할 수 있습니다.

Components

데모 샘플이 어떻게 완료되는지 살펴보겠습니다. 이는 하나의 애플리케이션에 잘 맞도록 스타일이 지정된 Ignite UI와 NG Bootstrap 구성 요소의 혼합입니다. 이 예의 탐색은 igx-buttons 및 igx-avatar와 함께 부트스트랩 navbar 사용하여 생성됩니다. 캠페인 버튼 아래의 dropdown도 부트스트랩 라이브러리에서 가져옵니다. 탐색 아래에서는 igx-card 구성 요소를 사용하여 일부 통계를 표시합니다. 카드 내에 igx-avatars 및 igx-icons는 물론 부트스트랩 buttons 및 ngb-ratings와 같은 여러 항목을 배치했습니다.

​More 버튼을 클릭하면 igx-dialog 표시됩니다.

다음으로 신용 카드에 대한 정보를 표시하는 ngb-accordion 추가했습니다. 콘텐츠 내부에는 igx-list 및 igx-button 있습니다.

마지막으로 Ignite UI for Angular 삽입했습니다. icon button 오른쪽 상단에서 전체 앱의 테마를 변경합니다.

스타일링

Ignite UI 테마 엔진을 사용하여 구성 요소 스타일링을 시작하려면 전역 테마의 기본 파일이 될 원하는 이름의 scss 파일을 만듭니다. 이 파일을_variables.scss 라고 부르겠습니다. 다음으로 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

// _variables.scss
@use "igniteui-angular/theming" as *;

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

팔레트

Bootstrap 라이브러리는 $theme-colors 라는 Sass 맵을 사용하여 8가지 색상으로 구성된 팔레트를 제공합니다.

$theme-colors: (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
);

Ignite UI for Angular palette 함수는 다음을 포함하는 색상 팔레트 맵을 생성합니다. primary, secondary, gray, info, success, warn, 그리고 error 색상 및 색상 변형. 미리 정의된 부트스트랩 팔레트는 7가지 색상으로 구성됩니다.

$bootstrap-palette: palette(
    $primary: #0d6efd,
    $secondary: #6c757d,
    $info: #0dcaf0,
    $success: #198754,
    $warn: #ffc107,
    $error: #dc3545,
    $surface: #f8f9fa
);

보시다시피 Bootstrap 팔레트의 색상 대부분은 Ignite UI for Angular의 Bootstrap 팔레트에 정의된 색상과 겹칩니다. 따라서 Bootstrap 테마 색상을 밝거나 어두운 Bootstrap 팔레트 색상에 간단히 매핑할 수 있습니다.

먼저 $light-bootstrap-palette에서 값을 추출하는 Sass 변수를 정의하겠습니다.

// Colors from the Ignite UI light bootstrap color palette
$light-primary: color($light-bootstrap-palette, "primary");
$light-secondary: color($light-bootstrap-palette, "secondary");
$light-success: color($light-bootstrap-palette, "success");
$light-info: color($light-bootstrap-palette, "info");
$light-warning: color($light-bootstrap-palette, "warn");
$light-danger: color($light-bootstrap-palette, "error");

그런 다음 샘플의 어두운 모드에 사용될 새로운 색상 팔레트를 만듭니다.

// Defining custom color palette
$custom-dark-palette: palette(
    $primary: #ecaa53,
    $secondary: #011627,
    $gray: #fff,
    $surface: #222
);

// Creating Sass variables for primary and secondary colors
$dark-primary: color($custom-dark-palette, "primary");
$dark-secondary: color($custom-dark-palette, "secondary");

Note

​palettes with Sass 섹션을 방문하여 Ignite UI for Angular에서 제공하는 팔레트에 대해 자세히 알아보고 새 팔레트를 만드는 방법을 알아보세요.

Themes

​light 모드와 dark 모드 사이를 전환하기 위해 버튼 클릭 시 변경될 host 요소에 사용자 정의 클래스를 추가합니다. 스타일시트 파일에는 각 클래스에 적용되는 다양한 색상 팔레트가 포함됩니다.

라이트 모드

Ignite UI for Angular Bootstrap 4 라이브러리에서 영감을 받은 사전 정의된 테마가 함께 제공됩니다. 이를 사용하려면 먼저 core 믹스인을 포함시킨 다음 내장 테마 믹스인 bootstrap-light-theme을 포함해야 합니다. 또한 사전 정의된 부트스트랩 팔레트인 $light-bootstrap-palette를 사용할 것입니다.

우리 애플리케이션의 배경색은 호스트 요소에 명시적으로 설정되어야 합니다. 우리 샘플에서는 전달된 팔레트의 surface 색상을 사용하려고 합니다.

이 시점에서 앞서 만든 Sass 변수를 사용하여 Bootstrap $theme-colors 맵을 수정해야 합니다.

// Make sure you always include thecore mixin first
@include core();

:host {
    &.light {
        // The background color of the application in light mode
        background: color($light-bootstrap-palette, 'surface');

        ::ng-deep {
            // Applying the igx predefined light bootstrap palette and theme
            @include bootstrap-light-theme($light-bootstrap-palette);

            $theme-colors: (
                "primary": $light-primary,
                "secondary": $light-secondary,
                "success": $light-success,
                "info": $light-info,
                "warning": $light-warning,
                "danger": $light-danger
            );
        }
    }
}

Ignite UI 팔레트에 해당 값이 없는 $theme-colors 맵의 light 색상과 dark 색상도 재량에 따라 값으로 대체될 수 있습니다. 예를 들어:

$custom-light: color($light-bootstrap-palette, "gray", 100);
$custom-dark: color($light-bootstrap-palette, "gray", 800);

:host {
    &.light {
        ::ng-deep {
            $theme-colors: (
                "light": $custom-light,
                "dark": $custom-dark,
            );
        }
    }
}

다크 모드

어두운 변형의 경우 새로 생성된 $custom-dark-palette 사용할 것입니다. 이를 dark 클래스 스타일에 포함하고 $theme-colors 맵을 새 값으로 수정해야 합니다.

Ignite UI for Angular의 모든 구성 요소는 전달된 팔레트의 색상을 사용하므로 추가 조정 없이 어두운 모드에 잘 맞습니다. 그러나 ng-bootstrap 구성 요소에 대해 몇 가지 스타일을 더 변경해야 합니다.

:host {
    &.dark {
        // The background color of the application in dark mode
        background: color($custom-dark-palette, 'surface');

        ::ng-deep {
            // Applying our custom dark palette 
            @include bootstrap-dark-theme($custom-dark-palette);

            // Overriding bootstrap button colors with colors from the custom dark palette
            .igx-card-actions .btn-primary {
                background-color: $dark-primary;
                border-color: $dark-primary;

                &:hover {
                    background-color: color($custom-dark-palette, 'primary', 600);
                }
            }

            // Overriding ngb-accordion colors with colors from the custom dark palette
            .accordion {
                .card-header {
                    background-color: color($custom-dark-palette, 'gray', 200);
                    color: color($custom-dark-palette, 'gray', 900);
                }

                .card {
                    background-color: color($custom-dark-palette, 'surface');
                    border-color: color($custom-dark-palette, 'gray', 300);
                }
            }

            // Overriding bootstrap dropdown colors with colors from the custom dark palette
            .dropdown .dropdown-menu {
                background-color: color($custom-dark-palette, 'surface');
                border-color: color($custom-dark-palette, 'gray', 300);

                .dropdown-item {
                    color: color($custom-dark-palette, 'gray', 800);

                    &:hover {
                        background-color: color($custom-dark-palette, 'gray', 200);
                    }
                }
            }
            
            // Modifying the bootstrap color map
            $theme-colors: (
                "primary": $dark-primary,
                "secondary": $dark-secondary
            );
        }
    }
}

마지막으로 Bootstrap 라이브러리를 가져와야 합니다. 항상 마지막에 가져와야 합니다!

:host {
    ::ng-deep {
        // Importing Bootstrap .scss file
        // Make sure you always import it last
        @import "~bootstrap/scss/bootstrap";
    }
}

​$theme-colors 맵 수정을 마치면 부트스트랩 구성 요소는 이미 밝은 모드에는 igx $light-bootstrap-palette의 색상을 사용하고 어두운 모드에는 $custom-dark-palette 색상을 사용합니다.

Warning

위의 코드를 안에 넣어주세요.::ng-deep 선택기 penetrate 그만큼 Emulated ViewEncapsulation.

Generate class

부트스트랩 navbar 배경색으로 CSS 클래스를 사용합니다. 샘플에서는 선택한 테마에 따라 해당 색상이 변경되기를 원하므로 color-classes 믹스인을 사용할 것입니다. 지정된 속성 및 색상 팔레트의 모든 색상에 대한 CSS 클래스 이름을 생성하며 클래스 이름에 선택적 접두사와 접미사가 첨부됩니다. 데모에서는 믹스인을 두 번 포함합니다. 한 번은 각각의 $light-bootstrap-palette 첫 번째 값으로 사용하는 라이트 모드에 대해, 두 번째는 $custom-dark-palette 사용하여 다크 모드에 대해 포함합니다.

:host {
    &.light {
        @include color-classes(
            $palette: $light-bootstrap-palette,
            $prop: 'background',
            $prefix: 'bg'
        );
    }

    &.dark {
        @include color-classes(
            $palette: $custom-dark-palette,
            $prop: 'background',
            $prefix: 'bg'
        );
    }
}

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

타이포그래피

Ignite UI for Angular 각 테마에 대해 네 가지 기본 유형 스케일을 노출합니다. 이는 typography 믹스인 내에서 애플리케이션의 전역 타이포그래피 스타일을 정의하는 데 사용할 수 있습니다. 이 예에서는 사전 정의된 부트스트랩 typeface와 type-scale 적용할 예정이지만 원하는 경우 사용자 정의 서체를 만들 수도 있습니다.

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

API References

• 라이트 부트스트랩 팔레트
• 다크 부트스트랩 팔레트
• 라이트 부트스트랩 테마
• 다크 부트스트랩 테마
• 팔레트 기능
• 타이포그래피 믹스인

관련 주제:

• 팔레트
• 구성 요소 테마
• 타이포그래피
• 아바타 구성요소
• 버튼 구성 요소
• 대화 상자 구성 요소
• 아이콘 구성요소
• 구성요소 나열

Additional Resources

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

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