试试使用 Angular Material

环境

    • Angular: v9.0.4

 

    • Node: v12.16.1

 

    OS: win32 x64

添加AngularMaterial

在项目下执行命令

ng add @angular/material

虽然会有各种各样的问题,但按下Enter键即可设置默认值。

在src/index.html中,已加载来自Google APIs的Material Icons的样式表。

  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

angularMaterial已经被添加进来。
仅仅添加它还不够,需要在app.module.ts中进行配置以便使用。

app.module.ts 的中文翻译:应用模块.ts

我想尝试使用AngularMaterial的MatIcon。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+ import { MatIconModule } from '@angular/material/icon';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
+    MatIconModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

表示 shì)

<mat-icon>help</mat-icon>

请参考

    • AngularMaterial:https://material.angular.io/

Material Design:https://material.io/resources/icons/?style=baseline

广告
将在 10 秒后关闭
bannerAds