在Angular 6中,开始使用Material Design 6

分享于 

3分钟阅读

Angular

  繁體

入门

首先,确保使用Angular 6项目创建了Angular CLI 6.


npm install --save @angular/cdk
npm install --save @angular/material

接下来,你需要将Angular Material模块添加到应用程序模块app.module.ts

从导入开始:


import { MaterialModule } from '@angular/material';

然后简单地将它添加到imports数组中:


 @NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 MaterialModule
 ],
 providers: [],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

某些组件依赖于hammerjs,因此还需要安装这些依赖项:


npm install --save hammerjs 
npm install --save-dev @types/hammerjs

然后确保在app.module.ts中导入hammer


 import 'hammerjs';

接下来打开tsconfig.app.json并将hammerjs添加到types数组:


 "types": [
 "hammerjs"
 ]

要使Material Design 6正常工作,还需要做更多的事情。

打开项目styles.css,并导入Roboto字体和Material图标,然后将Roboto设置为body元素的字体:


 @import '~https://fonts.googleapis.com/icon?family=Material+Icons';
 @import '~https://fonts.googleapis.com/icon?family=Roboto';
 body {
 font-family: Roboto;
 }

之所以这样,是因为Material6组件依赖于这些资源。

添加主题

在使用Material组件之前,我们需要添加一个主题,在默认安装Angular Metarial2时,有许多内置的主题可以从/node_modules/angular/material/prebuilt-themes/文件夹中获得。

确保查找所有可用的主题,然后在project styles.css文件中选择一个导入主题:


 @import '~@angular/material/prebuilt-themes/indigo-pink.css';

Material卡组件测试

如果成功安装,并配置了Material2,现在可以测试它的一些组件,以确保一切正常。

打开app.component.html,然后添加以下示例:


 <md-card >
 <md-card-header>Example MD Card</md-card-header>
 <button md-button>A Button </button>
 <button md-raised-button>Another Button </button>
 <button md-raised-button color="primary">A 3rd Button</button>

 <button md-raised-button color="accent">The 4th Button</button>

 <md-card-footer>
 <button md-fab>
 <md-icon>add circle</md-icon>
 </button>
 </md-card-footer>

 </md-card>


STA  angular  DES  MAT  设计  Material  
相关文章