欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Angular Material,Angular CDK试用(Angular 7)

程序员文章站 2022-06-07 22:02:00
...

本文代码已上传到github: 

 https://github.com/minicherry/taoBao 

 1.Angular Material,Angular CDK基础配置引入 

此部分参考: 

juejin.im/post/5a7272…

安装配置从官网学习: 

material.angular.io/guide/getti…

下载安装包: 

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

安装: 

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

引入Angular Material到项目中: 

新建material.module.ts用于统一导入导出各种组件 

ng g module material

material.module.ts: 

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import {MatInputModule} from '@angular/material'; 
 @NgModule({ 
 declarations: [], 
 imports: [
    CommonModule,
  ], 
 exports: [
    MatInputModule
  ]
}) 
export class MaterialModule { } 
复制代码

 app.module.ts: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MaterialModule } from '../material/material.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } 复制代码

 app.component.html 

<mat-form-field class="example-full-width">
  <textarea matInput placeholder="Leave a comment"></textarea>
</mat-form-field> 复制代码

便可显示出组件。 

引入主题:

 如果使用的是Angular CLI,则在styles.css中引入如下样式: 

@import "[email protected]/material/prebuilt-themes/indigo-pink.css"
复制代码

关于主题参考链接如下: 

material.angular.io/guide/themi…

显示结果如下图: 


手势操作: 

安装hammerjs: 

npm install --save hammerjs 

在工程的入口引入(e.g.src/main.ts):

import 'hammerjs'; 
复制代码

添加Material Icons: 

安装Material Icons: 

npm install material-design-icons 

在material.module.ts中引入MatIconModule: 

import {MatInputModule, MatIconModule } from '@angular/material';

@NgModule({
  declarations: [],
  imports: [
    MatIconModule
  ],
  exports: [
    MatIconModule
  ]

})
export class MaterialModule { }
复制代码

app.component.html中使用即可: 

<mat-icon>menu<mat-icon> 复制代码

显示结果如下图:


参考链接: 

google.github.io/material-de…

2.Angular CDK试用拖动 

material.module.ts引入: 

import {DragDropModule} from '@angular/cdk/drag-drop';

@NgModule({
  declarations: [],
  imports: [
    ...
  ],
  exports: [
    ...
    DragDropModule
  ]
})
export class MaterialModule { }
app.component.html使用:
<div class="example-box" cdkDragLockAxis="y" cdkDrag>
  I can only be dragged up/down
</div>
<div class="example-box" cdkDragLockAxis="x" cdkDrag>
  I can only be dragged left/right
</div> 复制代码

显示结果:


样式可调整修改。 

参考如下: 

material.angular.io/cdk/drag-dr…



转载于:https://juejin.im/post/5c467369f265da61682baa50