From 67f9a29b963d518ef2fdb6c781f47f1a2f33c747 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 30 Jul 2024 18:39:34 +0200 Subject: [PATCH] docs(cdk/drag-drop): add tabs example (#29517) Adds an example that shows how to add drag&drop support to a `mat-tab-group`. Fixes #13572. --- src/cdk/drag-drop/drag-drop.md | 13 +++++---- .../cdk/drag-drop/BUILD.bazel | 1 + .../cdk-drag-drop-tabs-example.css | 17 ++++++++++++ .../cdk-drag-drop-tabs-example.html | 27 +++++++++++++++++++ .../cdk-drag-drop-tabs-example.ts | 25 +++++++++++++++++ .../cdk/drag-drop/index.ts | 1 + 6 files changed, 79 insertions(+), 5 deletions(-) create mode 100644 src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.css create mode 100644 src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.html create mode 100644 src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.ts diff --git a/src/cdk/drag-drop/drag-drop.md b/src/cdk/drag-drop/drag-drop.md index f9f7ad1b02e8..9832b56558fb 100644 --- a/src/cdk/drag-drop/drag-drop.md +++ b/src/cdk/drag-drop/drag-drop.md @@ -251,10 +251,13 @@ item will be moved into the new index, otherwise it will keep its current positi -### Reordering table rows -Angular Material provides seamless integration of drag-and-drop functionality into tables, -by adding the `cdkDropList` directive to your mat-table and handling the `(cdkDropListDropped)` -event, you can enable drag-and-drop interactions within your table. This allows users to reorder -rows or perform other custom actions with ease. +### Integrations with Angular Material +The CDK's drag&drop functionality can be integrated with different parts of Angular Material. +#### Sortable table +This example shows how you can set up a table which supports re-ordering of tabs. + +#### Sortable tabs +Example of how to add sorting support to a `mat-tab-group`. + diff --git a/src/components-examples/cdk/drag-drop/BUILD.bazel b/src/components-examples/cdk/drag-drop/BUILD.bazel index 66a1ad7cf3b0..5c6e86edb223 100644 --- a/src/components-examples/cdk/drag-drop/BUILD.bazel +++ b/src/components-examples/cdk/drag-drop/BUILD.bazel @@ -15,6 +15,7 @@ ng_module( "//src/cdk/portal", "//src/material/icon", "//src/material/table", + "//src/material/tabs", ], ) diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.css new file mode 100644 index 000000000000..96aac37a6abe --- /dev/null +++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.css @@ -0,0 +1,17 @@ +.example-drag-tabs.cdk-drop-list-dragging { + pointer-events: none; +} + +.example-drag-tabs-preview.cdk-drag-animating { + transition: all 250ms cubic-bezier(0, 0, 0.2, 1); +} + +.mat-mdc-tab.example-drag-tabs-preview { + outline: dashed 1px #ccc; + outline-offset: 4px; +} + +.example-drag-tabs .cdk-drag-placeholder { + opacity: 0.5; +} + diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.html new file mode 100644 index 000000000000..4d7007e71809 --- /dev/null +++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.html @@ -0,0 +1,27 @@ + + @for (tab of tabs; track $index) { + + + {{tab}} + + +

Content for {{tab}}

+ + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem perspiciatis in delectus + reprehenderit, molestias ullam nostrum odit, modi consequatur harum beatae? Sapiente + voluptatibus illo natus assumenda hic quasi dolor et laborum veniam! Molestiae architecto + nesciunt est quo nisi? Nostrum repellendus quibusdam laudantium? Optio architecto explicabo + labore sapiente cum alias nobis! + + } + diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.ts new file mode 100644 index 000000000000..d1845f3ecde6 --- /dev/null +++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-tabs/cdk-drag-drop-tabs-example.ts @@ -0,0 +1,25 @@ +import {Component, ViewEncapsulation} from '@angular/core'; +import {CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop'; +import {MatTabsModule} from '@angular/material/tabs'; + +/** + * @title Drag&Drop tabs + */ +@Component({ + selector: 'cdk-drag-drop-tabs-example', + templateUrl: 'cdk-drag-drop-tabs-example.html', + styleUrl: 'cdk-drag-drop-tabs-example.css', + standalone: true, + imports: [CdkDrag, CdkDropList, MatTabsModule], + encapsulation: ViewEncapsulation.None, +}) +export class CdkDragDropTabsExample { + protected tabs = ['One', 'Two', 'Three', 'Four', 'Five']; + protected selectedTabIndex = 0; + + drop(event: CdkDragDrop) { + const prevActive = this.tabs[this.selectedTabIndex]; + moveItemInArray(this.tabs, event.previousIndex, event.currentIndex); + this.selectedTabIndex = this.tabs.indexOf(prevActive); + } +} diff --git a/src/components-examples/cdk/drag-drop/index.ts b/src/components-examples/cdk/drag-drop/index.ts index 712fe39ac20f..37df41d57c2b 100644 --- a/src/components-examples/cdk/drag-drop/index.ts +++ b/src/components-examples/cdk/drag-drop/index.ts @@ -17,3 +17,4 @@ export {CdkDragDropSortingExample} from './cdk-drag-drop-sorting/cdk-drag-drop-s export {CdkDragDropSortPredicateExample} from './cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example'; export {CdkDragDropTableExample} from './cdk-drag-drop-table/cdk-drag-drop-table-example'; export {CdkDragDropMixedSortingExample} from './cdk-drag-drop-mixed-sorting/cdk-drag-drop-mixed-sorting-example'; +export {CdkDragDropTabsExample} from './cdk-drag-drop-tabs/cdk-drag-drop-tabs-example';