Angular2의 Material 사용 정보(자세한 튜토리얼)

이 글에서는 주로 Angular2의 Material(Material Icon 포함) 사용에 대해 소개합니다. 필요하신 분들은 참고하시면 됩니다

1. Material npm 패키지를 소개합니다

npm install @angular/material @angular/cdk

2. .ts Material을 소개하는 모듈의 편리한 관리

ng g module ebiz-material -app=ebiz-ui

3. 앱의 루트 모듈에 ebiz-material.module.ts를 도입하세요

import { EbizMaterialModule } from './ebiz-material/ebiz-material.module';
@NgModule({
  imports: [..., EbizMaterialModule],
  declarations: [
    ...
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Material 컴포넌트를 사용하세요

1. -material.module.ts에 머티리얼 컴포넌트 모듈을 도입합니다. 예를 들어 checkbox

(https://material.angular.io/comComponents/checkbox/overview)를 사용하려면 MatCheckboxModule을 도입한 다음 내보냅니다. 소개 이후에요.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatCheckboxModule } from '@angular/material';
@NgModule({
 imports: [CommonModule, MatCheckboxModule],
 declarations: [],
 exports: [ MatCheckboxModule ]
})
export class EbizMaterialModule { }

2. html 파일의 컴포넌트 사용

<mat-checkbox [(ngModel)]="checked">Check me!</mat-checkbox>

material-icon 사용

1.material-icon 소개

npm install material-design-icons

다운로드가 실패해도(설치에 실패했으니 걱정하지 마세요. 작동됩니다) (괜찮습니다) github에서 다운받은 후 iconfont 폴더를 꺼내서 자신의 프로젝트 디렉토리에 넣고, 아이콘을 사용해야 하는 CSS(scss)에 넣어주시면 됩니다. 일반적으로 넣어드리겠습니다. style.scss를 사용하여 전역적으로 사용합니다.

@font-face {
 font-family: 'Material Icons';
 font-style: normal;
 font-weight: 400;
 src: url(assets/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
 src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(assets/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
    url(assets/iconfont/MaterialIcons-Regular.woff) format('woff'),
    url(assets/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}
/* meterial icon的设定 */
.material-icons {
 font-family: 'Material Icons';
 font-weight: normal;
 font-style: normal;
 font-size: 24px; /* Preferred icon size */
 display: inline-block;
 line-height: 1;
 text-transform: none;
 letter-spacing: normal;
 word-wrap: normal;
 white-space: nowrap;
 direction: ltr;
 /* Support for all WebKit browsers. */
 -webkit-font-smoothing: antialiased;
 /* Support for Safari and Chrome. */
 text-rendering: optimizeLegibility;
 /* Support for Firefox. */
 -moz-osx-font-smoothing: grayscale;
 /* Support for IE. */
 font-feature-settings: 'liga';
}

2. html의 적절한 위치에 아이콘을 배치하세요

<i class="material-icon">iconName<i>

머티리얼에 내장된 테마와 맞춤 테마를 사용하세요

1. 머티리얼의 구성요소는 테마에 따라 다른 스타일로 표시되지만 이러한 스타일은 차이점은 머티리얼 구성 요소 내부로 제한되며 사용자 정의 구성 요소의 스타일에는 영향을 미치지 않습니다.

2.styles.css 파일 이름을 styles.scss로 변경하고,angular-cli.json 파일에서

"styles": [
    "styles.scss"
   ],

3.style.scss 파일에 사전 구축된 자료 테마 도입(총 4개)

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; 
 @import '~@angular/material/prebuilt-themes/indigo-pink.css'; 
 @import '~@angular/material/prebuilt-themes/pink-bluegrey.css'; 
 @import '~@angular/material/prebuilt-themes/purple-green.css';

4. 이러한 테마가 적합하지 않다고 생각되면 테마를 맞춤설정하고 styles.scss와 동일한 디렉터리에 새 theme.scss를 만든 후 맞춤 테마의 내용을 작성합니다(https://material) .angular.io/guide/theming )

@import '~@angular/material/theming';
@include mat-core();
$my-app-primary: mat-palette($mat-blue); 
$my-app-accent: mat-palette($mat-teal, A200, A100, A400); 
$my-app-warn: mat-palette($mat-red); 
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);

5. $mat-blue와 같은 일부 색상은 3단계에서 사용됩니다. 여기를 참고하세요

6. 여기로

7. styles.scss에

@import './theme';

에 사용자 정의 테마를 도입하세요. 위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

WeChat 미니 프로그램에서 순환 진행률 표시줄을 구현하는 방법

webpack에서 동적으로 파일 가져오기 구현

JavaScript 관련 요령

위 내용은 Angular2의 Material 사용 정보(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!