添加组件
-
命令行
npm install --save @angular/material material-design-icons @angular/animations @angular/flex-layout hammerjs
添加配置
-
app.module.ts
imports: [ ... BrowserAnimationsModule, MdToolbarModule, MdButtonModule, MdMenuModule, MdIconModule, FlexLayoutModule, ],
-
style.css
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css'; /* fallback */ @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }
测试页面
-
html demo
<md-toolbar color="primary"> <button md-icon-button [mdMenuTriggerFor]="menu1"> <md-icon>more_vert</md-icon> </button> <md-menu #menu1="mdMenu"> <button md-menu-item> <md-icon>fingerprint</md-icon> <span>Login</span> </button> <button md-menu-item disabled> <md-icon>annoucement</md-icon> <span>Issues</span> </button> <button md-menu-item> <md-icon>notifications_off</md-icon> <span>No Alerts</span> </button> </md-menu> <span>fj's blog</span> </md-toolbar>