项目导入Angular Material 7流水账

day1:

1.  安装Angular Material，Angular CDK和Angular Animations。
    由于我的ng是10，这三包就装最近的10/11版本（血泪教训得出的）

	yarn add @angular/material^11.0.1 @angular/cdk^11.0.1 @angular/animations^10.0.1

2. 配置动画
        
	import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
	 
	@NgModule({
	  ...
	  imports: [BrowserAnimationsModule],
	  ...
	})
	export class AppModule{ }

3. 导入组件模块

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

4. 包含主题

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

5. 手势支持

	yarn add hammerjs
	import 'hammerjs';

6. 使用组件

	不生效。。。。

day2:

根据[Angular Material v10的文档](https://v10.material.angular.io/guide/getting-started)，安装步骤只需要两步

1. 
    ng add @angular/material
    =>
	? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
	? Set up global Angular Material typography styles? Yes
	? Set up browser animations for Angular Material? Yes
	 =>
    UPDATE package.json (3653 bytes)
    √ Packages installed successfully.
    UPDATE src/app/app.module.ts (6484 bytes)
    UPDATE src/theme/variables.scss (11170 bytes)r
    UPDATE src/index.html (1571 bytes)

2.
    import { MatSliderModule } from '@angular/material/slider';
    …
    @NgModule ({....
    imports: [...,
    MatSliderModule,
    …]
    })
    
    <mat-slider min="1" max="100" step="1" value="1"></mat-slider>