时间:2021-05-26
1.引入material npm包
npm install @angular/material @angular/cdk2.新建一个ebiz-material.module.ts方便管理引入material的module
ng g module ebiz-material -app=ebiz-ui3.在app的根module中引入ebiz-material.module.ts
import { EbizMaterialModule } from './ebiz-material/ebiz-material.module';@NgModule({ imports: [..., EbizMaterialModule], declarations: [ ... ], schemas: [CUSTOM_ELEMENTS_SCHEMA]})使用material组件
1.首先在ebiz-material.module.ts中引入material组件的module,例如我们要用到checkbox
(https://material.angular.io/components/checkbox/overview),那就引入MatCheckboxModule,引入之后再exports。
import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { MatCheckboxModule } from '@angular/material';@NgModule({ imports: [CommonModule, MatCheckboxModule], declarations: [], exports: [ MatCheckboxModule ]})export class EbizMaterialModule { }2.在html文件中使用组件
<mat-checkbox [(ngModel)]="checked">Check me!</mat-checkbox>使用material-icon
1.引入material-icon
npm install material-design-icons如果下载失败(我是install失败了,也不去管它了,能用就行),可以到 github上 下载下来,然后取出iconfont文件夹放到自己的项目目录下,并且在需要用到图标的css(scss)中引入,一般情况我们会放在style.scss中全局去使用。
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(assets/iconfont/MaterialIcons-Regular.eot); src: local('Material Icons'), local('MaterialIcons-Regular'), url(assets/iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(assets/iconfont/MaterialIcons-Regular.woff) format('woff'), url(assets/iconfont/MaterialIcons-Regular.ttf) format('truetype');}.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';}2.在html的适当位置放上图标
<i class="material-icon">iconName<i>使用material内置theme以及自定义theme
1.material中的组件会根据theme的不同,会有不一样的样式呈现,但是这些样式的不同只局限于material组件内部,不会影响自定义组件的样式。
2.styles.css文件名改为styles.scss,并且在angular-cli.json文件中修改为
"styles": [ "styles.scss" ],3.在style.scss文件中引入material预建主题(总共4个)
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; @import '~@angular/material/prebuilt-themes/indigo-pink.css'; @import '~@angular/material/prebuilt-themes/pink-bluegrey.css'; @import '~@angular/material/prebuilt-themes/purple-green.css';4.如果觉得这些主题不适合,可以自定义主题,在styles.scss同级目录下新建一个theme.scss,并写上自定义主题的内容(https://material.angular.io/guide/theming)
@import '~@angular/material/theming';@include mat-core();$my-app-primary: mat-palette($mat-blue); $my-app-accent: mat-palette($mat-teal, A200, A100, A400); $my-app-warn: mat-palette($mat-red); $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);@include angular-material-theme($my-app-theme);5.在步骤3中用到了一些颜色,例如$mat-blue,可以参考这里
6.如果想要对某个组件进行主题特制,可以参考这里
7.在styles.scss中引入自定义主题
@import './theme';
总结
以上所述是小编给大家介绍的Material(包括Material Icon)在Angular2中的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
其实就只有一条sql语句selectmaterial_id,material_num,material_name,material_type,material_
1.说明angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。2
准备Angular2环境ng-bootstrap是基于Angular2的,因此需要先准备Angular2的环境。使用ng-bootstrap下载ng-boots
在Angular1.x中,我们使用Promise来处理各种异步。但是在angular2中,使用的是ReactiveExtensions(Rx)的Observab
AndroidSwipereFreshLayout下拉刷新我们都知道现在android5.0以后就提倡使用MaterialDesign设计了。在Material