Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ed290e3

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

30 files changed

+967
-265
lines changed
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>
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+
}
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>
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+
}
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>
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+
}
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>
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+
}
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)

AltStyle によって変換されたページ (->オリジナル) /