GaramX

사용자 도구

사이트 도구

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

차이

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

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
angular:material [2019/01/20 12:09] – [사용자 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을 추가 설치하려면
줄 66: 줄 67:
 @include angular-material-theme($candy-app-theme); @include angular-material-theme($candy-app-theme);
 </code> </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.1547986172.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)

문서 도구