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

亚连
リリース: 2018-06-06 10:19:11
オリジナル
1842 人が閲覧しました

この記事では主に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: &#39;Material Icons&#39;;
 font-style: normal;
 font-weight: 400;
 src: url(assets/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
 src: local(&#39;Material Icons&#39;),
    local(&#39;MaterialIcons-Regular&#39;),
    url(assets/iconfont/MaterialIcons-Regular.woff2) format(&#39;woff2&#39;),
    url(assets/iconfont/MaterialIcons-Regular.woff) format(&#39;woff&#39;),
    url(assets/iconfont/MaterialIcons-Regular.ttf) format(&#39;truetype&#39;);
}
/* meterial icon的设定 */
.material-icons {
 font-family: &#39;Material Icons&#39;;
 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: &#39;liga&#39;;
}
ログイン後にコピー

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

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 &#39;~@angular/material/prebuilt-themes/deeppurple-amber.css&#39;; 
 @import &#39;~@angular/material/prebuilt-themes/indigo-pink.css&#39;; 
 @import &#39;~@angular/material/prebuilt-themes/pink-bluegrey.css&#39;; 
 @import &#39;~@angular/material/prebuilt-themes/purple-green.css&#39;;
ログイン後にコピー

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

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

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

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

関連記事:

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

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

JavaScriptの関連トリック

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート