# once-cdk

**Repository Path**: TreyLuck/once-cdk

## Basic Information

- **Project Name**: once-cdk
- **Description**: Angualr CDK
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-05
- **Last Updated**: 2023-11-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Angular

## README

#### 一、 Angular Material + Angular CDK 简单记录

1. 首先 init Angualr项目 (此步骤本次忽略)
2. 引入 material 和 CDK

```
npm install @angular/material @angular/cdk  @angular/animations（可选）

```

> 因为一些 Angular Material 组件依赖 Angular animations 模块，所以在使用Angular Material时需要安装 @angular/animations 模块 (一般情况下，新建项目时会有，如果没有，在第一步中一起安装 @angular/animations) 并且需要导入BrowserAnimationsModule。

```js
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```

3. 新建一个 module 统一管理 material的 module 引入，**在把 MaterialModule 导入到 AppModule 内**

```
ng g module material
```

4. styles.css 内引入主题样式、浮层样式等

```css
/* You can add global styles to this file, and also import other style files */
@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';
@import '~@angular/cdk/overlay-prebuilt.css';

```

5. 在 MaterialModule 内导入所用到的 module （MatButtonModule、DragDropModule、OverlayModule ... 等等）

```js
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { OverlayModule } from '@angular/cdk/overlay';
@NgModule({
  declarations: [

  ],
  imports: [
    CommonModule
  ],
  exports: [
    MatButtonModule,
    DragDropModule,
    OverlayModule
  ]
})
export class MaterialModule { }

```

#### 二、 Angular Material （参数、CDK属性等）详细使用，移步官方网站进行参考

Material地址：[Material](https://material.angular.cn/)

#### 三、 最终以一张草图效果收尾

![草图效果](https://gitee.com/TreyLuck/once-cdk/raw/master/src/assets/reveal/Snipaste_2022-07-05_15-52-43.png)