Skip to content

Commit ed290e3

Browse files
wagnermacielwagnermaciel
committed
docs(cdk-experimental/tree): add examples to the dev-app
1 parent dea603b commit ed290e3

30 files changed

+967
-265
lines changed

‎src/components-examples/cdk-experimental/tree/cdk-tree-active-descendant/cdk-tree-active-descendant-example.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<ul cdkTree focusMode="activedescendant" #tree="cdkTree" class="example-tree">
2+
<ng-template
3+
[ngTemplateOutlet]="treeNodes"
4+
[ngTemplateOutletContext]="{nodes: nodes, parent: tree}"
5+
/>
6+
</ul>
7+
8+
<ng-template #treeNodes let-nodes="nodes" let-parent="parent">
9+
@for (node of nodes; track node.value) {
10+
<li
11+
cdkTreeItem
12+
[parent]="parent"
13+
[value]="node.value"
14+
[label]="node.name"
15+
[disabled]="node.disabled"
16+
#treeItem="cdkTreeItem"
17+
class="example-tree-item example-selectable example-stateful"
18+
>
19+
<span aria-hidden="true" class="material-symbols-outlined example-parent-icon example-icon">{{node.children ? 'chevron_right' : ''}}</span>
20+
<span aria-hidden="true" class="material-symbols-outlined example-icon">{{node.children ? 'folder' : 'docs'}}</span>
21+
{{ node.name }}
22+
<span aria-hidden="true" class="material-symbols-outlined example-selected-icon example-icon">check</span>
23+
</li>
24+
25+
@if (node.children) {
26+
<ul cdkTreeItemGroup [ownedBy]="treeItem" #group="cdkTreeItemGroup">
27+
<ng-template cdkTreeItemGroupContent>
28+
<ng-template
29+
[ngTemplateOutlet]="treeNodes"
30+
[ngTemplateOutletContext]="{nodes: node.children, parent: group}"
31+
/>
32+
</ng-template>
33+
</ul>
34+
} }
35+
</ng-template>

‎src/components-examples/cdk-experimental/tree/cdk-tree-active-descendant/cdk-tree-active-descendant-example.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
9+
import {Component} from '@angular/core';
10+
import {NgTemplateOutlet} from '@angular/common';
11+
import {
12+
CdkTree,
13+
CdkTreeItem,
14+
CdkTreeItemGroup,
15+
CdkTreeItemGroupContent,
16+
} from '@angular/cdk-experimental/tree';
17+
import {TreeNode, NODES} from '../tree-data';
18+
19+
/**
20+
* @title Tree with active descendant focus.
21+
*/
22+
@Component({
23+
selector: 'cdk-tree-active-descendant-example',
24+
exportAs: 'cdkTreeActiveDescendantExample',
25+
templateUrl: 'cdk-tree-active-descendant-example.html',
26+
styleUrl: '../tree-common.css',
27+
standalone: true,
28+
imports: [CdkTree, CdkTreeItem, CdkTreeItemGroup, CdkTreeItemGroupContent, NgTemplateOutlet],
29+
})
30+
export class CdkTreeActiveDescendantExample {
31+
nodes: TreeNode[] = NODES;
32+
}

