diff --git a/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.css b/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.css new file mode 100644 index 000000000000..8b1e8377f4d0 --- /dev/null +++ b/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.css @@ -0,0 +1,35 @@ +.example-tree-controls { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 16px; +} + +.example-tree-output { + padding: 10px; + margin-bottom: 16px; + border: 1px solid var(--mat-sys-outline); + border-radius: var(--mat-sys-corner-extra-small); +} + +.example-tree { + padding: 10px; + border: 1px solid var(--mat-sys-outline); + border-radius: var(--mat-sys-corner-extra-small); +} + +.example-tree-item { + cursor: pointer; + user-select: none; + list-style: none; +} + +.example-tree-item-content { + display: flex; + align-items: center; + padding: 2px 0; /* Minimal padding for item itself */ +} + +.example-tree-item-icon { + margin-right: 8px; +} diff --git a/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.html b/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.html new file mode 100644 index 000000000000..d24621bf023c --- /dev/null +++ b/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.html @@ -0,0 +1,22 @@ + + + +
  • + @if (node.children) { + + } +
  • +
    diff --git a/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.ts b/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.ts new file mode 100644 index 000000000000..6c3efa498397 --- /dev/null +++ b/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.ts @@ -0,0 +1,52 @@ +import {Component} from '@angular/core'; +import {NgTemplateOutlet} from '@angular/common'; +import { + CdkTree, + CdkTreeItem, + CdkTreeItemGroup, + CdkTreeItemGroupContent, +} from '@angular/cdk-experimental/tree'; + +/** @title Tree using CdkTree and CdkTreeItem. */ +@Component({ + selector: 'cdk-tree-single-select-example', + exportAs: 'cdkTreeSingleSelectExample', + templateUrl: 'cdk-tree-single-select-example.html', + styleUrl: 'cdk-tree-single-select-example.css', + imports: [CdkTree, CdkTreeItem, CdkTreeItemGroup, CdkTreeItemGroupContent, NgTemplateOutlet], +}) +export class CdkTreeSingleSelectExample { + treeData = [ + { + value: 'Fruits', + children: [{value: 'Apple'}, {value: 'Banana'}, {value: 'Cherry'}], + }, + { + value: 'Vegetables', + children: [{value: 'Asparagus'}, {value: 'Broccoli'}, {value: 'Carrot'}], + }, + { + value: 'Meat', + children: [ + { + value: 'Red Meat', + children: [{value: 'Beef'}, {value: 'Goat'}, {value: 'Pork'}], + }, + { + value: 'Poultry', + children: [{value: 'Chicken'}, {value: 'Turkey'}], + }, + { + value: 'Seafood', + children: [ + {value: 'Bass'}, + {value: 'Crab'}, + {value: 'Lobster'}, + {value: 'Oyster'}, + {value: 'Shrimp'}, + ], + }, + ], + }, + ]; +} diff --git a/src/components-examples/cdk-experimental/tree/index.ts b/src/components-examples/cdk-experimental/tree/index.ts index 731d29286979..ca7bb14a6e7e 100644 --- a/src/components-examples/cdk-experimental/tree/index.ts +++ b/src/components-examples/cdk-experimental/tree/index.ts @@ -1 +1,2 @@ export {CdkTreeExample} from './cdk-tree/cdk-tree-example'; +export {CdkTreeSingleSelectExample} from './cdk-tree-single-select/cdk-tree-single-select-example'; diff --git a/src/dev-app/cdk-experimental-tree/cdk-tree-demo.html b/src/dev-app/cdk-experimental-tree/cdk-tree-demo.html index 76cfa8843aef..a6f4967f0f1f 100644 --- a/src/dev-app/cdk-experimental-tree/cdk-tree-demo.html +++ b/src/dev-app/cdk-experimental-tree/cdk-tree-demo.html @@ -1,4 +1,9 @@
    +

    Single Select

    + +
    + + diff --git a/src/dev-app/cdk-experimental-tree/cdk-tree-demo.ts b/src/dev-app/cdk-experimental-tree/cdk-tree-demo.ts index c9b973635b0a..a7b2826f660f 100644 --- a/src/dev-app/cdk-experimental-tree/cdk-tree-demo.ts +++ b/src/dev-app/cdk-experimental-tree/cdk-tree-demo.ts @@ -7,11 +7,11 @@ */ import {ChangeDetectionStrategy, Component} from '@angular/core'; -import {CdkTreeExample} from '@angular/components-examples/cdk-experimental/tree'; +import {CdkTreeSingleSelectExample} from '@angular/components-examples/cdk-experimental/tree'; @Component({ templateUrl: 'cdk-tree-demo.html', - imports: [CdkTreeExample], + imports: [CdkTreeSingleSelectExample], changeDetection: ChangeDetectionStrategy.OnPush, }) export class CdkExperimentalTreeDemo {}