GaramX

사용자 도구

사이트 도구

현재 위치: home » angular » material
추적: • first • generic • decorator • class-binding • ngif • handbook
angular:material

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
angular:material [2019/01/20 11:47] – [사용자 theme 정의하기] taekguangular:material [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
줄 1: 줄 1:
 ===== Angular Material ===== ===== Angular Material =====
 +  * [[https://www.angularjswiki.com/angular/angular-material-icons-list-mat-icon-list/|mat-icon List]]
 ==== ng CLI 사용 ==== ==== ng CLI 사용 ====
 [[study:angular|Angular Project]]에 Angular Material을 추가 설치하려면 [[study:angular|Angular Project]]에 Angular Material을 추가 설치하려면
줄 37: 줄 38:
   - 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.   - 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.
  
-  - //mat-core()// Sass mixin를 가져옵니다. 여기에는 여러 구성 요소가 사용하는 모든 공통 스타일이 포함됩니다. 이것은 응용 프로그램에 한 번만 포함되어야합니다. 이 mixin이 여러 번 포함되면 응용 프로그램이 이러한 공통 스타일의 여러 사본으로 끝납니다. +  - mat-core() Sass mixin를 가져옵니다. 여기에는 여러 구성 요소가 사용하는 모든 공통 스타일이 포함됩니다. 이것은 응용 프로그램에 한 번만 포함되어야합니다. 이 mixin이 여러 번 포함되면 응용 프로그램이 이러한 공통 스타일의 여러 사본으로 끝납니다. 
-  - 테마 데이터 구조를 여러 팔레트의 구성으로 정의합니다. 이 객체는 mat-light-theme 함수 또는 mat-dark-theme 함수로 만들 수 있습니다. 이 함수의 출력은 angle-material-theme mixin으로 전달되며,이 mixin은 테마에 해당하는 모든 스타일을 출력합니다.+  - theme data structure를 여러 팔레트의 구성으로 정의합니다. 이 객체는 mat-light-theme 함수 또는 mat-dark-theme 함수로 만들 수 있습니다. 이 함수의 출력은 angle-material-theme mixin으로 전달되며,이 mixin은 테마에 해당하는 모든 스타일을 출력합니다.
 A typical theme file will look something like this: A typical theme file will look something like this:
 +<code css>
 +@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);
 +</code>
 +Example of defining multiple themes:
 +<code css>
 +@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);
 +}
 +</code>
 +=== Multiple themes and overlay-based components ===
 +특정 구성 요소 (예 : 메뉴, 선택, 대화 상자 등)는 전역 오버레이 컨테이너 안에 있기 때문에 위의 예에서 테마의 CSS 클래스 선택기 (.unicorn-dark-theme)의 영향을받는 구성 요소에 대한 추가 단계가 필요합니다. ).
 +
 +이렇게하려면 전역 오버레이 컨테이너에 적절한 클래스를 추가 할 수 있습니다. 위의 예제에서는 다음과 같습니다.
 +<code javascript>
 +import {OverlayContainer} from '@angular/cdk/overlay';
 +
 +@NgModule({
 +  // ...
 +})
 +export class UnicornCandyAppModule {
 +  constructor(overlayContainer: OverlayContainer) {
 +    overlayContainer.getContainerElement().classList.add('unicorn-dark-theme');
 +  }
 +}
 +</code>
 +
 +overlayContainer에서 class삭제
 +<code javascript>
 +
 +  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);
 +  }
 +</code>
 +=== Theming only certain components ===
 +
 +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).
 +<code css>
 +@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);
 +</code>
 ==== 참조 ==== ==== 참조 ====
 icon icon
 https://material.io/tools/icons/?style=baseline https://material.io/tools/icons/?style=baseline
 css grid css grid
angular/material.1547984827.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)

문서 도구