‎src/components-examples/cdk-experimental/tree/cdk-tree-configurable/cdk-tree-configurable-example.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<div class="example-tree-controls">
2+
<mat-checkbox [formControl]="wrap">Wrap</mat-checkbox>
3+
<mat-checkbox [formControl]="multi">Multi</mat-checkbox>
4+
<mat-checkbox [formControl]="disabled">Disabled</mat-checkbox>
5+
<mat-checkbox [formControl]="skipDisabled">Skip Disabled</mat-checkbox>
6+
<mat-checkbox [formControl]="nav">Nav Mode</mat-checkbox>
7+
8+
<mat-form-field subscriptSizing="dynamic" appearance="outline">
9+
<mat-label>Selection Strategy</mat-label>
10+
<mat-select [(value)]="selectionMode">
11+
<mat-option value="explicit">Explicit</mat-option>
12+
<mat-option value="follow">Follow</mat-option>
13+
</mat-select>
14+
</mat-form-field>
15+
16+
<mat-form-field subscriptSizing="dynamic" appearance="outline">
17+
<mat-label>Focus Strategy</mat-label>
18+
<mat-select [(value)]="focusMode">
19+
<mat-option value="roving">Roving</mat-option>
20+
<mat-option value="activedescendant">Active Descendant</mat-option>
21+
</mat-select>
22+
</mat-form-field>
23+
</div>
24+
25+
<div class="example-tree-output">
26+
<strong>Selected Values:</strong> {{ selectedValues().join(', ') || 'None' }}
27+
</div>
28+
29+
<ul
30+
cdkTree
31+
class="example-tree"
32+
[multi]="multi.value"
33+
[disabled]="disabled.value"
34+
[selectionMode]="selectionMode"
35+
[focusMode]="focusMode"
36+
[wrap]="wrap.value"
37+
[skipDisabled]="skipDisabled.value"
38+
[nav]="nav.value"
39+
[(value)]="selectedValues"
40+
#tree="cdkTree"
41+
>
42+
<ng-template
43+
[ngTemplateOutlet]="treeNodes"
44+
[ngTemplateOutletContext]="{nodes: nodes, parent: tree}"
45+
/>
46+
</ul>
47+
48+
<ng-template #treeNodes let-nodes="nodes" let-parent="parent">
49+
@for (node of nodes; track node.value) {
50+
<li
51+
cdkTreeItem
52+
[parent]="parent"
53+
[value]="node.value"
54+
[label]="node.name"
55+
[disabled]="node.disabled"
56+
#treeItem="cdkTreeItem"
57+
class="example-tree-item example-selectable example-stateful"
58+
>
59+
<span aria-hidden="true" class="material-symbols-outlined example-parent-icon example-icon">{{node.children ? 'chevron_right' : ''}}</span>
60+
<span aria-hidden="true" class="material-symbols-outlined example-icon">{{node.children ? 'folder' : 'docs'}}</span>
61+
{{ node.name }}
62+
<span aria-hidden="true" class="material-symbols-outlined example-selected-icon example-icon">check</span>
63+
</li>
64+
65+
@if (node.children) {
66+
<ul cdkTreeItemGroup [ownedBy]="treeItem" #group="cdkTreeItemGroup">
67+
<ng-template cdkTreeItemGroupContent>
68+
<ng-template
69+
[ngTemplateOutlet]="treeNodes"
70+
[ngTemplateOutletContext]="{nodes: node.children, parent: group}"
71+
/>
72+
</ng-template>
73+
</ul>
74+
}
75+
}
76+
</ng-template>

‎src/components-examples/cdk-experimental/tree/cdk-tree-configurable/cdk-tree-configurable-example.ts

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
import {Component, model} from '@angular/core';
9+
import {NgTemplateOutlet} from '@angular/common';
10+
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
11+
import {MatCheckboxModule} from '@angular/material/checkbox';
12+
import {MatFormFieldModule} from '@angular/material/form-field';
13+
import {MatSelectModule} from '@angular/material/select';
14+
import {
15+
CdkTree,
16+
CdkTreeItem,
17+
CdkTreeItemGroup,
18+
CdkTreeItemGroupContent,
19+
} from '@angular/cdk-experimental/tree';
20+
import {NODES, TreeNode} from '../tree-data';
21+
22+
/** @title Configurable Tree. */
23+
@Component({
24+
selector: 'cdk-tree-configurable-example',
25+
exportAs: 'cdkTreeConfigurableExample',
26+
templateUrl: 'cdk-tree-configurable-example.html',
27+
styleUrl: '../tree-common.css',
28+
standalone: true,
29+
imports: [
30+
FormsModule,
31+
ReactiveFormsModule,
32+
MatCheckboxModule,
33+
MatFormFieldModule,
34+
MatSelectModule,
35+
NgTemplateOutlet,
36+
CdkTree,
37+
CdkTreeItem,
38+
CdkTreeItemGroup,
39+
CdkTreeItemGroupContent,
40+
],
41+
})
42+
export class CdkTreeConfigurableExample {
43+
nodes: TreeNode[] = NODES;
44+
45+
selectionMode: 'explicit' | 'follow' = 'explicit';
46+
focusMode: 'roving' | 'activedescendant' = 'roving';
47+
48+
multi = new FormControl(false, {nonNullable: true});
49+
disabled = new FormControl(false, {nonNullable: true});
50+
wrap = new FormControl(true, {nonNullable: true});
51+
skipDisabled = new FormControl(true, {nonNullable: true});
52+
nav = new FormControl(false, {nonNullable: true});
53+
54+
selectedValues = model<string[]>(['package.json']);
55+
}

