GaramX

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:

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