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>