GaramX

• mat-icon List

Angular Project에 Angular Material을 추가 설치하려면

npm install --save @angular/material @angular/cdk @angular/animations
또는
ng add @angular/material

Component Segments

Additionally @angular/CDK

Address form schematic

ng generate @angular/material:address-form <component-name>
ng generate @angular/material:nav <component-name>
ng generate @angular/material:table <component-name>
ng generate @angular/material:dashboard <component-name>
ng generate @angular/material:tree <component-name>
ng generate @angular/cdk:drag-drop <component-name>

When you want more customization than a pre-built theme offers, you can create your own theme file. pre-built theme 제공보다 더 많은 사용자 정의가 필요한 경우, 자신만의 테마 파일을 작성할 수 있습니다.

A custom theme file does two things: 사용자 정의 테마 파일은 다음 두 가지 작업을 수행합니다.:

1. Imports the mat-core() Sass mixin. This includes all common styles that are used by multiple components. This should only be included once in your application. If this mixin is included multiple times, your application will end up with multiple copies of these common styles.
2. Defines a theme data structure as the composition of multiple palettes. This object can be created with either the mat-light-theme function or the mat-dark-theme function. The output of this function is then passed to the angular-material-theme mixin, which will output all of the corresponding styles for the theme.

1. mat-core() Sass mixin를 가져옵니다. 여기에는 여러 구성 요소가 사용하는 모든 공통 스타일이 포함됩니다. 이것은 응용 프로그램에 한 번만 포함되어야합니다. 이 mixin이 여러 번 포함되면 응용 프로그램이 이러한 공통 스타일의 여러 사본으로 끝납니다.
2. theme data structure를 여러 팔레트의 구성으로 정의합니다. 이 객체는 mat-light-theme 함수 또는 mat-dark-theme 함수로 만들 수 있습니다. 이 함수의 출력은 angle-material-theme mixin으로 전달되며,이 mixin은 테마에 해당하는 모든 스타일을 출력합니다.

A typical theme file will look something like this:

@import '~@angular/material/theming';
// Plus imports for other components in your app.
 
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
 
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
 
// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);
 
// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
 
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

Example of defining multiple themes:

@import '~@angular/material/theming';
// Plus imports for other components in your app.
 
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// **Be sure that you only ever include this mixin once!**
@include mat-core();
 
// Define the default theme (same as the example above).
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);
 
// Include the default theme styles.
@include angular-material-theme($candy-app-theme);
 
 
// Define an alternate dark theme.
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
 
// Include the alternative theme styles inside of a block with a CSS class. You can make this
// CSS class whatever you want. In this example, any component inside of an element with
// `.unicorn-dark-theme` will be affected by this alternate dark theme instead of the default theme.
.unicorn-dark-theme {
  @include angular-material-theme($dark-theme);
}

특정 구성 요소 (예 : 메뉴, 선택, 대화 상자 등)는 전역 오버레이 컨테이너 안에 있기 때문에 위의 예에서 테마의 CSS 클래스 선택기 (.unicorn-dark-theme)의 영향을받는 구성 요소에 대한 추가 단계가 필요합니다. ).

이렇게하려면 전역 오버레이 컨테이너에 적절한 클래스를 추가 할 수 있습니다. 위의 예제에서는 다음과 같습니다.

import {OverlayContainer} from '@angular/cdk/overlay';
 
@NgModule({
  // ...
})
export class UnicornCandyAppModule {
  constructor(overlayContainer: OverlayContainer) {
    overlayContainer.getContainerElement().classList.add('unicorn-dark-theme');
  }
}

overlayContainer에서 class삭제

  onThemeChange(_$event) {
    // console.log("Here:" + this.theme);
    // this.overlayContainer.getContainerElement().classList.remove();
    // this.overlayContainer.getContainerElement().classList.add(this.theme);
    // if (this.theme === "my-themme") {
    //   this.overlayContainer.getContainerElement().classList.remove("my-second-theme");
    // } else {
    //   this.overlayContainer.getContainerElement().classList.remove("my-theme");
    // }
    const overlayContainerClasses = this.overlayContainer.getContainerElement().classList;
    const themeClassesToRemove = Array.from(overlayContainerClasses).filter((item: string) => item.includes('-theme'));
    if (themeClassesToRemove.length) {
      overlayContainerClasses.remove(...themeClassesToRemove);
    }
    overlayContainerClasses.add(this.theme);
  }

The angular-material-theme mixin will output styles for all components in the library. If you are only using a subset of the components (or if you want to change the theme for specific components), you can include component-specific theme mixins. You also will need to include the mat-core-theme mixin as well, which contains theme-specific styles for common behaviors (such as ripples).

@import '~@angular/material/theming';
// Plus imports for other components in your app.
 
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// **Be sure that you only ever include this mixin once!**
@include mat-core();
 
// Define the theme.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);
 
// Include the theme styles for only specified components.
@include mat-core-theme($candy-app-theme);
@include mat-button-theme($candy-app-theme);
@include mat-checkbox-theme($candy-app-theme);

icon https://material.io/tools/icons/?style=baseline css grid