‎src/components-examples/cdk-experimental/tree/cdk-tree-disabled-focusable/cdk-tree-disabled-focusable-example.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<ul cdkTree [skipDisabled]="false" #tree="cdkTree" class="example-tree">
2+
<ng-template
3+
[ngTemplateOutlet]="treeNodes"
4+
[ngTemplateOutletContext]="{nodes: nodes, parent: tree}"
5+
/>
6+
</ul>
7+
8+
<ng-template #treeNodes let-nodes="nodes" let-parent="parent">
9+
@for (node of nodes; track node.value) {
10+
<li
11+
cdkTreeItem
12+
[parent]="parent"
13+
[value]="node.value"
14+
[label]="node.name"
15+
[disabled]="node.disabled"
16+
#treeItem="cdkTreeItem"
17+
class="example-tree-item example-selectable example-stateful"
18+
>
19+
<span aria-hidden="true" class="material-symbols-outlined example-parent-icon example-icon">{{node.children ? 'chevron_right' : ''}}</span>
20+
<span aria-hidden="true" class="material-symbols-outlined example-icon">{{node.children ? 'folder' : 'docs'}}</span>
21+
{{ node.name }}
22+
<span aria-hidden="true" class="material-symbols-outlined example-selected-icon example-icon">check</span>
23+
</li>
24+
25+
@if (node.children) {
26+
<ul cdkTreeItemGroup [ownedBy]="treeItem" #group="cdkTreeItemGroup">
27+
<ng-template cdkTreeItemGroupContent>
28+
<ng-template
29+
[ngTemplateOutlet]="treeNodes"
30+
[ngTemplateOutletContext]="{nodes: node.children, parent: group}"
31+
/>
32+
</ng-template>
33+
</ul>
34+
} }
35+
</ng-template>

‎src/components-examples/cdk-experimental/tree/cdk-tree-disabled-focusable/cdk-tree-disabled-focusable-example.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
9+
import {Component} from '@angular/core';
10+
import {NgTemplateOutlet} from '@angular/common';
11+
import {
12+
CdkTree,
13+
CdkTreeItem,
14+
CdkTreeItemGroup,
15+
CdkTreeItemGroupContent,
16+
} from '@angular/cdk-experimental/tree';
17+
import {TreeNode, NODES} from '../tree-data';
18+
19+
/**
20+
* @title Tree with focusable disabled items.
21+
*/
22+
@Component({
23+
selector: 'cdk-tree-disabled-focusable-example',
24+
exportAs: 'cdkTreeDisabledFocusableExample',
25+
templateUrl: 'cdk-tree-disabled-focusable-example.html',
26+
styleUrl: '../tree-common.css',
27+
standalone: true,
28+
imports: [CdkTree, CdkTreeItem, CdkTreeItemGroup, CdkTreeItemGroupContent, NgTemplateOutlet],
29+
})
30+
export class CdkTreeDisabledFocusableExample {
31+
nodes: TreeNode[] = NODES;
32+
}

