4 | 5 |
7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 |
27 | 28 |
30 | 31 |
33 | 34 |
FocusMonitor使用(监控元素focus状态，以及focus来源是什么)
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/src/app/accessibility/focus-monitor/cdk-focus-monitor.component.less:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuacy/angular-cdk-study/83abe74d0a6473d544ab3320fe696c654642da80/src/app/accessibility/focus-monitor/cdk-focus-monitor.component.less
--------------------------------------------------------------------------------
/src/app/accessibility/focus-monitor/cdk-focus-monitor.component.ts:
--------------------------------------------------------------------------------
1 | import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, Renderer2} from '@angular/core';
2 | import {FocusMonitor} from "@angular/cdk/a11y";
3 |
4 | @Component({
5 | selector: 'app-cdk-focus-monitor',
6 | templateUrl: './cdk-focus-monitor.component.html',
7 | styleUrls: ['./cdk-focus-monitor.component.less']
8 | })
9 | export class CdkFocusMonitorComponent implements AfterViewInit, OnDestroy {
10 |
11 | constructor(private _elementRef: ElementRef,
12 | private _focusMonitor: FocusMonitor) {
13 | }
14 |
15 | ngAfterViewInit() {
16 | this._focusMonitor.monitor(this._elementRef.nativeElement, true).subscribe(mode => {
17 | console.log('元素获取到焦点 focused 来源 ' + mode);
18 | });
19 | }
20 |
21 | ngOnDestroy() {
22 | this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
23 | }
24 |
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/accessibility/focus-trap-factory/cdk-focus-trap-factory.component.html:
--------------------------------------------------------------------------------
1 | FocusTrapFactory使用(给元素添加cdkFocusTrap指令)
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/src/app/accessibility/focus-trap-factory/cdk-focus-trap-factory.component.less:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuacy/angular-cdk-study/83abe74d0a6473d544ab3320fe696c654642da80/src/app/accessibility/focus-trap-factory/cdk-focus-trap-factory.component.less
--------------------------------------------------------------------------------
/src/app/accessibility/focus-trap-factory/cdk-focus-trap-factory.component.ts:
--------------------------------------------------------------------------------
1 | import {AfterViewInit, Component, ElementRef} from '@angular/core';
2 | import {FocusTrap, FocusTrapFactory} from "@angular/cdk/a11y";
3 |
4 | @Component({
5 | selector: 'app-cdk-focus-trap-factory',
6 | templateUrl: './cdk-focus-trap-factory.component.html',
7 | styleUrls: ['./cdk-focus-trap-factory.component.less']
8 | })
9 | export class CdkFocusTrapFactoryComponent implements AfterViewInit {
10 |
11 | private _focusTrap: FocusTrap;
12 |
13 | constructor(private _elementRef: ElementRef,
14 | private _focusTrapFactory: FocusTrapFactory) {
15 | }
16 |
17 | ngAfterViewInit() {
18 | this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
19 | }
20 |
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/accessibility/focus/cdk-focus.component.html:
--------------------------------------------------------------------------------
1 | FocusKeyManager使用
2 | 3 |InteractivityChecker使用
2 | 3 |上面button是否disable: {{disable}}
4 |上面button是否visible: {{visible}}
5 |上面button是否可以tabable: {{tabable}}
6 |上面button是否可以focusable: {{focusable}}
7 | -------------------------------------------------------------------------------- /src/app/accessibility/interactivity-checker/cdk-interactivity-checker.component.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuacy/angular-cdk-study/83abe74d0a6473d544ab3320fe696c654642da80/src/app/accessibility/interactivity-checker/cdk-interactivity-checker.component.less -------------------------------------------------------------------------------- /src/app/accessibility/interactivity-checker/cdk-interactivity-checker.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; 2 | import {InteractivityChecker} from "@angular/cdk/a11y"; 3 | 4 | @Component({ 5 | selector: 'app-cdk-interactivity-checker', 6 | templateUrl: './cdk-interactivity-checker.component.html', 7 | styleUrls: ['./cdk-interactivity-checker.component.less'] 8 | }) 9 | export class CdkInteractivityCheckerComponent implements OnInit { 10 | 11 | @ViewChild('interactivityCheckerButton') button: ElementRef; 12 | disable: boolean; 13 | visible: boolean; 14 | tabable: boolean; 15 | focusable: boolean; 16 | 17 | constructor(private _interactivityChecker: InteractivityChecker) { 18 | } 19 | 20 | ngOnInit() { 21 | this.disable = this._interactivityChecker.isDisabled(this.button.nativeElement); 22 | this.visible = this._interactivityChecker.isVisible(this.button.nativeElement); 23 | this.tabable = this._interactivityChecker.isTabbable(this.button.nativeElement); 24 | this.focusable = this._interactivityChecker.isFocusable(this.button.nativeElement); 25 | } 26 | 27 | } 28 | -------------------------------------------------------------------------------- /src/app/accessibility/live-announcer/cdk-live-announcer.component.html: -------------------------------------------------------------------------------- 1 |LiveAnnouncer使用(在body上append一个内容，一般在做html aria的时候用到)
-------------------------------------------------------------------------------- /src/app/accessibility/live-announcer/cdk-live-announcer.component.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuacy/angular-cdk-study/83abe74d0a6473d544ab3320fe696c654642da80/src/app/accessibility/live-announcer/cdk-live-announcer.component.less -------------------------------------------------------------------------------- /src/app/accessibility/live-announcer/cdk-live-announcer.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import {LiveAnnouncer} from "@angular/cdk/a11y"; 3 | 4 | @Component({ 5 | selector: 'app-cdk-live-announcer', 6 | templateUrl: './cdk-live-announcer.component.html', 7 | styleUrls: ['./cdk-live-announcer.component.less'] 8 | }) 9 | export class CdkLiveAnnouncerComponent { 10 | 11 | index = 1; 12 | 13 | constructor(private liveAnnouncer: LiveAnnouncer) { 14 | liveAnnouncer.announce("Hey Google"); 15 | setTimeout(() => { 16 | this.timerTask(); 17 | }, 3000); 18 | } 19 | 20 | timerTask() { 21 | this.index = this.index + 1; 22 | this.liveAnnouncer.announce("Hey Google " + this.index.toString(), "assertive"); 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {CommonModule} from '@angular/common'; 3 | import {CdkCoercionModule} from './coercion/cdk-coercion.module'; 4 | import {RouterModule, Routes} from '@angular/router'; 5 | import {CdkLayoutModule} from './layout/cdk-layout.module'; 6 | import {CdkKeyCodesModule} from './keycodes/cdk-key-codes.module'; 7 | import {CdkAccessibilityModule} from './accessibility/cdk-accessibility.module'; 8 | import {CdkBidiModule} from './bidi/cdk-bidi.module'; 9 | import {CdkScrollingModule} from './scrolling/cdk-scrolling.module'; 10 | import {CdkLPortalModule} from './portal/cdk-portal.module'; 11 | import {CdkOverlayModule} from './overlay/cdk-overlay.module'; 12 | import {TipComponent} from './tip/tip.component'; 13 | import {CdkPlatformModule} from './platform/cdk-platform.module'; 14 | import {CdkObserversModule} from './observers/cdk-observers.module'; 15 | import {CdkDragDropModule} from './drag-drop/cdk-drag-drop.module'; 16 | import {CdkTextFieldModule} from "./text-field/cdk-text-field.module"; 17 | import {CdkWorkflowStepperModule} from "./workflow-stepper/cdk-workflow-stepper.module"; 18 | import {CdkBaseTableModule} from './table/cdk-base-table.module'; 19 | 20 | const appRoutes: Routes = [ 21 | { 22 | path: 'coercion', 23 | loadChildren: () => CdkCoercionModule 24 | }, { 25 | path: 'layout', 26 | loadChildren: () => CdkLayoutModule 27 | }, { 28 | path: 'keycodes', 29 | loadChildren: () => CdkKeyCodesModule 30 | }, { 31 | path: 'accessibility', 32 | loadChildren: () => CdkAccessibilityModule 33 | }, { 34 | path: 'bidi', 35 | loadChildren: () => CdkBidiModule 36 | }, { 37 | path: 'scrolling', 38 | loadChildren: () => CdkScrollingModule 39 | }, { 40 | path: 'portal', 41 | loadChildren: () => CdkLPortalModule 42 | }, { 43 | path: 'overlay', 44 | loadChildren: () => CdkOverlayModule 45 | }, { 46 | path: 'platform', 47 | loadChildren: () => CdkPlatformModule 48 | }, { 49 | path: 'observers', 50 | loadChildren: () => CdkObserversModule 51 | }, { 52 | path: 'dragDrop', 53 | loadChildren: () => CdkDragDropModule 54 | }, { 55 | path: 'stepper', 56 | loadChildren: () => CdkWorkflowStepperModule 57 | }, { 58 | path: 'table', 59 | loadChildren: () => CdkBaseTableModule 60 | }, { 61 | path: 'textField', 62 | loadChildren: () => CdkTextFieldModule 63 | }, { 64 | path: 'tip', 65 | component: TipComponent 66 | }, { 67 | path: '', 68 | redirectTo: '/coercion', 69 | pathMatch: 'full' 70 | }, 71 | ]; 72 | 73 | @NgModule({ 74 | imports: [ 75 | RouterModule.forRoot(appRoutes), 76 | CommonModule 77 | ], 78 | exports: [ 79 | RouterModule 80 | ], 81 | providers: [] 82 | }) 83 | export class AppRoutingModule { 84 | } 85 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |@angular/cdk 内容学习
2 | 20 |3 | 从左到右排列 4 |
5 | 6 |7 | 从右到左排列 8 |
9 |
10 |
11 |
19 |
20 | 第一个位置--内容靠左
13 |
14 | 第二个位置--内容靠右
16 |
17 |
18 | 21 | 可以动态切换方向 22 |
23 | 24 | -------------------------------------------------------------------------------- /src/app/bidi/cdk-bidi.component.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuacy/angular-cdk-study/83abe74d0a6473d544ab3320fe696c654642da80/src/app/bidi/cdk-bidi.component.less -------------------------------------------------------------------------------- /src/app/bidi/cdk-bidi.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, Inject, OnDestroy, OnInit} from '@angular/core'; 2 | import {DIR_DOCUMENT, Directionality} from '@angular/cdk/bidi'; 3 | import {Subscription} from "rxjs"; 4 | 5 | @Component({ 6 | selector: 'app-cdk-bidi', 7 | templateUrl: './cdk-bidi.component.html', 8 | styleUrls: ['./cdk-bidi.component.less'] 9 | }) 10 | export class CdkBidiComponent implements OnInit, OnDestroy { 11 | dir = "rtl"; 12 | /** Subscription to the Directionality change EventEmitter. */ 13 | private _dirChangeSubscription = Subscription.EMPTY; 14 | 15 | constructor( 16 | @Inject(DIR_DOCUMENT) public dirDoc: any, 17 | public directionality: Directionality 18 | ) { 19 | this._dirChangeSubscription = directionality.change.subscribe(() => { 20 | }); 21 | } 22 | 23 | ngOnInit() { 24 | // 获取document 25 | console.log(this.dirDoc); 26 | // ltr 获取当前值 27 | const dir = this.directionality.value; 28 | console.log("dir is ", dir); 29 | } 30 | 31 | ngOnDestroy() { 32 | this._dirChangeSubscription.unsubscribe(); 33 | } 34 | 35 | switchDir() { 36 | if (this.dir === "rtl") { 37 | this.dir = "ltr"; 38 | } else { 39 | this.dir = "rtl"; 40 | } 41 | } 42 | 43 | dirChange() { 44 | console.log('aaa'); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/app/bidi/cdk-bidi.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {CommonModule} from '@angular/common'; 3 | import {RouterModule} from '@angular/router'; 4 | import {CdkBidiRoutingModule} from './cdk-bidi-routing.module'; 5 | import {CdkBidiComponent} from './cdk-bidi.component'; 6 | import {BidiModule} from "@angular/cdk/bidi"; 7 | 8 | @NgModule({ 9 | imports: [ 10 | CommonModule, 11 | RouterModule, 12 | BidiModule, 13 | CdkBidiRoutingModule 14 | ], 15 | declarations: [ 16 | CdkBidiComponent 17 | ] 18 | }) 19 | export class CdkBidiModule { 20 | } 21 | -------------------------------------------------------------------------------- /src/app/coercion/cdk-coercion-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import {RouterModule, Routes} from '@angular/router'; 4 | import {CdkCoercionComponent} from './cdk-coercion.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: CdkCoercionComponent 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [ 15 | RouterModule.forChild(routes), 16 | CommonModule 17 | ], 18 | exports: [ 19 | RouterModule 20 | ], 21 | providers: [] 22 | }) 23 | export class CdkCoercionRoutingModule { } 24 | -------------------------------------------------------------------------------- /src/app/coercion/cdk-coercion.component.html: -------------------------------------------------------------------------------- 1 |coercion cdk 里面常用转换工具类
2 |转boolean: coerceBooleanProperty
3 |转number: coerceNumberProperty
4 |是否是number: _isNumberValue
5 |转换为数组: coerceArray
6 |转CSS像素: coerceCssPixelValue
7 | -------------------------------------------------------------------------------- /src/app/coercion/cdk-coercion.component.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuacy/angular-cdk-study/83abe74d0a6473d544ab3320fe696c654642da80/src/app/coercion/cdk-coercion.component.less -------------------------------------------------------------------------------- /src/app/coercion/cdk-coercion.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, OnInit} from '@angular/core'; 2 | import { 3 | _isNumberValue, 4 | coerceArray, 5 | coerceBooleanProperty, 6 | coerceCssPixelValue, 7 | coerceNumberProperty 8 | } from "@angular/cdk/coercion"; 9 | 10 | @Component({ 11 | selector: 'app-cdk-coercion', 12 | templateUrl: './cdk-coercion.component.html', 13 | styleUrls: ['./cdk-coercion.component.less'] 14 | }) 15 | export class CdkCoercionComponent implements OnInit { 16 | 17 | constructor() { 18 | } 19 | 20 | ngOnInit() { 21 | // 转boolean 22 | console.log("转boolean: " + coerceBooleanProperty('false')); 23 | // 转number 24 | console.log("转number: " + coerceNumberProperty(10.5)); 25 | console.log("是否是number类型: " + coerceNumberProperty('a', this.coerceNumberFallback())); 26 | console.log("是否是number类型: " + _isNumberValue('a')); 27 | // 转数组 28 | console.log("转换为数组: " + coerceArray(1204)); 29 | // 转CSS pixel value 30 | console.log("转CSS像素: " + coerceCssPixelValue('10')); 31 | } 32 | 33 | /** 34 | * 当转number的时候发生了错误时候的返回值 35 | */ 36 | coerceNumberFallback() { 37 | return 10; 38 | } 39 | 40 | } 41 | -------------------------------------------------------------------------------- /src/app/coercion/cdk-coercion.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {CommonModule} from '@angular/common'; 3 | import {CdkCoercionComponent} from './cdk-coercion.component'; 4 | import {CdkCoercionRoutingModule} from './cdk-coercion-routing.module'; 5 | import {RouterModule} from '@angular/router'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | RouterModule, 11 | CdkCoercionRoutingModule 12 | ], 13 | declarations: [ 14 | CdkCoercionComponent 15 | ] 16 | }) 17 | export class CdkCoercionModule { 18 | } 19 | -------------------------------------------------------------------------------- /src/app/drag-drop/cdk-drag-drop-routing.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {CommonModule} from '@angular/common'; 3 | import {RouterModule, Routes} from '@angular/router'; 4 | import {CdkDragDropComponent} from './cdk-drag-drop.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: CdkDragDropComponent 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [ 15 | RouterModule.forChild(routes), 16 | CommonModule 17 | ], 18 | exports: [ 19 | RouterModule 20 | ], 21 | providers: [] 22 | }) 23 | export class CdkDragDropRoutingModule { } 24 | -------------------------------------------------------------------------------- /src/app/drag-drop/cdk-drag-drop.component.html: -------------------------------------------------------------------------------- 1 | 2 |4 | 5 |
7 | 8 |
10 | 11 |
13 | 14 |
16 | 17 |
19 | 20 |
22 | 23 |
25 | 26 |
28 | 29 |
31 | 32 |
controlling with item
2 |
3 |
22 |
23 | Available numbers
4 | 5 |
13 |
21 |
18 | {{number}}
19 |
20 |
24 |
42 |
--------------------------------------------------------------------------------
/src/app/drag-drop/controlling-with-item/drag-drop-controlling-with-item.component.less:
--------------------------------------------------------------------------------
1 | .example-container {
2 | width: 400px;
3 | max-width: 100%;
4 | margin: 0 25px 25px 0;
5 | display: inline-block;
6 | vertical-align: top;
7 | }
8 |
9 | .example-list {
10 | border: solid 1px #ccc;
11 | min-height: 60px;
12 | background: white;
13 | border-radius: 4px;
14 | overflow: hidden;
15 | display: block;
16 | }
17 |
18 | .example-box {
19 | padding: 20px 10px;
20 | border-bottom: solid 1px #ccc;
21 | color: rgba(0, 0, 0, 0.87);
22 | display: flex;
23 | flex-direction: row;
24 | align-items: center;
25 | justify-content: space-between;
26 | box-sizing: border-box;
27 | cursor: move;
28 | background: white;
29 | font-size: 14px;
30 | }
31 |
32 | .cdk-drag-preview {
33 | box-sizing: border-box;
34 | border-radius: 4px;
35 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
36 | 0 8px 10px 1px rgba(0, 0, 0, 0.14),
37 | 0 3px 14px 2px rgba(0, 0, 0, 0.12);
38 | }
39 |
40 | .cdk-drag-placeholder {
41 | opacity: 0;
42 | }
43 |
44 | .cdk-drag-animating {
45 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
46 | }
47 |
48 | .example-box:last-child {
49 | border: none;
50 | }
51 |
52 | .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
53 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
54 | }
55 |
--------------------------------------------------------------------------------
/src/app/drag-drop/controlling-with-item/drag-drop-controlling-with-item.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | import {CdkDrag, CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
3 |
4 | @Component({
5 | selector: 'app-drag-drop-controlling-with-item',
6 | templateUrl: './drag-drop-controlling-with-item.component.html',
7 | styleUrls: ['./drag-drop-controlling-with-item.component.less']
8 | })
9 | export class DragDropControllingWithItemComponent {
10 |
11 | all = [1, 2, 3, 4, 5, 6, 7, 8, 9];
12 | even = [10];
13 |
14 | drop(event: CdkDragDropEven numbers
25 | 26 |
34 |
41 | {{number}}
39 |
40 | customizing drag place holder
2 |
3 |
--------------------------------------------------------------------------------
/src/app/drag-drop/customizing-drag-place-holder/drag-drop-customizing-drag-place-holder.component.less:
--------------------------------------------------------------------------------
1 | .example-list {
2 | width: 500px;
3 | max-width: 100%;
4 | border: solid 1px #ccc;
5 | min-height: 60px;
6 | display: block;
7 | background: white;
8 | border-radius: 4px;
9 | overflow: hidden;
10 | }
11 |
12 | .example-box {
13 | padding: 20px 10px;
14 | border-bottom: solid 1px #ccc;
15 | color: rgba(0, 0, 0, 0.87);
16 | display: flex;
17 | flex-direction: row;
18 | align-items: center;
19 | justify-content: space-between;
20 | box-sizing: border-box;
21 | cursor: move;
22 | background: white;
23 | font-size: 14px;
24 | }
25 |
26 | .cdk-drag-preview {
27 | box-sizing: border-box;
28 | border-radius: 4px;
29 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
30 | 0 8px 10px 1px rgba(0, 0, 0, 0.14),
31 | 0 3px 14px 2px rgba(0, 0, 0, 0.12);
32 | }
33 |
34 | .cdk-drag-animating {
35 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
36 | }
37 |
38 | .example-box:last-child {
39 | border: none;
40 | }
41 |
42 | .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
43 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
44 | }
45 |
46 | .example-custom-placeholder {
47 | background: #ccc;
48 | border: dotted 3px #999;
49 | min-height: 60px;
50 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
51 | }
52 |
--------------------------------------------------------------------------------
/src/app/drag-drop/customizing-drag-place-holder/drag-drop-customizing-drag-place-holder.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {CdkDragDrop, moveItemInArray} from "@angular/cdk/drag-drop";
3 |
4 | @Component({
5 | selector: 'app-drag-drop-customizing-drag-place-holder',
6 | templateUrl: './drag-drop-customizing-drag-place-holder.component.html',
7 | styleUrls: ['./drag-drop-customizing-drag-place-holder.component.less']
8 | })
9 | export class DragDropCustomizingDragPlaceHolderComponent {
10 |
11 | movies = [
12 | 'Episode I - The Phantom Menace',
13 | 'Episode II - Attack of the Clones',
14 | 'Episode III - Revenge of the Sith',
15 | 'Episode IV - A New Hope',
16 | 'Episode V - The Empire Strikes Back',
17 | 'Episode VI - Return of the Jedi',
18 | 'Episode VII - The Force Awakens',
19 | 'Episode VIII - The Last Jedi'
20 | ];
21 |
22 | drop(event: CdkDragDrop
4 |
5 | {{movie}}
6 |
7 | customizing drag preview
2 |
3 |
--------------------------------------------------------------------------------
/src/app/drag-drop/customizing-drag-preview/drag-drop-customizing-drag-preview.component.less:
--------------------------------------------------------------------------------
1 | .example-list {
2 | width: 500px;
3 | max-width: 100%;
4 | border: solid 1px #ccc;
5 | min-height: 60px;
6 | display: block;
7 | background: white;
8 | border-radius: 4px;
9 | overflow: hidden;
10 | }
11 |
12 | .example-box {
13 | padding: 20px 10px;
14 | border-bottom: solid 1px #ccc;
15 | color: rgba(0, 0, 0, 0.87);
16 | display: flex;
17 | flex-direction: row;
18 | align-items: center;
19 | justify-content: space-between;
20 | box-sizing: border-box;
21 | cursor: move;
22 | background: white;
23 | font-size: 14px;
24 | }
25 |
26 | .cdk-drag-preview {
27 | box-sizing: border-box;
28 | border-radius: 4px;
29 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
30 | 0 8px 10px 1px rgba(0, 0, 0, 0.14),
31 | 0 3px 14px 2px rgba(0, 0, 0, 0.12);
32 | }
33 |
34 | .cdk-drag-placeholder {
35 | opacity: 0;
36 | }
37 |
38 | .cdk-drag-animating {
39 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
40 | }
41 |
42 | .example-box:last-child {
43 | border: none;
44 | }
45 |
46 | .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
47 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
48 | }
49 |
--------------------------------------------------------------------------------
/src/app/drag-drop/customizing-drag-preview/drag-drop-customizing-drag-preview.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
3 |
4 | @Component({
5 | selector: 'app-drag-drop-customizing-drag-preview',
6 | templateUrl: './drag-drop-customizing-drag-preview.component.html',
7 | styleUrls: ['./drag-drop-customizing-drag-preview.component.less']
8 | })
9 | export class DragDropCustomizingDragPreviewComponent {
10 |
11 | movies = [
12 | {
13 | title: 'Episode I - The Phantom Menace',
14 | poster: 'https://upload.wikimedia.org/wikipedia/en/4/40/Star_Wars_Phantom_Menace_poster.jpg'
15 | },
16 | {
17 | title: 'Episode II - Attack of the Clones',
18 | poster: 'https://upload.wikimedia.org/wikipedia/en/3/32/Star_Wars_-_Episode_II_Attack_of_the_Clones_%28movie_poster%29.jpg'
19 | },
20 | {
21 | title: 'Episode III - Revenge of the Sith',
22 | poster: 'https://upload.wikimedia.org/wikipedia/en/9/93/Star_Wars_Episode_III_Revenge_of_the_Sith_poster.jpg'
23 | },
24 | {
25 | title: 'Episode IV - A New Hope',
26 | poster: 'https://upload.wikimedia.org/wikipedia/en/8/87/StarWarsMoviePoster1977.jpg'
27 | },
28 | {
29 | title: 'Episode V - The Empire Strikes Back',
30 | poster: 'https://upload.wikimedia.org/wikipedia/en/3/3c/SW_-_Empire_Strikes_Back.jpg'
31 | },
32 | {
33 | title: 'Episode VI - Return of the Jedi',
34 | poster: 'https://upload.wikimedia.org/wikipedia/en/b/b2/ReturnOfTheJediPoster1983.jpg'
35 | },
36 | {
37 | title: 'Episode VII - The Force Awakens',
38 | poster: 'https://upload.wikimedia.org/wikipedia/en/a/a2/Star_Wars_The_Force_Awakens_Theatrical_Poster.jpg'
39 | },
40 | {
41 | title: 'Episode VIII - The Last Jedi',
42 | poster: 'https://upload.wikimedia.org/wikipedia/en/7/7f/Star_Wars_The_Last_Jedi.jpg'
43 | }
44 | ];
45 |
46 | // tslint:enable:max-line-length
47 |
48 | drop(event: CdkDragDrop<{ title: string, poster: string }[]>) {
49 | moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
50 | }
51 |
52 | }
53 |
--------------------------------------------------------------------------------
/src/app/drag-drop/disable-drag/drag-drop-disable-drag.component.html:
--------------------------------------------------------------------------------
1 |
4 | {{movie.title}}
5 | ![]()
6 |
7 | disable drag
2 | 3 |
4 |
5 |
6 |
15 |
16 |
--------------------------------------------------------------------------------
/src/app/drag-drop/disable-drag/drag-drop-disable-drag.component.less:
--------------------------------------------------------------------------------
1 | .example-list {
2 | width: 500px;
3 | max-width: 100%;
4 | border: solid 1px #ccc;
5 | min-height: 60px;
6 | display: block;
7 | background: white;
8 | border-radius: 4px;
9 | overflow: hidden;
10 | }
11 |
12 | .example-box {
13 | padding: 20px 10px;
14 | border-bottom: solid 1px #ccc;
15 | color: rgba(0, 0, 0, 0.87);
16 | display: flex;
17 | flex-direction: row;
18 | align-items: center;
19 | justify-content: space-between;
20 | box-sizing: border-box;
21 | cursor: move;
22 | background: white;
23 | font-size: 14px;
24 | }
25 |
26 | .cdk-drag-preview {
27 | box-sizing: border-box;
28 | border-radius: 4px;
29 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
30 | 0 8px 10px 1px rgba(0, 0, 0, 0.14),
31 | 0 3px 14px 2px rgba(0, 0, 0, 0.12);
32 | }
33 |
34 | .cdk-drag-placeholder {
35 | opacity: 0;
36 | }
37 |
38 | .cdk-drag-animating {
39 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
40 | }
41 |
42 | .example-box:last-child {
43 | border: none;
44 | }
45 |
46 | .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
47 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
48 | }
49 |
--------------------------------------------------------------------------------
/src/app/drag-drop/disable-drag/drag-drop-disable-drag.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | import {CdkDragDrop, moveItemInArray} from "@angular/cdk/drag-drop";
3 |
4 | @Component({
5 | selector: 'app-drag-drop-disable-drag',
6 | templateUrl: './drag-drop-disable-drag.component.html',
7 | styleUrls: ['./drag-drop-disable-drag.component.less']
8 | })
9 | export class DragDropDisableDragComponent {
10 |
11 | items = [
12 | {value: 'I can be dragged', disabled: false},
13 | {value: 'I cannot be dragged', disabled: true},
14 | {value: 'I can also be dragged', disabled: false}
15 | ];
16 |
17 | drop(event: CdkDragDrop{{item.value}}
10 | {{item.value}}
14 | drag dialog
2 | 3 | 4 |
6 | Drag the dialog around!
7 |
8 | cdkDrop
2 |
3 | 可以到处拖拽
4 |
5 |
--------------------------------------------------------------------------------
/src/app/drag-drop/drop-directive/drag-drop-drop.component.less:
--------------------------------------------------------------------------------
1 | .example-box {
2 | width: 100px;
3 | height: 100px;
4 | border: solid 1px #ccc;
5 | color: rgba(0, 0, 0, 0.87);
6 | cursor: move;
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | text-align: center;
11 | background: #fff;
12 | border-radius: 4px;
13 | position: relative;
14 | z-index: 1;
15 | transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
16 | box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
17 | 0 2px 2px 0 rgba(0, 0, 0, 0.14),
18 | 0 1px 5px 0 rgba(0, 0, 0, 0.12);
19 | }
20 |
21 | .example-box:active {
22 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
23 | 0 8px 10px 1px rgba(0, 0, 0, 0.14),
24 | 0 3px 14px 2px rgba(0, 0, 0, 0.12);
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/drag-drop/drop-directive/drag-drop-drop.component.ts:
--------------------------------------------------------------------------------
1 | import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
2 | import {CdkDrag} from "@angular/cdk/drag-drop";
3 |
4 | @Component({
5 | selector: 'app-drag-drop-drop',
6 | templateUrl: './drag-drop-drop.component.html',
7 | styleUrls: ['./drag-drop-drop.component.less']
8 | })
9 | export class DragDropDropComponent implements AfterViewInit {
10 |
11 | @ViewChild(CdkDrag) cdkDragDirective: CdkDrag;
12 |
13 | constructor() {
14 | }
15 |
16 | ngAfterViewInit() {
17 | console.log(this.cdkDragDirective.getPlaceholderElement());
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/drag-drop/drop-list-directive/drag-drop-drop-list.component.html:
--------------------------------------------------------------------------------
1 | cdkDropList
2 |
3 |
5 |
--------------------------------------------------------------------------------
/src/app/drag-drop/drop-list-directive/drag-drop-drop-list.component.less:
--------------------------------------------------------------------------------
1 | .example-list {
2 | width: 500px;
3 | max-width: 100%;
4 | border: solid 1px #ccc;
5 | min-height: 60px;
6 | display: block;
7 | background: white;
8 | border-radius: 4px;
9 | overflow: hidden;
10 | }
11 |
12 | .example-box {
13 | padding: 20px 10px;
14 | border-bottom: solid 1px #ccc;
15 | color: rgba(0, 0, 0, 0.87);
16 | display: flex;
17 | flex-direction: row;
18 | align-items: center;
19 | justify-content: space-between;
20 | box-sizing: border-box;
21 | cursor: move;
22 | background: white;
23 | font-size: 14px;
24 | }
25 |
26 | .cdk-drag-preview {
27 | box-sizing: border-box;
28 | border-radius: 4px;
29 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
30 | 0 8px 10px 1px rgba(0, 0, 0, 0.14),
31 | 0 3px 14px 2px rgba(0, 0, 0, 0.12);
32 | }
33 |
34 | .cdk-drag-placeholder {
35 | opacity: 0;
36 | }
37 |
38 | .cdk-drag-animating {
39 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
40 | }
41 |
42 | .example-box:last-child {
43 | border: none;
44 | }
45 |
46 | .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
47 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
48 | }
49 |
--------------------------------------------------------------------------------
/src/app/drag-drop/drop-list-directive/drag-drop-drop-list.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
3 |
4 | @Component({
5 | selector: 'app-drag-drop-drop-list',
6 | templateUrl: './drag-drop-drop-list.component.html',
7 | styleUrls: ['./drag-drop-drop-list.component.less']
8 | })
9 | export class DragDropDropListComponent {
10 |
11 | movies = [
12 | 'Episode I - The Phantom Menace',
13 | 'Episode II - Attack of the Clones',
14 | 'Episode III - Revenge of the Sith',
15 | 'Episode IV - A New Hope',
16 | 'Episode V - The Empire Strikes Back',
17 | 'Episode VI - Return of the Jedi',
18 | 'Episode VII - The Force Awakens',
19 | 'Episode VIII - The Last Jedi'
20 | ];
21 |
22 | drop(event: CdkDragDrop{{movie}}
4 | cdkDragHandle
2 |
3 | I can only be dragged using the handle
4 |
5 |
12 |
--------------------------------------------------------------------------------
/src/app/drag-drop/handle-drag-area/drag-drop-handle-drag-area.component.less:
--------------------------------------------------------------------------------
1 | .example-box {
2 | width: 200px;
3 | height: 200px;
4 | padding: 10px;
5 | box-sizing: border-box;
6 | border: solid 1px #ccc;
7 | color: rgba(0, 0, 0, 0.87);
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | text-align: center;
12 | background: #fff;
13 | border-radius: 4px;
14 | position: relative;
15 | z-index: 1;
16 | transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
17 | box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
18 | 0 2px 2px 0 rgba(0, 0, 0, 0.14),
19 | 0 1px 5px 0 rgba(0, 0, 0, 0.12);
20 | }
21 |
22 | .example-box:active {
23 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
24 | 0 8px 10px 1px rgba(0, 0, 0, 0.14),
25 | 0 3px 14px 2px rgba(0, 0, 0, 0.12);
26 | }
27 |
28 | .example-handle {
29 | position: absolute;
30 | top: 10px;
31 | right: 10px;
32 | color: #ccc;
33 | cursor: move;
34 | width: 24px;
35 | height: 24px;
36 | }
37 |
--------------------------------------------------------------------------------
/src/app/drag-drop/handle-drag-area/drag-drop-handle-drag-area.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-drag-drop-handle-drag-area',
5 | templateUrl: './drag-drop-handle-drag-area.component.html',
6 | styleUrls: ['./drag-drop-handle-drag-area.component.less']
7 | })
8 | export class DragDropHandleDragAreaComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/drag-drop/orientation-drag/drag-drop-orientation-drag.component.html:
--------------------------------------------------------------------------------
1 |
6 |
10 |
11 | 水平方向的drag
2 |
3 |
5 |
--------------------------------------------------------------------------------
/src/app/drag-drop/orientation-drag/drag-drop-orientation-drag.component.less:
--------------------------------------------------------------------------------
1 | .example-list {
2 | width: 1000px;
3 | max-width: 100%;
4 | border: solid 1px #ccc;
5 | min-height: 60px;
6 | display: flex;
7 | flex-direction: row;
8 | background: white;
9 | border-radius: 4px;
10 | overflow: hidden;
11 | }
12 |
13 | .example-box {
14 | padding: 20px 10px;
15 | border-right: solid 1px #ccc;
16 | color: rgba(0, 0, 0, 0.87);
17 | display: flex;
18 | flex-direction: row;
19 | align-items: center;
20 | justify-content: space-between;
21 | box-sizing: border-box;
22 | cursor: move;
23 | background: white;
24 | font-size: 14px;
25 | flex-grow: 1;
26 | flex-basis: 0;
27 | }
28 |
29 | .cdk-drag-preview {
30 | box-sizing: border-box;
31 | border-radius: 4px;
32 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
33 | 0 8px 10px 1px rgba(0, 0, 0, 0.14),
34 | 0 3px 14px 2px rgba(0, 0, 0, 0.12);
35 | }
36 |
37 | .cdk-drag-placeholder {
38 | opacity: 0;
39 | }
40 |
41 | .cdk-drag-animating {
42 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
43 | }
44 |
45 | .example-box:last-child {
46 | border: none;
47 | }
48 |
49 | .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
50 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
51 | }
52 |
--------------------------------------------------------------------------------
/src/app/drag-drop/orientation-drag/drag-drop-orientation-drag.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
3 |
4 | @Component({
5 | selector: 'app-drag-drop-orientation-drag',
6 | templateUrl: './drag-drop-orientation-drag.component.html',
7 | styleUrls: ['./drag-drop-orientation-drag.component.less']
8 | })
9 | export class DragDropOrientationDragComponent {
10 |
11 | timePeriods = [
12 | 'Bronze age',
13 | 'Iron age',
14 | 'Middle ages',
15 | 'Early modern period',
16 | 'Long nineteenth century'
17 | ];
18 |
19 | drop(event: CdkDragDrop{{timePeriod}}
4 | 限制移动的区域
2 |
3 | 只能上下移动
4 |
5 |
6 |
7 | 只能左右移动
8 |
9 |
--------------------------------------------------------------------------------
/src/app/drag-drop/restricting-move-area/drag-drop-restricting-move-area.component.less:
--------------------------------------------------------------------------------
1 | .example-box {
2 | width: 200px;
3 | height: 200px;
4 | border: solid 1px #ccc;
5 | color: rgba(0, 0, 0, 0.87);
6 | cursor: move;
7 | display: inline-flex;
8 | justify-content: center;
9 | align-items: center;
10 | text-align: center;
11 | background: #fff;
12 | border-radius: 4px;
13 | margin-right: 25px;
14 | position: relative;
15 | z-index: 1;
16 | transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
17 | box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
18 | 0 2px 2px 0 rgba(0, 0, 0, 0.14),
19 | 0 1px 5px 0 rgba(0, 0, 0, 0.12);
20 | }
21 |
22 | .example-box:active {
23 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
24 | 0 8px 10px 1px rgba(0, 0, 0, 0.14),
25 | 0 3px 14px 2px rgba(0, 0, 0, 0.12);
26 | }
27 |
--------------------------------------------------------------------------------
/src/app/drag-drop/restricting-move-area/drag-drop-restricting-move-area.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-drag-drop-restricting-move-area',
5 | templateUrl: './drag-drop-restricting-move-area.component.html',
6 | styleUrls: ['./drag-drop-restricting-move-area.component.less']
7 | })
8 | export class DragDropRestrictingMoveAreaComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/drag-drop/transferring-item/drag-drop-transferring-item.component.html:
--------------------------------------------------------------------------------
1 | 两个list之间交换item
2 | 3 |
4 |
15 |
16 | To do
5 |
12 |
14 | {{item}}
13 |
17 |
28 |
29 |
--------------------------------------------------------------------------------
/src/app/drag-drop/transferring-item/drag-drop-transferring-item.component.less:
--------------------------------------------------------------------------------
1 | .example-container {
2 | width: 400px;
3 | max-width: 100%;
4 | margin: 0 25px 25px 0;
5 | display: inline-block;
6 | vertical-align: top;
7 | }
8 |
9 | .example-list {
10 | border: solid 1px #ccc;
11 | min-height: 60px;
12 | background: white;
13 | border-radius: 4px;
14 | overflow: hidden;
15 | display: block;
16 | }
17 |
18 | .example-box {
19 | padding: 20px 10px;
20 | border-bottom: solid 1px #ccc;
21 | color: rgba(0, 0, 0, 0.87);
22 | display: flex;
23 | flex-direction: row;
24 | align-items: center;
25 | justify-content: space-between;
26 | box-sizing: border-box;
27 | cursor: move;
28 | background: white;
29 | font-size: 14px;
30 | }
31 |
32 | .cdk-drag-preview {
33 | box-sizing: border-box;
34 | border-radius: 4px;
35 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
36 | 0 8px 10px 1px rgba(0, 0, 0, 0.14),
37 | 0 3px 14px 2px rgba(0, 0, 0, 0.12);
38 | }
39 |
40 | .cdk-drag-placeholder {
41 | opacity: 0;
42 | }
43 |
44 | .cdk-drag-animating {
45 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
46 | }
47 |
48 | .example-box:last-child {
49 | border: none;
50 | }
51 |
52 | .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
53 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
54 | }
55 |
--------------------------------------------------------------------------------
/src/app/drag-drop/transferring-item/drag-drop-transferring-item.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
3 |
4 | @Component({
5 | selector: 'app-drag-drop-transferring-item',
6 | templateUrl: './drag-drop-transferring-item.component.html',
7 | styleUrls: ['./drag-drop-transferring-item.component.less']
8 | })
9 | export class DragDropTransferringItemComponent {
10 |
11 | todo = [
12 | 'Get to work',
13 | 'Pick up groceries',
14 | 'Go home',
15 | 'Fall asleep'
16 | ];
17 |
18 | done = [
19 | 'Get up',
20 | 'Brush teeth',
21 | 'Take a shower',
22 | 'Check e-mail',
23 | 'Walk dog'
24 | ];
25 |
26 | drop(event: CdkDragDropDone
18 |
25 |
27 | {{item}}
26 | 键盘常用键码
2 | 3 |ps: 结果都在ts文件里面，通过console打印出来
4 | -------------------------------------------------------------------------------- /src/app/keycodes/cdk-key-codes.component.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuacy/angular-cdk-study/83abe74d0a6473d544ab3320fe696c654642da80/src/app/keycodes/cdk-key-codes.component.less -------------------------------------------------------------------------------- /src/app/keycodes/cdk-key-codes.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import {DELETE, ENTER, hasModifierKey, MAC_ENTER, TAB} from '@angular/cdk/keycodes'; 3 | 4 | @Component({ 5 | selector: 'app-key-codes', 6 | templateUrl: './cdk-key-codes.component.html', 7 | styleUrls: ['./cdk-key-codes.component.less'] 8 | }) 9 | export class CdkKeyCodesComponent { 10 | 11 | onKeyDown(event) { 12 | /** 13 | * 组合按键判断(如果按下的是 ctr按键 + 其他的按键的时候 返回true) 14 | */ 15 | console.log(hasModifierKey(event, 'ctrlKey')); 16 | /** 17 | * 打印按键值 18 | */ 19 | console.log(event.keyCode); 20 | /** 21 | * 通过 cdk 判断按键类型 22 | */ 23 | switch (event.keyCode) { 24 | case MAC_ENTER: 25 | case ENTER: 26 | console.log('当前按键: Enter键'); 27 | break; 28 | case TAB: 29 | console.log('当前按键: Tab键'); 30 | break; 31 | case DELETE: 32 | console.log('当前按键: Delete键'); 33 | break; 34 | } 35 | } 36 | 37 | } 38 | -------------------------------------------------------------------------------- /src/app/keycodes/cdk-key-codes.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {CommonModule} from '@angular/common'; 3 | import {CdkKeyCodesComponent} from './cdk-key-codes.component'; 4 | import {RouterModule} from '@angular/router'; 5 | import {CdkKeyCodesRoutingModule} from './cdk-key-codes-routing.module'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | RouterModule, 11 | CdkKeyCodesRoutingModule 12 | ], 13 | declarations: [ 14 | CdkKeyCodesComponent 15 | ] 16 | }) 17 | export class CdkKeyCodesModule { 18 | } 19 | -------------------------------------------------------------------------------- /src/app/layout/cdk-layout-routing.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {CommonModule} from '@angular/common'; 3 | import {RouterModule, Routes} from '@angular/router'; 4 | import {CdkLayoutComponent} from './cdk-layout.component'; 5 | 6 | 7 | const routes: Routes = [ 8 | { 9 | path: '', 10 | component: CdkLayoutComponent 11 | } 12 | ]; 13 | 14 | @NgModule({ 15 | imports: [ 16 | RouterModule.forChild(routes), 17 | CommonModule 18 | ], 19 | exports: [ 20 | RouterModule 21 | ], 22 | providers: [] 23 | }) 24 | export class CdkLayoutRoutingModule { 25 | } 26 | -------------------------------------------------------------------------------- /src/app/layout/cdk-layout.component.html: -------------------------------------------------------------------------------- 1 |cdk layout 所有的内容都在ts中哦!
2 |BreakpointObserver MediaMatcher
-------------------------------------------------------------------------------- /src/app/layout/cdk-layout.component.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuacy/angular-cdk-study/83abe74d0a6473d544ab3320fe696c654642da80/src/app/layout/cdk-layout.component.less -------------------------------------------------------------------------------- /src/app/layout/cdk-layout.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, OnDestroy, OnInit} from '@angular/core'; 2 | import {BreakpointObserver, Breakpoints, BreakpointState, MediaMatcher} from '@angular/cdk/layout'; 3 | 4 | @Component({ 5 | selector: 'app-cdk-layout', 6 | templateUrl: './cdk-layout.component.html', 7 | styleUrls: ['./cdk-layout.component.less'] 8 | }) 9 | export class CdkLayoutComponent implements OnInit, OnDestroy { 10 | 11 | matcher: MediaQueryList; 12 | 13 | // @HostListener('window:resize') 14 | // public onWindowResize(): void { 15 | // if (window.innerWidth >= 960) { 16 | // console.log('>= 960'); 17 | // } else if (window.innerWidth >= 600 && window.innerWidth < 960) { 18 | // console.log('>= 600 && < 960'); 19 | // } else { 20 | // console.log('< 600'); 21 | // } 22 | // } 23 | 24 | constructor(public breakpointObserver: BreakpointObserver, public mediaMatcher: MediaMatcher) { 25 | } 26 | 27 | ngOnInit() { 28 | 29 | // 简单的一次性匹配，可以使用isMatching方法。如果组件初始化时窗口至少为40rem高，则输出到控制台 30 | if (this.breakpointObserver.isMatched('(min-height: 40rem)')) { 31 | console.log('窗口至少为40rem高!'); 32 | } else { 33 | console.log('窗口没有40rem高!'); 34 | } 35 | 36 | // 注意哦，不会一直回调哦，只会在第一次满足或者不满足条件的时候回调。 37 | this.breakpointObserver 38 | .observe(['(min-width: 500px)']) 39 | .subscribe((state: BreakpointState) => { 40 | if (state.matches) { 41 | console.log('窗口宽度大于或者等于500px!'); 42 | } else { 43 | console.log('窗口不满足宽度大于或者等于500px!'); 44 | } 45 | }); 46 | 47 | // 也可以使用Breakpoints对象，而不是使用手写的媒体查询，它为我们提供了常见断点的键。如果多个参数，当有一个条件满足或者不满足的时候就会触发 48 | this.breakpointObserver 49 | .observe([Breakpoints.Small, Breakpoints.HandsetPortrait]) 50 | .subscribe((state: BreakpointState) => { 51 | if (state.matches) { 52 | console.log( 53 | 'Breakpoints.Small or Breakpoints.HandsetPortrait' 54 | ); 55 | } 56 | }); 57 | 58 | 59 | this.matcher = this.mediaMatcher.matchMedia('(min-width: 500px)'); 60 | this.matcher.addListener(this.matchMediaListener); 61 | 62 | // // 在程序加载时判断当前设备是横屏还是竖屏 63 | // const isPortrait = window.matchMedia('(orientation: portrait)').matches; 64 | // if (isPortrait) { 65 | // console.log('This is portrait'); 66 | // } 67 | // 68 | // // 初始化时窗口的大小等等 69 | // if (window.innerWidth >= 960) { 70 | // console.log('>= 960'); 71 | // } else { 72 | // console.log('< 960'); 73 | // } 74 | } 75 | 76 | ngOnDestroy() { 77 | this.matcher.removeListener(this.matchMediaListener); 78 | } 79 | 80 | matchMediaListener(event) { 81 | console.log(event.matches ? 'match' : 'no match'); 82 | } 83 | 84 | } 85 | -------------------------------------------------------------------------------- /src/app/layout/cdk-layout.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {CommonModule} from '@angular/common'; 3 | import {CdkLayoutRoutingModule} from './cdk-layout-routing.module'; 4 | import {CdkLayoutComponent} from './cdk-layout.component'; 5 | import {RouterModule} from '@angular/router'; 6 | import {LayoutModule} from "@angular/cdk/layout"; 7 | 8 | @NgModule({ 9 | imports: [ 10 | CommonModule, 11 | RouterModule, 12 | LayoutModule, 13 | CdkLayoutRoutingModule 14 | ], 15 | declarations: [ 16 | CdkLayoutComponent 17 | ] 18 | }) 19 | export class CdkLayoutModule { 20 | } 21 | -------------------------------------------------------------------------------- /src/app/observers/cdk-observers-routing.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {CommonModule} from '@angular/common'; 3 | import {RouterModule, Routes} from '@angular/router'; 4 | import {CdkObserversComponent} from './cdk-observers.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: CdkObserversComponent 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [ 15 | RouterModule.forChild(routes), 16 | CommonModule 17 | ], 18 | exports: [ 19 | RouterModule 20 | ], 21 | providers: [] 22 | }) 23 | export class CdkObserversRoutingModule { } 24 | -------------------------------------------------------------------------------- /src/app/observers/cdk-observers.component.html: -------------------------------------------------------------------------------- 1 |通过 cdk observers 可以监听dom变化
2 | 3 | 4 |
5 | {{content}}
6 |
7 | 8 | 9 |
4 |
--------------------------------------------------------------------------------
/src/app/observers/child/observers-child.component.less:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuacy/angular-cdk-study/83abe74d0a6473d544ab3320fe696c654642da80/src/app/observers/child/observers-child.component.less
--------------------------------------------------------------------------------
/src/app/observers/child/observers-child.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-observers-child',
5 | templateUrl: './observers-child.component.html',
6 | styleUrls: ['./observers-child.component.less']
7 | })
8 | export class ObserversChildComponent {
9 |
10 | count = 0;
11 |
12 | projectContentChanged($event: MutationRecord[]) {
13 | ++this.count;
14 | console.log(`ng-content内容改变了，第${this.count}次`);
15 | console.log($event, this.count);
16 | }
17 |
18 |
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/overlay/cdk-overlay-routing.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {CommonModule} from '@angular/common';
3 | import {RouterModule, Routes} from "@angular/router";
4 | import {CdkOverlayComponent} from "./cdk-overlay.component";
5 |
6 | const routes: Routes = [
7 | {
8 | path: '',
9 | component: CdkOverlayComponent
10 | }
11 | ];
12 |
13 | @NgModule({
14 | imports: [
15 | RouterModule.forChild(routes),
16 | CommonModule
17 | ],
18 | exports: [
19 | RouterModule
20 | ],
21 | providers: []
22 | })
23 | export class CdkOverlayRoutingModule { }
24 |
--------------------------------------------------------------------------------
/src/app/overlay/cdk-overlay.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
15 |
16 |
17 |
18 |
19 |
24 |
25 |
28 |
29 |
30 |
33 |
34 |
35 |
36 |
47 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/src/app/overlay/cdk-overlay.component.less:
--------------------------------------------------------------------------------
1 |
2 | .template-overlay-pane {
3 | padding: 10px;
4 | border: 1px solid black;
5 | background-color: skyblue;
6 | }
7 |
8 | .menu-wrap {
9 | margin: 0;
10 | padding: 10px;
11 | border: 1px solid black;
12 | color: white;
13 | background-color: orangered;
14 | opacity: 0.5;
15 | }
16 |
17 | .backdrop-with-out-transparent {
18 | background-color: transparent;
19 | }
--------------------------------------------------------------------------------
/src/app/overlay/cdk-overlay.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, ElementRef, ViewChild, ViewContainerRef, ViewEncapsulation} from '@angular/core';
2 | import {Overlay, OverlayConfig, OverlayRef} from '@angular/cdk/overlay';
3 | import {ComponentPortal, TemplatePortalDirective} from '@angular/cdk/portal';
4 | import {OverlayPanelComponent} from './panel/overlay-panel.component';
5 |
6 | @Component({
7 | selector: 'app-cdk-overlay',
8 | templateUrl: './cdk-overlay.component.html',
9 | styleUrls: ['./cdk-overlay.component.less'],
10 | encapsulation: ViewEncapsulation.None,
11 | preserveWhitespaces: false,
12 | })
13 | export class CdkOverlayComponent {
14 |
15 |
16 | isMenuOpen = false;
17 | globalOverlayPosition = 0;
18 | actionMenuItemList = ['第一项item', '第二项item'];
19 | private _overlayTemplateRef: OverlayRef;
20 | private _overlayConnectRef: OverlayRef;
21 |
22 | @ViewChild('overlayGlobalTemplate') templateGlobalPortals: TemplatePortalDirective;
23 | @ViewChild('connectComponentOrigin') _overlayConnectComponentOrigin: ElementRef;
24 | @ViewChild('connectTemplateOrigin') _overlayConnectTemplateOrigin: ElementRef;
25 | @ViewChild('overlayConnectTemplate') _overlayOriginTemplateDirective: TemplatePortalDirective;
26 |
27 | constructor(public overlay: Overlay
28 | , public viewContainerRef: ViewContainerRef) {
29 | }
30 |
31 | /**
32 | * overlay 在整个屏幕的中间显示
33 | */
34 | showOverlayGlobalPanelCenter() {
35 | // config: OverlayConfig overlay的配置，配置显示位置，和滑动策略
36 | const config = new OverlayConfig();
37 | config.positionStrategy = this.overlay.position()
38 | .global() // 全局显示
39 | .centerHorizontally() // 水平居中
40 | .centerVertically(); // 垂直居中
41 | config.hasBackdrop = true; // 设置overlay后面有一层背景, 当然你也可以设置backdropClass 来设置这层背景的class
42 | const overlayRef = this.overlay.create(config); // OverlayRef, overlay层
43 | overlayRef.backdropClick().subscribe(() => {
44 | // 点击了backdrop背景
45 | overlayRef.dispose();
46 | });
47 | // OverlayPanelComponent是动态组件
48 | // 创建一个ComponentPortal，attach到OverlayRef，这个时候我们这个overlay层就显示出来了。
49 | overlayRef.attach(new ComponentPortal(OverlayPanelComponent, this.viewContainerRef));
50 | // 监听overlayRef上的键盘按键事件
51 | overlayRef.keydownEvents().subscribe((event: KeyboardEvent) => {
52 | console.log(overlayRef._keydownEventSubscriptions + ' times');
53 | console.log(event);
54 | });
55 | }
56 |
57 | /**
58 | * overlay 在整个屏幕位置，自己控制位置
59 | */
60 | showOverlayGlobalPanelPosition() {
61 | const config = new OverlayConfig();
62 | config.positionStrategy = this.overlay.position()
63 | .global()
64 | .left(`${this.globalOverlayPosition}px`)
65 | .top(`${this.globalOverlayPosition}px`);
66 | this.globalOverlayPosition += 30;
67 | config.hasBackdrop = true;
68 | const overlayRef = this.overlay.create(config);
69 | overlayRef.backdropClick().subscribe(() => {
70 | overlayRef.dispose();
71 | });
72 | overlayRef.attach(new ComponentPortal(OverlayPanelComponent, this.viewContainerRef));
73 | }
74 |
75 | /**
76 | * 显示 ng-template 的内容
77 | */
78 | showOverlayPanelTemplate() {
79 | const config = new OverlayConfig();
80 | config.positionStrategy = this.overlay.position()
81 | .global()
82 | .centerHorizontally()
83 | .top(`${this.globalOverlayPosition}px`);
84 | this.globalOverlayPosition += 30;
85 | this._overlayTemplateRef = this.overlay.create(config);
86 | this._overlayTemplateRef.attach(this.templateGlobalPortals);
87 | }
88 |
89 | /**
90 | * 移除 ng-template 内容
91 | */
92 | dismissOverlayPanelTemplate() {
93 | if (this._overlayTemplateRef && this._overlayTemplateRef.hasAttached()) {
94 | this._overlayTemplateRef.dispose();
95 | }
96 | }
97 |
98 | /**
99 | * overlay connect origin 显示，依附某个组件显示
100 | */
101 | showOverlayPanelConnectComponent() {
102 | const strategy = this.overlay.position()
103 | .flexibleConnectedTo(this._overlayConnectComponentOrigin.nativeElement)
104 | .withPositions([{
105 | originX: 'center',
106 | originY: 'bottom',
107 | overlayX: 'center',
108 | overlayY: 'top',
109 | offsetX: 0,
110 | offsetY: 0
111 | }]);
112 | strategy.withLockedPosition(true);
113 | const config = new OverlayConfig({positionStrategy: strategy});
114 | config.scrollStrategy = this.overlay.scrollStrategies.reposition();
115 | this._overlayConnectRef = this.overlay.create(config);
116 | this._overlayConnectRef.attach(new ComponentPortal(OverlayPanelComponent, this.viewContainerRef));
117 | }
118 |
119 | dismissOverlayPanelConnectComponent() {
120 | if (this._overlayConnectRef && this._overlayConnectRef.hasAttached()) {
121 | this._overlayConnectRef.dispose();
122 | }
123 | }
124 |
125 | /**
126 | * overlay connect origin 显示，依附ng-template
127 | */
128 | showOverlayPanelConnectTemplate() {
129 | const strategy = this.overlay.position()
130 | .flexibleConnectedTo(this._overlayConnectTemplateOrigin.nativeElement)
131 | .withPositions([{
132 | originX: 'start',
133 | originY: 'bottom',
134 | overlayX: 'end',
135 | overlayY: 'top',
136 | offsetX: 0,
137 | offsetY: 0
138 | }]);
139 | const config = new OverlayConfig({positionStrategy: strategy});
140 | config.hasBackdrop = true;
141 | config.backdropClass = 'backdrop-with-out';
142 | const overlayRef = this.overlay.create(config);
143 | overlayRef.backdropClick().subscribe(() => {
144 | overlayRef.dispose();
145 | });
146 | overlayRef.attach(this._overlayOriginTemplateDirective);
147 | }
148 | }
149 |
--------------------------------------------------------------------------------
/src/app/overlay/cdk-overlay.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {CommonModule} from '@angular/common';
3 | import {OverlayModule} from "@angular/cdk/overlay";
4 | import {CdkOverlayComponent} from './cdk-overlay.component';
5 | import {CdkOverlayRoutingModule} from "./cdk-overlay-routing.module";
6 | import {OverlayPanelComponent} from './panel/overlay-panel.component';
7 | import {PortalModule} from "@angular/cdk/portal";
8 |
9 | @NgModule({
10 | imports: [
11 | CommonModule,
12 | PortalModule,
13 | OverlayModule,
14 | CdkOverlayRoutingModule
15 | ],
16 | declarations: [
17 | CdkOverlayComponent,
18 | OverlayPanelComponent
19 | ],
20 | entryComponents: [
21 | OverlayPanelComponent
22 | ],
23 | providers: [
24 | ],
25 | })
26 | export class CdkOverlayModule {
27 | }
28 |
--------------------------------------------------------------------------------
/src/app/overlay/panel/overlay-panel.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-overlay-panel',
5 | template: `
6 |
7 | `,
8 | styles: [`
9 | .wu-overlay-pane {
10 | margin: 0;
11 | padding: 10px;
12 | border: 1px solid black;
13 | background-color: skyblue;
14 | }
15 | `]
16 | })
17 | export class OverlayPanelComponent implements OnInit {
18 |
19 | constructor() { }
20 |
21 | ngOnInit() {
22 | }
23 |
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/platform/cdk-platform-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import {RouterModule, Routes} from '@angular/router';
4 | import {CdkOverlayComponent} from '../overlay/cdk-overlay.component';
5 | import {CdkPlatformComponent} from './cdk-platform.component';
6 |
7 | const routes: Routes = [
8 | {
9 | path: '',
10 | component: CdkPlatformComponent
11 | }
12 | ];
13 |
14 | @NgModule({
15 | imports: [
16 | RouterModule.forChild(routes),
17 | CommonModule
18 | ],
19 | exports: [
20 | RouterModule
21 | ],
22 | providers: []
23 | })
24 | export class CdkPlatformRoutingModule { }
25 |
--------------------------------------------------------------------------------
/src/app/platform/cdk-platform.component.html:
--------------------------------------------------------------------------------
1 | 3 |
组件或者ng-template实现overlay
4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 |36 |
指令(Directives)实现overlay
37 | 40 | 41 |通过 cdk Platform 获取到的平台信息如下:
2 |是否 Android: {{platform.ANDROID}}
3 |是否 iOS: {{platform.IOS}}
4 |是否 Firefox: {{platform.FIREFOX}}
5 |是否 Blink: {{platform.BLINK}}
6 |是否 Webkit: {{platform.WEBKIT}}
7 |是否 Trident: {{platform.TRIDENT}}
8 |是否 Edge: {{platform.EDGE}}
9 |是否浏览器: {{platform.isBrowser}}
10 |支持输入的类型: {{supportedInputTypes}}
11 |是否支持被动监听: {{supportsPassiveEventListeners}}
12 |是否支持 scroll 行为: {{supportsScrollBehavior}}
-------------------------------------------------------------------------------- /src/app/platform/cdk-platform.component.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuacy/angular-cdk-study/83abe74d0a6473d544ab3320fe696c654642da80/src/app/platform/cdk-platform.component.less -------------------------------------------------------------------------------- /src/app/platform/cdk-platform.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import {getSupportedInputTypes, Platform, supportsPassiveEventListeners, supportsScrollBehavior} from '@angular/cdk/platform'; 3 | 4 | @Component({ 5 | selector: 'app-cdk-platform', 6 | templateUrl: './cdk-platform.component.html', 7 | styleUrls: ['./cdk-platform.component.less'] 8 | }) 9 | export class CdkPlatformComponent { 10 | 11 | /** 12 | * 获取支持的输入类型 13 | */ 14 | supportedInputTypes = Array.from(getSupportedInputTypes()).join(', '); 15 | /** 16 | * 是否支持被动事件监听器 17 | */ 18 | supportsPassiveEventListeners = supportsPassiveEventListeners(); 19 | /** 20 | * 是否支持滑动行为 21 | */ 22 | supportsScrollBehavior = supportsScrollBehavior(); 23 | 24 | /** 25 | * Platform Service引入进来 26 | */ 27 | constructor(public platform: Platform) { 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/app/platform/cdk-platform.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {CommonModule} from '@angular/common'; 3 | import {CdkPlatformRoutingModule} from './cdk-platform-routing.module'; 4 | import {CdkPlatformComponent} from './cdk-platform.component'; 5 | import {PlatformModule} from '@angular/cdk/platform'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | PlatformModule, 11 | CdkPlatformRoutingModule 12 | ], 13 | declarations: [CdkPlatformComponent] 14 | }) 15 | export class CdkPlatformModule { 16 | } 17 | -------------------------------------------------------------------------------- /src/app/portal/cdk-portal-routing.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {CommonModule} from '@angular/common'; 3 | import {RouterModule, Routes} from '@angular/router'; 4 | import {CdkPortalComponent} from './cdk-portal.component'; 5 | 6 | 7 | const routes: Routes = [ 8 | { 9 | path: '', 10 | component: CdkPortalComponent 11 | } 12 | ]; 13 | 14 | @NgModule({ 15 | imports: [ 16 | RouterModule.forChild(routes), 17 | CommonModule 18 | ], 19 | exports: [ 20 | RouterModule 21 | ], 22 | providers: [] 23 | }) 24 | export class CdkPortalRoutingModule { 25 | } 26 | -------------------------------------------------------------------------------- /src/app/portal/cdk-portal.component.html: -------------------------------------------------------------------------------- 1 |通过 cdk portal 显示view
2 |6 |
7 | 8 |
9 |
11 |
13 | 14 | 17 | 20 | 23 | 24 | 25 |
ng-template 指定的内容(first) 外部参数 {{obj.age}}
27 |
30 |
32 |
33 | ng-template 指定的内容(last)
31 |这部分内容在app-root标签之外
35 |portal child show
12 | 13 | ` 14 | }) 15 | export class PortalChildComponent { 16 | 17 | outEvent: EventEmitter参数: {{ data }}
20 | cdk scrolling
2 | 3 |
4 |
8 | item 1
5 | item 2
6 | item 3
7 |
9 |
13 | item 1
10 | item 2
11 | item 3
12 | 14 |
16 |
18 |
20 |
22 |
2 | drag和scrolling结合使用 3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/app/scrolling/drag-scrolling/drag-scrolling.component.less:
--------------------------------------------------------------------------------
1 | .example-list {
2 | width: 500px;
3 | max-width: 100%;
4 | border: solid 1px #ccc;
5 | min-height: 60px;
6 | display: block;
7 | background: white;
8 | border-radius: 4px;
9 | overflow: hidden;
10 | }
11 |
12 | .example-box {
13 | padding: 20px 10px;
14 | border-bottom: solid 1px #ccc;
15 | color: rgba(0, 0, 0, 0.87);
16 | display: flex;
17 | flex-direction: row;
18 | align-items: center;
19 | justify-content: space-between;
20 | box-sizing: border-box;
21 | cursor: move;
22 | background: white;
23 | font-size: 14px;
24 | }
25 |
26 | .cdk-drag-preview {
27 | box-sizing: border-box;
28 | border-radius: 4px;
29 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
30 | 0 8px 10px 1px rgba(0, 0, 0, 0.14),
31 | 0 3px 14px 2px rgba(0, 0, 0, 0.12);
32 | }
33 |
34 | .cdk-drag-placeholder {
35 | opacity: 0;
36 | }
37 |
38 | .cdk-drag-animating {
39 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
40 | }
41 |
42 | .example-box:last-child {
43 | border: none;
44 | }
45 |
46 | .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
47 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
48 | }
--------------------------------------------------------------------------------
/src/app/scrolling/drag-scrolling/drag-scrolling.component.ts:
--------------------------------------------------------------------------------
1 | import {AfterViewInit, Component, ElementRef, OnDestroy, QueryList, ViewChild, ViewChildren} from '@angular/core';
2 | import {CdkDrag, CdkDragDrop, CdkDragMove, moveItemInArray} from '@angular/cdk/drag-drop';
3 | import {merge, Subscription} from 'rxjs';
4 | import {map, startWith, switchMap, tap} from 'rxjs/operators';
5 |
6 | const speed = 10;
7 |
8 | @Component({
9 | selector: 'app-drag-scrolling',
10 | templateUrl: './drag-scrolling.component.html',
11 | styleUrls: ['./drag-scrolling.component.less']
12 | })
13 | export class DragScrollingComponent implements AfterViewInit, OnDestroy {
14 | movies = [
15 | 'Episode I - The Phantom Menace',
16 | 'Episode II - Attack of the Clones',
17 | 'Episode III - Revenge of the Sith',
18 | 'Episode IV - A New Hope',
19 | 'Episode V - The Empire Strikes Back',
20 | 'Episode VI - Return of the Jedi',
21 | 'Episode VII - The Force Awakens',
22 | 'Episode VIII - The Last Jedi',
23 | 'Rouge One',
24 | 'Solo',
25 | 'Clone Wars'
26 | ];
27 |
28 | animationFrame: number | undefined;
29 |
30 | @ViewChild('scrollEl')
31 | scrollEl: ElementRef
6 |
10 |
7 |
9 | {{movie}}
8 | DataSource
3 |{{item || 'Loading...'}}
5 | cdk-virtual-scroll-viewport horizontal
3 |
4 |
5 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/src/app/scrolling/virtual-scroll-horizontal/virtual-scroll-horizontal.component.less:
--------------------------------------------------------------------------------
1 | .cdk-virtual-scroll-data-source-example .example-viewport {
2 | height: 200px;
3 | width: 200px;
4 | border: 1px solid black;
5 | }
6 |
7 | .cdk-virtual-scroll-data-source-example .example-viewport .cdk-virtual-scroll-content-wrapper {
8 | display: flex;
9 | flex-direction: row;
10 | }
11 |
12 | .cdk-virtual-scroll-data-source-example .example-item {
13 | width: 50px;
14 | height: 100%;
15 | writing-mode: vertical-lr;
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/scrolling/virtual-scroll-horizontal/virtual-scroll-horizontal.component.ts:
--------------------------------------------------------------------------------
1 | import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-virtual-scroll-horizontal',
5 | templateUrl: './virtual-scroll-horizontal.component.html',
6 | styleUrls: ['./virtual-scroll-horizontal.component.less'],
7 | encapsulation: ViewEncapsulation.None,
8 | changeDetection: ChangeDetectionStrategy.OnPush,
9 | })
10 | export class VirtualScrollHorizontalComponent {
11 |
12 | items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
13 |
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/scrolling/virtual-scroll-strategies/custom-virtual-scroll-strategies.ts:
--------------------------------------------------------------------------------
1 | import {FixedSizeVirtualScrollStrategy} from "@angular/cdk/scrolling";
2 |
3 | export class CustomVirtualScrollStrategies extends FixedSizeVirtualScrollStrategy {
4 | constructor() {
5 | super(50, 250, 500);
6 | }
7 | }
8 |
9 |
--------------------------------------------------------------------------------
/src/app/scrolling/virtual-scroll-strategies/virtual-scroll-strategies.component.html:
--------------------------------------------------------------------------------
1 |
2 | {{item}}
6 | 通过provider提供缓存策略
3 |{{item}}
5 |
3 |
5 |
21 |
22 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/src/app/scrolling/virtual-scroll/virtual-scroll.component.less:
--------------------------------------------------------------------------------
1 | .example-viewport {
2 | height: 200px;
3 | width: 200px;
4 | border: 1px solid black;
5 | }
6 |
7 | .example-item-detail {
8 | height: 18px;
9 | }
10 |
11 | .example-alternate {
12 | background: rgba(127, 127, 127, 0.3);
13 | }
--------------------------------------------------------------------------------
/src/app/scrolling/virtual-scroll/virtual-scroll.component.ts:
--------------------------------------------------------------------------------
1 | import {AfterViewInit, Component, ViewChild} from '@angular/core';
2 | import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
3 |
4 | @Component({
5 | selector: 'app-virtual-scroll',
6 | templateUrl: './virtual-scroll.component.html',
7 | styleUrls: ['./virtual-scroll.component.less']
8 | })
9 | export class VirtualScrollComponent implements AfterViewInit{
10 |
11 | @ViewChild('scrollComponent')
12 | private _scrollViewport: CdkVirtualScrollViewport;
13 |
14 | items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
15 |
16 | ngAfterViewInit(): void {
17 | }
18 |
19 | onButtonClick() {
20 | this._scrollViewport.scrollToIndex(10);
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/table/cdk-base-table-routing.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {CommonModule} from '@angular/common';
3 | import {RouterModule, Routes} from '@angular/router';
4 | import {CdkBaseTableComponent} from './cdk-base-table.component';
5 |
6 | const routes: Routes = [
7 | {
8 | path: '',
9 | component: CdkBaseTableComponent
10 | }
11 | ];
12 |
13 | @NgModule({
14 | imports: [
15 | RouterModule.forChild(routes),
16 | CommonModule
17 | ],
18 | exports: [
19 | RouterModule
20 | ],
21 | providers: []
22 | })
23 | export class CdkBaseTableRoutingModule { }
24 |
--------------------------------------------------------------------------------
/src/app/table/cdk-base-table.component.html:
--------------------------------------------------------------------------------
1 | cdk-virtual-scroll-viewport组件使用
4 |
12 |
20 | Item: {{item}}
13 | Index: {{index}}
14 | Count: {{count}}
15 | First: {{first ? 'Yes' : 'No'}}
16 | Last: {{last ? 'Yes' : 'No'}}
17 | Even: {{even ? 'Yes' : 'No'}}
18 | Odd: {{odd ? 'Yes' : 'No'}}
19 | 2 |
3 |
| No. | 7 |{{element.position}} | 8 |Name | 13 |{{element.name}} | 14 |Weight | 19 |{{element.weight}} | 20 |Symbol | 25 |{{element.symbol}} | 26 |
|---|
7 | 8 | -------------------------------------------------------------------------------- /src/app/text-field/cdk-text-field.component.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuacy/angular-cdk-study/83abe74d0a6473d544ab3320fe696c654642da80/src/app/text-field/cdk-text-field.component.less -------------------------------------------------------------------------------- /src/app/text-field/cdk-text-field.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild} from '@angular/core'; 2 | import {AutofillMonitor, CdkTextareaAutosize} from "@angular/cdk/text-field"; 3 | import {take} from "rxjs/operators"; 4 | 5 | @Component({ 6 | selector: 'app-cdk-text-field', 7 | templateUrl: './cdk-text-field.component.html', 8 | styleUrls: ['./cdk-text-field.component.less'] 9 | }) 10 | export class CdkTextFieldComponent implements OnDestroy, OnInit { 11 | @ViewChild('autosize') autosize: CdkTextareaAutosize; 12 | @ViewChild('first', {read: ElementRef}) firstName: ElementRef
2 |
7 |
--------------------------------------------------------------------------------
/src/app/tip/tip.component.less:
--------------------------------------------------------------------------------
1 | .tooltip-example {
2 | text-align: center;
3 | padding: 0 50px;
4 | }
5 |
6 | .tooltip-example [appTip] {
7 | display: inline-block;
8 | margin: 50px 20px;
9 | width: 180px;
10 | height: 50px;
11 | border: 1px solid gray;
12 | border-radius: 5px;
13 | line-height: 50px;
14 | text-align: center;
15 | }
--------------------------------------------------------------------------------
/src/app/tip/tip.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-tip',
5 | templateUrl: './tip.component.html',
6 | styleUrls: ['./tip.component.less']
7 | })
8 | export class TipComponent {
9 |
10 |
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/tip/tip.directive.ts:
--------------------------------------------------------------------------------
1 | import {Directive, ElementRef, HostListener, Input, Renderer2} from '@angular/core';
2 |
3 | @Directive({
4 | selector: '[appTip]'
5 | })
6 | export class TipDirective {
7 |
8 | @Input() tooltipTitle: string;
9 | @Input() placement: string;
10 | @Input() delay: string;
11 | tooltip: HTMLElement;
12 | offset = 10;
13 |
14 | constructor(private el: ElementRef, private renderer: Renderer2) {
15 | }
16 |
17 | @HostListener('mouseenter') onMouseEnter() {
18 | if (!this.tooltip) {
19 | this.show();
20 | }
21 | }
22 |
23 | @HostListener('mouseleave') onMouseLeave() {
24 | if (this.tooltip) {
25 | this.hide();
26 | }
27 | }
28 |
29 | show() {
30 | this.create();
31 | this.setPosition();
32 | this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
33 | }
34 |
35 | hide() {
36 | this.renderer.removeClass(this.tooltip, 'ng-tooltip-show');
37 | window.setTimeout(() => {
38 | this.renderer.removeChild(document.body, this.tooltip);
39 | this.tooltip = null;
40 | }, this.delay);
41 | }
42 |
43 | create() {
44 | this.tooltip = this.renderer.createElement('span');
45 |
46 | this.renderer.appendChild(
47 | this.tooltip,
48 | this.renderer.createText(this.tooltipTitle) // textNode
49 | );
50 |
51 | this.renderer.appendChild(document.body, this.tooltip);
52 | // this.renderer.appendChild(this.el.nativeElement, this.tooltip);
53 |
54 | this.renderer.addClass(this.tooltip, 'ng-tooltip');
55 | this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`);
56 |
57 | // delay
58 | this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity ${this.delay}ms`);
59 | this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity ${this.delay}ms`);
60 | this.renderer.setStyle(this.tooltip, '-o-transition', `opacity ${this.delay}ms`);
61 | this.renderer.setStyle(this.tooltip, 'transition', `opacity ${this.delay}ms`);
62 | }
63 |
64 | setPosition() {
65 | const hostPos = this.el.nativeElement.getBoundingClientRect();
66 |
67 | // tooltip
68 | const tooltipPos = this.tooltip.getBoundingClientRect();
69 |
70 | // getBoundingClientRect
71 | const scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
72 |
73 | let top, left;
74 |
75 | if (this.placement === 'top') {
76 | top = hostPos.top - tooltipPos.height - this.offset;
77 | left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
78 | }
79 |
80 | if (this.placement === 'bottom') {
81 | top = hostPos.bottom + this.offset;
82 | left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
83 | }
84 |
85 | if (this.placement === 'left') {
86 | top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
87 | left = hostPos.left - tooltipPos.width - this.offset;
88 | }
89 |
90 | if (this.placement === 'right') {
91 | top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
92 | left = hostPos.right + this.offset;
93 | }
94 |
95 | this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
96 | this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
97 | }
98 |
99 | }
100 |
--------------------------------------------------------------------------------
/src/app/workflow-stepper/cdk-workflow-stepper-routing.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {CommonModule} from '@angular/common';
3 | import {RouterModule, Routes} from "@angular/router";
4 | import {CdkWorkflowStepperComponent} from "./cdk-workflow-stepper.component";
5 |
6 | const routes: Routes = [
7 | {
8 | path: '',
9 | component: CdkWorkflowStepperComponent
10 | }
11 | ];
12 |
13 | @NgModule({
14 | imports: [
15 | RouterModule.forChild(routes),
16 | CommonModule
17 | ],
18 | exports: [
19 | RouterModule
20 | ],
21 | providers: []
22 | })
23 | export class CdkWorkflowStepperRoutingModule { }
24 |
--------------------------------------------------------------------------------
/src/app/workflow-stepper/cdk-workflow-stepper.component.html:
--------------------------------------------------------------------------------
1 | tootip on left
3 | tootip on top
4 | tootip on bottom
5 | tootip on right
6 | cdk stepper
2 |
29 |
30 |
34 |
35 |
--------------------------------------------------------------------------------
/src/app/workflow-stepper/stepper/stepper-header.component.less:
--------------------------------------------------------------------------------
1 | .yx-step-icon {
2 | border-radius: 50%;
3 | height: 24px;
4 | width: 24px;
5 | flex-shrink: 0;
6 | position: relative;
7 | }
8 |
9 | .yx-step-icon-content {
10 | // Use absolute positioning to center the content, because it works better with text.
11 | position: absolute;
12 | top: 50%;
13 | left: 50%;
14 | transform: translate(-50%, -50%);
15 | }
16 |
17 | .yx-step-label {
18 | display: inline-block;
19 | white-space: nowrap;
20 | overflow: hidden;
21 | text-overflow: ellipsis;
22 | min-width: 50px;
23 | vertical-align: middle;
24 | }
--------------------------------------------------------------------------------
/src/app/workflow-stepper/stepper/stepper-header.component.ts:
--------------------------------------------------------------------------------
1 | import {ChangeDetectorRef, Component, ElementRef, Input, OnDestroy} from '@angular/core';
2 | import {CdkStepHeader, CdkStepLabel, StepState} from '@angular/cdk/stepper';
3 | import {FocusMonitor} from '@angular/cdk/a11y';
4 |
5 | @Component({
6 | selector: 'yx-stepper-header',
7 | templateUrl: './stepper-header.component.html',
8 | styleUrls: ['./stepper-header.component.less']
9 | })
10 | export class StepperHeaderComponent extends CdkStepHeader implements OnDestroy {
11 |
12 | /** State of the given step. */
13 | @Input() state: StepState;
14 |
15 | /** Label of the given step. */
16 | @Input() label: CdkStepLabel | string;
17 |
18 | /** Index of the given step. */
19 | @Input() index: number;
20 |
21 | /** Whether the given step is selected. */
22 | @Input() selected: boolean;
23 |
24 | /** Whether the given step label is active. */
25 | @Input() active: boolean;
26 |
27 | /** Whether the given step is optional. */
28 | @Input() optional: boolean;
29 |
30 | constructor(
31 | private _focusMonitor: FocusMonitor,
32 | _elementRef: ElementRef{{label}}
33 |
3 |
4 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
38 |
--------------------------------------------------------------------------------
/src/app/workflow-stepper/stepper/stepper.component.less:
--------------------------------------------------------------------------------
1 | .yx-stepper-header-container {
2 | white-space: nowrap;
3 | display: flex;
4 | align-items: center;
5 | }
6 |
7 | .yx-stepper-header {
8 | display: flex;
9 | height: 24px;
10 | overflow: hidden;
11 | align-items: center;
12 | padding: 0 24px;
13 | }
14 |
15 | .yx-content-container {
16 | overflow: hidden;
17 | }
18 |
19 | /**
20 | 保证值显示一个step
21 | */
22 | .yx-stepper-content[aria-expanded='false'] {
23 | height: 0;
24 | overflow: hidden;
25 | }
--------------------------------------------------------------------------------
/src/app/workflow-stepper/stepper/stepper.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | AfterContentInit,
3 | ChangeDetectionStrategy,
4 | Component,
5 | ContentChildren,
6 | EventEmitter,
7 | Output,
8 | QueryList,
9 | ViewEncapsulation
10 | } from '@angular/core';
11 | import {AnimationEvent} from '@angular/animations';
12 | import {CdkStep, CdkStepper, StepContentPositionState} from '@angular/cdk/stepper';
13 | import {Subject} from 'rxjs';
14 | import {distinctUntilChanged, takeUntil} from 'rxjs/operators';
15 | import {yxStepperAnimations} from './stepper-animations';
16 |
17 | @Component({
18 | selector: 'yx-stepper',
19 | templateUrl: './stepper.component.html',
20 | styleUrls: ['./stepper.component.less'],
21 | providers: [{provide: CdkStepper, useExisting: StepperComponent}],
22 | animations: [yxStepperAnimations.horizontalStepTransition],
23 | encapsulation: ViewEncapsulation.None,
24 | changeDetection: ChangeDetectionStrategy.OnPush,
25 | })
26 | export class StepperComponent extends CdkStepper implements AfterContentInit {
27 |
28 | /** Steps that the stepper holds. */
29 | @ContentChildren(CdkStep) _steps: QueryList
35 |
37 |