GaramX

사용자 도구

사이트 도구

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

차이

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

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
angular:material [2019/01/20 11:42] – [사용자 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을 추가 설치하려면
줄 32: 줄 33:
  
 A custom theme file does two things: A custom theme file does two things:
 +사용자 정의 테마 파일은 다음 두 가지 작업을 수행합니다.:
  
-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. +  - 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. 
-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이 여러 번 포함되면 응용 프로그램이 이러한 공통 스타일의 여러 사본으로 끝납니다. 
 +  - 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.1547984573.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)

문서 도구