‎src/components-examples/cdk-experimental/tree/cdk-tree-disabled-skipped/cdk-tree-disabled-skipped-example.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<ul cdkTree [skipDisabled]="true" #tree="cdkTree" class="example-tree">
2+
<ng-template
3+
[ngTemplateOutlet]="treeNodes"
4+
[ngTemplateOutletContext]="{nodes: nodes, parent: tree}"
5+
/>
6+
</ul>
7+
8+
<ng-template #treeNodes let-nodes="nodes" let-parent="parent">
9+
@for (node of nodes; track node.value) {
10+
<li
11+
cdkTreeItem
12+
[parent]="parent"
13+
[value]="node.value"
14+
[label]="node.name"
15+
[disabled]="node.disabled"
16+
#treeItem="cdkTreeItem"
17+
class="example-tree-item example-selectable example-stateful"
18+
>
19+
<span aria-hidden="true" class="material-symbols-outlined example-parent-icon example-icon">{{node.children ? 'chevron_right' : ''}}</span>
20+
<span aria-hidden="true" class="material-symbols-outlined example-icon">{{node.children ? 'folder' : 'docs'}}</span>
21+
{{ node.name }}
22+
<span aria-hidden="true" class="material-symbols-outlined example-selected-icon example-icon">check</span>
23+
</li>
24+
25+
@if (node.children) {
26+
<ul cdkTreeItemGroup [ownedBy]="treeItem" #group="cdkTreeItemGroup">
27+
<ng-template cdkTreeItemGroupContent>
28+
<ng-template
29+
[ngTemplateOutlet]="treeNodes"
30+
[ngTemplateOutletContext]="{nodes: node.children, parent: group}"
31+
/>
32+
</ng-template>
33+
</ul>
34+
} }
35+
</ng-template>

‎src/components-examples/cdk-experimental/tree/cdk-tree-disabled-skipped/cdk-tree-disabled-skipped-example.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
9+
import {Component} from '@angular/core';
10+
import {NgTemplateOutlet} from '@angular/common';
11+
import {
12+
CdkTree,
13+
CdkTreeItem,
14+
CdkTreeItemGroup,
15+
CdkTreeItemGroupContent,
16+
} from '@angular/cdk-experimental/tree';
17+
import {TreeNode, NODES} from '../tree-data';
18+
19+
/**
20+
* @title Tree with skipped disabled items.
21+
*/
22+
@Component({
23+
selector: 'cdk-tree-disabled-skipped-example',
24+
exportAs: 'cdkTreeDisabledSkippedExample',
25+
templateUrl: 'cdk-tree-disabled-skipped-example.html',
26+
styleUrl: '../tree-common.css',
27+
standalone: true,
28+
imports: [CdkTree, CdkTreeItem, CdkTreeItemGroup, CdkTreeItemGroupContent, NgTemplateOutlet],
29+
})
30+
export class CdkTreeDisabledSkippedExample {
31+
nodes: TreeNode[] = NODES;
32+
}

‎src/components-examples/cdk-experimental/tree/cdk-tree-disabled/cdk-tree-disabled-example.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<ul cdkTree [disabled]="true" #tree="cdkTree" class="example-tree">
2+
<ng-template
3+
[ngTemplateOutlet]="treeNodes"
4+
[ngTemplateOutletContext]="{nodes: nodes, parent: tree}"
5+
/>
6+
</ul>
7+
8+
<ng-template #treeNodes let-nodes="nodes" let-parent="parent">
9+
@for (node of nodes; track node.value) {
10+
<li
11+
cdkTreeItem
12+
[parent]="parent"
13+
[value]="node.value"
14+
[label]="node.name"
15+
[disabled]="node.disabled"
16+
#treeItem="cdkTreeItem"
17+
class="example-tree-item example-selectable example-stateful"
18+
>
19+
<span aria-hidden="true" class="material-symbols-outlined example-parent-icon example-icon">{{node.children ? 'chevron_right' : ''}}</span>
20+
<span aria-hidden="true" class="material-symbols-outlined example-icon">{{node.children ? 'folder' : 'docs'}}</span>
21+
{{ node.name }}
22+
<span aria-hidden="true" class="material-symbols-outlined example-selected-icon example-icon">check</span>
23+
</li>
24+
25+
@if (node.children) {
26+
<ul cdkTreeItemGroup [ownedBy]="treeItem" #group="cdkTreeItemGroup">
27+
<ng-template cdkTreeItemGroupContent>
28+
<ng-template
29+
[ngTemplateOutlet]="treeNodes"
30+
[ngTemplateOutletContext]="{nodes: node.children, parent: group}"
31+
/>
32+
</ng-template>
33+
</ul>
34+
} }
35+
</ng-template>

0 commit comments

Comments
 (0)