Angular Material的配置

请将以下内容用中文进行翻译:

关于使用Angular Material进行设置的方法备忘录

配置方法

    • ターミナル上で npm install –save @angular/material @angular/cdk @angular/animations と入力。

BrowserAnimationsModuleをimport

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class AppModule { }
    themeを設定

在这里所说的”theme”是指在应用程序中使用的Material风格。已经提前准备好了一些预先构建的主题。也有自己创建主题的方法,但这将在后面提到。本次使用预先构建的主题。在style.css中写入以下内容。

/* prebuildのテーマは4つ準備されているので好みで選択 */
 @import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
/* @import "~@angular/material/prebuilt-themes/indigo-pink.css"; */
/* @import "~@angular/material/prebuilt-themes/pink-bluegrey"; */
/* @import "~@angular/material/prebuilt-themes/purple-green.css"; */
    使用するコンポーネントを都度インポートする
import { MatButtonModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MatButtonModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
    適用されているかを確認
<button mat-raised-button color="primary">ボタン</button>
スクリーンショット 2018-12-18 10.26.42.png
广告
将在 10 秒后关闭
bannerAds