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小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。