Angular 4 Materials
Angular 4 Materials
Materials为您的项目提供了许多内置模块如自动完成、日期选择器、滑块、菜单、网格和工具栏等功能。
要使用materials,我们需要导入包,Angular 2也具有上述所有功能,但它们是@angular/core模块的一部分。Angular 4提出了一个单独的模块@angular/materials,这有助于用户导入所需的materials。
要开始使用materials,你需要安装两个包: materials和cdk。materials组件某些功能依赖动画模块,因此您使用的时候需要导入相应的animation包,即@angular/animations。
npm install --save @angular/material @angular/cdk
现在让我们看看package.json.,@angular/material和@angular/cdk已经安装好了。
{ "name": "angularstart", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^4.0.0", "@angular/cdk": "^2.0.0-beta.8", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/material": "^2.0.0-beta.8", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "core-js": "^2.4.1", "rxjs": "^5.1.0", "zone.js": "^0.8.4" }, "devDependencies": { "@angular/cli": "1.2.0", "@angular/compiler-cli": "^4.0.0", "@angular/language-service": "^4.0.0", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "~3.0.1", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~3.0.4", "tslint": "~5.3.2", "typescript": "~2.3.3" } }
我们声明了为使用materials而安装的软件包。
我们在app.module.ts中导入模块,如下所示。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MdButtonModule, MdMenuModule, FormsModule, MdSidenavModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
在上面的文件中,我们从@angular/materials导入了以下模块。
import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';
这同样适用于如下所示的导入数组。
imports: [ BrowserModule, BrowserAnimationsModule, MdButtonModule, MdMenuModule, FormsModule, MdSidenavModule ]
app.component.ts如下所示:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { myData: Array<any>; constructor() {} }
现在让我们在app.component.html添加material。
<button md-button [mdMenuTriggerFor]="menu">Menu</button> <md-menu #menu="mdMenu"> <button md-menu-item> File </button> <button md-menu-item> Save As </button> </md-menu> <md-sidenav-container class="example-container"> <md-sidenav #sidenav class="example-sidenav"> Angular 4 </md-sidenav> <div class="example-sidenav-content"> <button type="button" md-button (click)="sidenav.open()"> Open sidenav </button> </div> </md-sidenav-container>
在上面的文件中,我们添加了菜单和侧导航。
菜单(Menu)
要添加菜单,使用<md-menu></md-menu> 。File和Save As目被添加到md-menu下的按钮中。一个主按钮到添加菜单中。通过使用 [mdMenuTriggerFor]=”menu”,并在<md-menu>中使用带#的菜单,可以为<md-menu>提供相同的参考。
侧边导航(SideNav)
要添加侧边导航,我们需要使用<md-sidenav-container></md-sidenav-container>。<md-sidenav></md-sidenav> 作为子级添加到容器中。我们添加了另一个div,它通过使用(click)=”sidenav.open()”来触发sidnav。以下是菜单和侧导航在浏览器中的显示
点击opensidenav,它会显示如下所示的侧栏:
点击菜单后,您将获得两个项目:File和另Save As,如下所示
现在让我们使用materials添加日期选择器。要添加日期选择器,我们需要导入日期选择器所需的模块。
在应用app.module.ts中,我们为日期选择器导入了如下所示的模块。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MdDatepickerModule, MdInputModule, MdNativeDateModule } from '@angular/material'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, MdDatepickerModule, MdInputModule, MdNativeDateModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
在这里,我们已经导入了一些模块,如MdDatepickerModule, MdInputModule和 MdNativeDateModule.。
app.component.ts如下所示:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { myData: Array<any>; constructor() {} }
app.component.html如下所示:
<md-input-container> <input mdInput [mdDatepicker]="picker" placeholder="Choose a date"> <button mdSuffix [mdDatepickerToggle]="picker"></button> </md-input-container> <md-datepicker #picker></md-datepicker>
下面是日期选择器在浏览器中的显示结果: