Angular Material安装

https://github.com/angular/material2

https://material.angular.io/guide/getting-started

有关开始使用新Angular应用程序的帮助，请查看Angular CLI。

对于现有应用，请按照以下步骤开始使用Angular Material。

第1步：安装Angular Material，Angular CDK和Angular Animations

您可以使用npm或yarn命令行工具来安装包。在下面的示例中使用适合您的项目的任何一个。

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

yarn add @angular/material @angular/cdk @angular/animations

还可以使用master的最新更改构建快照。请注意，此快照构建不应被视为稳定，并且可能在版本之间中断。

npm install --save angular/material2-builds angular/cdk-builds angular/animations-builds

yarn add angular/material2-builds angular/cdk-builds angular/animations-builds

使用Angular CLI ng add命令将使用正确的依赖项更新Angular项目，执行配置更改并执行初始化代码。

ng add @angular/material

第2步：配置动画

安装动画包后，导入BrowserAnimationsModule到您的应用程序中以启用动画支持。

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';@NgModule({   ...   imports: [BrowserAnimationsModule],   ... })export class PizzaPartyAppModule { }

或者，您可以通过导入禁用动画NoopAnimationsModule。

import {NoopAnimationsModule} from '@angular/platform-browser/animations';@NgModule({   ...   imports: [NoopAnimationsModule],   ... })export class PizzaPartyAppModule { }

第3步：导入组件模块

为要使用的每个组件导入NgModule：

import {MatButtonModule, MatCheckboxModule} from '@angular/material';@NgModule({   ...   imports: [MatButtonModule, MatCheckboxModule],   ... })export class PizzaPartyAppModule { }

或者，您可以创建一个单独的NgModule，用于导入将在应用程序中使用的所有Angular Material组件。然后，您可以将此模块包含在您要使用组件的任何位置。

import {MatButtonModule, MatCheckboxModule} from '@angular/material';@NgModule({   imports: [MatButtonModule, MatCheckboxModule],   exports: [MatButtonModule, MatCheckboxModule], })export class MyOwnCustomMaterialModule { }

无论使用哪种方法，一定要导入角材料模块后角的BrowserModule，因为进口秩序事项NgModules。

第4步：包含主题

包含主题是将所有核心和主题样式应用于您的应用程序所必需的。

要开始使用预先构建的主题，请在应用程序中全局包含Angular Material的预构建主题之一。如果您使用的是Angular CLI，可以将其添加到styles.css：

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

如果您没有使用Angular CLI，则可以通过您的元素包含预构建的主题index.html。

有关主题的更多信息以及有关如何创建自定义主题的说明，请参阅主题指南。

第5步：手势支持

一些组件（mat-slide-toggle，mat-slider，matTooltip）依靠HammerJS的手势。为了获得这些组件的完整功能集，必须将HammerJS加载到应用程序中。

您可以通过npm，CDN（例如Google CDN）将HammerJS添加到您的应用程序，或直接从您的应用程序提供。

要通过npm安装，请使用以下命令：

npm install --save hammerjs

yarn add hammerjs

安装后，将其导入应用程序的入口点（例如src/main.ts）。

import 'hammerjs';

步骤6（可选）：添加材料图标

如果要将mat-icon组件与官方Material Design Icons一起使用，请在您的index.html。中加载图标字体。

有关使用“材质图标”的更多信息，请查看“ 材质图标指南”。

请注意，它mat-icon支持任何字体或svg图标; 使用材料图标是众多选项之一。

附录：配置SystemJS

如果你的项目使用模块加载SystemJS，你将需要添加@angular/material和@angular/cdk到SystemJS配置。

该@angular/cdk包由多个入口点组成。必须使用SystemJS单独注册每个入口点。

这里是其中示例性配置@angular/material，@angular/cdk/platform并且@angular/cdk/a11y被使用：

System.config({  // Existing configuration options   map: {    // ...     '@angular/material': 'npm:@angular/material/bundles/material.umd.js',    // CDK individual packages     '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',    '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',    // ...     'hammerjs': 'npm:hammerjs',   },  packages: {    //...     hammerjs: {main: './hammer.min.js', defaultExtension: 'js'}    //...   } });

Angular Material项目示例

material.angular.io - 我们使用Angular Material构建自己的文档！

组件列表

1.表单控件

自动完成

复选框

日期选择器

表格字段

输入

单选按钮

选择

滑块

滑动切换

2.导航

菜单

Sidenav

工具栏

3.布局

卡

分屏器

扩展面板

网格列表

列表

步进

标签

树

4.按钮和指示器

按键

按钮切换

徽章

芯片

图标

进步微调器

进度条

涟漪

5.弹出框和模式框

底部

对话

小吃店

提示

6.数据表

分页程序

排序标题

表

测试查询:

https://github.com/aveferrum/angular-material-demo

https://github.com/angular/material2/tree/master/src/material-examples

https://github.com/angular/material2-docs-content

https://stackoverflow.com/questions/49131420/cant-bind-to-datasource-since-it-isnt-a-known-property-of-mat-tree

https://stackoverflow.com/questions/43603515/uncaught-error-unexpected-directive-mycombobox-imported-by-the-module-appmod

import modules and not the components or services

declare components and not the modules or services.

provide services and not components or modules.

https://github.com/angular/material.angular.io

https://github.com/salansun/angular-material2-demo1/blob/master/package.json

https://blog.csdn.net/youhan26/article/details/51423613

https://blog.csdn.net/u014291497/article/details/60468967

测试步骤:

下载

https://github.com/angular/material2/

下载

https://github.com/aveferrum/angular-material-demo

以material2中的materials-examples中的tree-checklist为例

拷贝tree-checklist目录到angular-material-demo的src下，

修改app.module.ts

import 'hammerjs'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule } from '@angular/forms'; import { AppMaterialModule } from './app.material.module'; import { AppComponent, DialogContentComponent } from './app.component'; import { TreeChecklistExample } from './tree-checklist/tree-checklist-example'; import {MatTreeModule} from '@angular/material/tree'; @NgModule({   imports: [     BrowserModule,     FormsModule,     AppMaterialModule,     BrowserAnimationsModule,     MatTreeModule   ],   declarations: [AppComponent, DialogContentComponent,TreeChecklistExample],//   entryComponents: [DialogContentComponent],   bootstrap: [AppComponent], }) export class AppModule { }

修改app.component.html添加

index.html中的fonts.googleapis.com访问不了修改成如下

   执行npm install 和ng serve运行查看效果如下

The best docs available so far are available in the READMEs for each component in the GitHub repo.

For a component like SnackBar this would be: https://github.com/angular/material2/tree/master/src/lib/snack-bar

And button would be here: https://github.com/angular/material2/tree/master/src/lib/button

I believe (personally, not speaking for the team) that the team will start to prioritize the improvements of the docs at some time during Beta, but it's currently still in Alpha (Alpha.10 released today).

Michael Prentice

https://stbui.github.io/angular-material-app/materials/tabs

https://github.com/stbui/angular-material-app

https://github.com/seeschweiler/angular6-material/tree/master/src/app

https://loiane.com/2017/08/angular-hide-navbar-login-page/

https://github.com/loiane/angular-login-hide-navbar

https://www.bossable.com/1745/angularjs-material-design-contact-form/

angular material 布局练习:

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。