GaramX

사용자 도구

사이트 도구

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

차이

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

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
angular:material [2019/01/20 12:11] – [사용자 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을 추가 설치하려면
줄 98: 줄 99:
 } }
 </code> </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.1547986319.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)

문서 도구