标签：material

以下是与标签 “material” 相关联的文章

angular2 学习笔记（2）- 添加 material 组件

| 代码 | 242 views

添加组件

  • 命令行 

    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>