Angular2 でのマテリアルの使用について (詳細なチュートリアル)

この記事では主にAngular2でのマテリアル(マテリアルアイコンを含む)の使い方を紹介します

1.マテリアルnpmパッケージを導入します

npm install @angular/material @angular/cdk

2.新しいebiz-material.moduleを作成します。 .ts 素材を導入するモジュールの便利な管理

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]
})

素材コンポーネントを使用します

1. -material.module. tsにマテリアルコンポーネントのモジュールを導入します。例えば、checkbox

(https://material.angular.io/components/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を使用します

ダウンロードが失敗しても、問題なく動作します。 (大丈夫です)、githubからダウンロードして、iconfontフォルダを取り出して自分のプロジェクトディレクトリに置き、アイコンを使用する必要があるcss(scss)に導入するのが一般的です。 style.scss を使用してグローバルに使用します。

npm install material-design-icons

2. HTML の適切な位置にアイコンを配置します

@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';
}

マテリアルの組み込みテーマとカスタムテーマを使用します

1. マテリアル内のコンポーネントはテーマに応じて異なるスタイルで表示されますが、これらのスタイルは違いはマテリアル コンポーネントの内部に限定されており、カスタム コンポーネントのスタイルには影響しません。

2.styles.css ファイル名をstyles.scssに変更し、angular-cli.jsonファイル内でそれを

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

に変更します

3.style.scssファイルにマテリアルの事前構築済みテーマを導入します(合計4つ)

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

4. これらのテーマが適切ではないと思われる場合は、テーマをカスタマイズし、styles.scss と同じディレクトリに新しい theme.scss を作成し、カスタム テーマの内容を記述することができます (https://material .angular.io/guide/theming )

@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';

5. $mat-blue など、一部の色はここを参照できます

6 特定のコンポーネントをテーマにしたい場合は、参照できます。ここまで

7.styles.scss にカスタムテーマを導入します

@import './theme'; 以上が皆さんの参考になれば幸いです。

関連記事:

WeChatミニプログラムに円形のプログレスバーを実装する方法

webpackにファイルを動的にインポートする実装

JavaScriptの関連トリック

以上がAngular2 でのマテリアルの使用について (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。