Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 25c31fd

Browse files
wagnermacielgoogle-labs-jules[bot]
wagnermaciel
and
google-labs-jules[bot]
authoredJun 20, 2025··
test(cdk-experimental/accordion): add examples to dev-app (#31387)
Adds several new examples for the cdk-experimental accordion component: - Single expansion - Multi expansion - Disabled items that are focusable - Disabled items that are skipped Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
1 parent 9a856ad commit 25c31fd

18 files changed

+697
-17
lines changed
 

‎src/components-examples/cdk-experimental/accordion/cdk-accordion/cdk-accordion-example.html renamed to ‎src/components-examples/cdk-experimental/accordion/cdk-accordion-configurable/cdk-accordion-configurable-example.html

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
[wrap]="wrap.value"
2424
[(value)]="expandedIds"
2525
>
26-
<div class="example-accordion-container">
26+
<div class="example-accordion">
2727
<h3 class="example-accordion-header">
2828
<button cdkAccordionTrigger value="item1">
2929
Item 1 Trigger
@@ -38,7 +38,7 @@ <h3 class="example-accordion-header">
3838
</div>
3939
</div>
4040

41-
<div class="example-accordion-container">
41+
<div class="example-accordion">
4242
<h3 class="example-accordion-header">
4343
<button cdkAccordionTrigger value="item2" disabled>
4444
Item 2 Trigger (disabled)
@@ -53,7 +53,7 @@ <h3 class="example-accordion-header">
5353
</div>
5454
</div>
5555

56-
<div class="example-accordion-container">
56+
<div class="example-accordion">
5757
<h3 class="example-accordion-header">
5858
<button cdkAccordionTrigger value="item3">
5959
Item 3 Trigger
@@ -70,4 +70,40 @@ <h3 class="example-accordion-header">
7070
</ng-template>
7171
</div>
7272
</div>
73+
74+
<div class="example-accordion">
75+
<h3 class="example-accordion-header">
76+
<button cdkAccordionTrigger value="item4">
77+
Item 4 Trigger
78+
<mat-icon aria-hidden="true">{{expansionIcon('item4')()}}</mat-icon>
79+
</button>
80+
</h3>
81+
<div
82+
cdkAccordionPanel
83+
value="item4"
84+
class="example-accordion-panel"
85+
>
86+
<ng-template cdkAccordionContent>
87+
<p>This is the content for Item 4</p>
88+
</ng-template>
89+
</div>
90+
</div>
91+
92+
<div class="example-accordion">
93+
<h3 class="example-accordion-header">
94+
<button cdkAccordionTrigger value="item5">
95+
Item 5 Trigger
96+
<mat-icon aria-hidden="true">{{expansionIcon('item5')()}}</mat-icon>
97+
</button>
98+
</h3>
99+
<div
100+
cdkAccordionPanel
101+
value="item5"
102+
class="example-accordion-panel"
103+
>
104+
<ng-template cdkAccordionContent>
105+
<p>This is the content for Item 5</p>
106+
</ng-template>
107+
</div>
108+
</div>
73109
</div>

‎src/components-examples/cdk-experimental/accordion/cdk-accordion/cdk-accordion-example.ts renamed to ‎src/components-examples/cdk-experimental/accordion/cdk-accordion-configurable/cdk-accordion-configurable-example.ts

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@ import {
1212
CdkAccordionContent,
1313
} from '@angular/cdk-experimental/accordion';
1414

15-
/** @title Accordion using UI Patterns. */
15+
/** @title Configurable Accordion using UI Patterns. */
1616
@Component({
17-
selector: 'cdk-accordion-example',
18-
exportAs: 'cdkAccordionExample',
19-
templateUrl: 'cdk-accordion-example.html',
20-
styleUrl: 'cdk-accordion-example.css',
17+
selector: 'cdk-accordion-configurable-example',
18+
exportAs: 'cdkAccordionConfigurableExample',
19+
templateUrl: 'cdk-accordion-configurable-example.html',
20+
styleUrl: '../cdk-accordion-examples.css', // Point to shared CSS
21+
standalone: true,
2122
imports: [
2223
ReactiveFormsModule,
2324
MatIconModule,
@@ -31,7 +32,7 @@ import {
3132
CdkAccordionContent,
3233
],
3334
})
34-
export class CdkAccordionExample {
35+
export class CdkAccordionConfigurableExample {
3536
// Accordion Group Properties
3637
wrap = new FormControl(true, {nonNullable: true});
3738
multi = new FormControl(true, {nonNullable: true});
@@ -40,7 +41,7 @@ export class CdkAccordionExample {
4041
expandedIds = model<string[]>(['item1']);
4142

4243
// Example items
43-
items = ['item1', 'item2', 'item3'];
44+
items = ['item1', 'item2', 'item3', 'item4', 'item5'];
4445

4546
expansionIcon(item: string): Signal<string> {
4647
return computed(() => (this.expandedIds().includes(item) ? 'expand_less' : 'expand_more'));

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<div
2+
cdkAccordionGroup
3+
class="example-accordion-group"
4+
[multiExpandable]="true"
5+
[skipDisabled]="false"
6+
[(value)]="expandedIds"
7+
>
8+
<div class="example-accordion">
9+
<h3 class="example-accordion-header">
10+
<button cdkAccordionTrigger value="item1">
11+
Item 1 Trigger
12+
<mat-icon aria-hidden="true">{{expansionIcon('item1')()}}</mat-icon>
13+
</button>
14+
</h3>
15+
<div cdkAccordionPanel value="item1" class="example-accordion-panel">
16+
<ng-template cdkAccordionContent>
17+
<p>This is the content for Item 1.</p>
18+
</ng-template>
19+
</div>
20+
</div>
21+
22+
<div class="example-accordion">
23+
<h3 class="example-accordion-header">
24+
<button cdkAccordionTrigger value="item2" disabled>
25+
Item 2 Trigger (disabled)
26+
<mat-icon aria-hidden="true">{{expansionIcon('item2')()}}</mat-icon>
27+
</button>
28+
</h3>
29+
<div cdkAccordionPanel value="item2" class="example-accordion-panel">
30+
<ng-template cdkAccordionContent>
31+
<p>This is the content for Item 2. This should not be expandable if trigger is disabled.</p>
32+
</ng-template>
33+
</div>
34+
</div>
35+
36+
<div class="example-accordion">
37+
<h3 class="example-accordion-header">
38+
<button cdkAccordionTrigger value="item3">
39+
Item 3 Trigger
40+
<mat-icon aria-hidden="true">{{expansionIcon('item3')()}}</mat-icon>
41+
</button>
42+
</h3>
43+
<div cdkAccordionPanel value="item3" class="example-accordion-panel">
44+
<ng-template cdkAccordionContent>
45+
<p>This is the content for Item 3.</p>
46+
</ng-template>
47+
</div>
48+
</div>
49+
50+
<div class="example-accordion">
51+
<h3 class="example-accordion-header">
52+
<button cdkAccordionTrigger value="item4">
53+
Item 4 Trigger
54+
<mat-icon aria-hidden="true">{{expansionIcon('item4')()}}</mat-icon>
55+
</button>
56+
</h3>
57+
<div cdkAccordionPanel value="item4" class="example-accordion-panel">
58+
<ng-template cdkAccordionContent>
59+
<p>This is the content for Item 4</p>
60+
</ng-template>
61+
</div>
62+
</div>
63+
64+
<div class="example-accordion">
65+
<h3 class="example-accordion-header">
66+
<button cdkAccordionTrigger value="item5">
67+
Item 5 Trigger
68+
<mat-icon aria-hidden="true">{{expansionIcon('item5')()}}</mat-icon>
69+
</button>
70+
</h3>
71+
<div cdkAccordionPanel value="item5" class="example-accordion-panel">
72+
<ng-template cdkAccordionContent>
73+
<p>This is the content for Item 5</p>
74+
</ng-template>
75+
</div>
76+
</div>
77+
</div>

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {Component, computed, model, Signal} from '@angular/core';
2+
import {MatIconModule} from '@angular/material/icon';
3+
import {
4+
CdkAccordionGroup,
5+
CdkAccordionTrigger,
6+
CdkAccordionPanel,
7+
CdkAccordionContent,
8+
} from '@angular/cdk-experimental/accordion';
9+
10+
/** @title Accordion with focusable disabled items. */
11+
@Component({
12+
selector: 'cdk-accordion-disabled-focusable-example',
13+
templateUrl: 'cdk-accordion-disabled-focusable-example.html',
14+
styleUrl: '../cdk-accordion-examples.css',
15+
standalone: true,
16+
imports: [
17+
MatIconModule,
18+
CdkAccordionGroup,
19+
CdkAccordionTrigger,
20+
CdkAccordionPanel,
21+
CdkAccordionContent,
22+
],
23+
})
24+
export class CdkAccordionDisabledFocusableExample {
25+
expandedIds = model<string[]>([]);
26+
27+
expansionIcon(item: string): Signal<string> {
28+
return computed(() => (this.expandedIds().includes(item) ? 'expand_less' : 'expand_more'));
29+
}
30+
}

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<div
2+
cdkAccordionGroup
3+
class="example-accordion-group"
4+
[multiExpandable]="true"
5+
[skipDisabled]="true"
6+
[(value)]="expandedIds"
7+
>
8+
<div class="example-accordion">
9+
<h3 class="example-accordion-header">
10+
<button cdkAccordionTrigger value="item1">
11+
Item 1 Trigger
12+
<mat-icon aria-hidden="true">{{expansionIcon('item1')()}}</mat-icon>
13+
</button>
14+
</h3>
15+
<div cdkAccordionPanel value="item1" class="example-accordion-panel">
16+
<ng-template cdkAccordionContent>
17+
<p>This is the content for Item 1.</p>
18+
</ng-template>
19+
</div>
20+
</div>
21+
22+
<div class="example-accordion">
23+
<h3 class="example-accordion-header">
24+
<button cdkAccordionTrigger value="item2" disabled>
25+
Item 2 Trigger (disabled)
26+
<mat-icon aria-hidden="true">{{expansionIcon('item2')()}}</mat-icon>
27+
</button>
28+
</h3>
29+
<div cdkAccordionPanel value="item2" class="example-accordion-panel">
30+
<ng-template cdkAccordionContent>
31+
<p>This is the content for Item 2. This should not be reachable or expandable.</p>
32+
</ng-template>
33+
</div>
34+
</div>
35+
36+
<div class="example-accordion">
37+
<h3 class="example-accordion-header">
38+
<button cdkAccordionTrigger value="item3">
39+
Item 3 Trigger
40+
<mat-icon aria-hidden="true">{{expansionIcon('item3')()}}</mat-icon>
41+
</button>
42+
</h3>
43+
<div cdkAccordionPanel value="item3" class="example-accordion-panel">
44+
<ng-template cdkAccordionContent>
45+
<p>This is the content for Item 3.</p>
46+
</ng-template>
47+
</div>
48+
</div>
49+
50+
<div class="example-accordion">
51+
<h3 class="example-accordion-header">
52+
<button cdkAccordionTrigger value="item4">
53+
Item 4 Trigger
54+
<mat-icon aria-hidden="true">{{expansionIcon('item4')()}}</mat-icon>
55+
</button>
56+
</h3>
57+
<div cdkAccordionPanel value="item4" class="example-accordion-panel">
58+
<ng-template cdkAccordionContent>
59+
<p>This is the content for Item 4</p>
60+
</ng-template>
61+
</div>
62+
</div>
63+
64+
<div class="example-accordion">
65+
<h3 class="example-accordion-header">
66+
<button cdkAccordionTrigger value="item5">
67+
Item 5 Trigger
68+
<mat-icon aria-hidden="true">{{expansionIcon('item5')()}}</mat-icon>
69+
</button>
70+
</h3>
71+
<div cdkAccordionPanel value="item5" class="example-accordion-panel">
72+
<ng-template cdkAccordionContent>
73+
<p>This is the content for Item 5</p>
74+
</ng-template>
75+
</div>
76+
</div>
77+
</div>

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {Component, computed, model, Signal} from '@angular/core';
2+
import {MatIconModule} from '@angular/material/icon';
3+
import {
4+
CdkAccordionGroup,
5+
CdkAccordionTrigger,
6+
CdkAccordionPanel,
7+
CdkAccordionContent,
8+
} from '@angular/cdk-experimental/accordion';
9+
10+
/** @title Accordion with skipped disabled items. */
11+
@Component({
12+
selector: 'cdk-accordion-disabled-skipped-example',
13+
templateUrl: 'cdk-accordion-disabled-skipped-example.html',
14+
styleUrl: '../cdk-accordion-examples.css',
15+
standalone: true,
16+
imports: [
17+
MatIconModule,
18+
CdkAccordionGroup,
19+
CdkAccordionTrigger,
20+
CdkAccordionPanel,
21+
CdkAccordionContent,
22+
],
23+
})
24+
export class CdkAccordionDisabledSkippedExample {
25+
expandedIds = model<string[]>([]);
26+
27+
expansionIcon(item: string): Signal<string> {
28+
return computed(() => (this.expandedIds().includes(item) ? 'expand_less' : 'expand_more'));
29+
}
30+
}

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<div cdkAccordionGroup class="example-accordion-group" [(value)]="expandedIds" [disabled]="true">
2+
<div class="example-accordion">
3+
<h3 class="example-accordion-header">
4+
<button cdkAccordionTrigger value="item1">
5+
Item 1 Trigger
6+
<mat-icon aria-hidden="true">{{expansionIcon('item1')()}}</mat-icon>
7+
</button>
8+
</h3>
9+
<div cdkAccordionPanel value="item1" class="example-accordion-panel">
10+
<ng-template cdkAccordionContent>
11+
<p>This is the content for Item 1.</p>
12+
<button>Focusable Button</button>
13+
</ng-template>
14+
</div>
15+
</div>
16+
17+
<div class="example-accordion">
18+
<h3 class="example-accordion-header">
19+
<button cdkAccordionTrigger value="item2">
20+
Item 2 Trigger
21+
<mat-icon aria-hidden="true">{{expansionIcon('item2')()}}</mat-icon>
22+
</button>
23+
</h3>
24+
<div cdkAccordionPanel value="item2" class="example-accordion-panel">
25+
<ng-template cdkAccordionContent>
26+
<p>This is the content for Item 2.</p>
27+
<label>Input inside panel: <input type="text" /></label>
28+
</ng-template>
29+
</div>
30+
</div>
31+
32+
<div class="example-accordion">
33+
<h3 class="example-accordion-header">
34+
<button cdkAccordionTrigger value="item3">
35+
Item 3 Trigger
36+
<mat-icon aria-hidden="true">{{expansionIcon('item3')()}}</mat-icon>
37+
</button>
38+
</h3>
39+
<div cdkAccordionPanel value="item3" class="example-accordion-panel">
40+
<ng-template cdkAccordionContent>
41+
<p>This is the content for Item 3.</p>
42+
</ng-template>
43+
</div>
44+
</div>
45+
46+
<div class="example-accordion">
47+
<h3 class="example-accordion-header">
48+
<button cdkAccordionTrigger value="item4">
49+
Item 4 Trigger
50+
<mat-icon aria-hidden="true">{{expansionIcon('item4')()}}</mat-icon>
51+
</button>
52+
</h3>
53+
<div cdkAccordionPanel value="item4" class="example-accordion-panel">
54+
<ng-template cdkAccordionContent>
55+
<p>This is the content for Item 4</p>
56+
</ng-template>
57+
</div>
58+
</div>
59+
60+
<div class="example-accordion">
61+
<h3 class="example-accordion-header">
62+
<button cdkAccordionTrigger value="item5">
63+
Item 5 Trigger
64+
<mat-icon aria-hidden="true">{{expansionIcon('item5')()}}</mat-icon>
65+
</button>
66+
</h3>
67+
<div cdkAccordionPanel value="item5" class="example-accordion-panel">
68+
<ng-template cdkAccordionContent>
69+
<p>This is the content for Item 5</p>
70+
</ng-template>
71+
</div>
72+
</div>
73+
</div>

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {Component, computed, model, Signal} from '@angular/core';
2+
import {MatIconModule} from '@angular/material/icon';
3+
import {
4+
CdkAccordionGroup,
5+
CdkAccordionTrigger,
6+
CdkAccordionPanel,
7+
CdkAccordionContent,
8+
} from '@angular/cdk-experimental/accordion';
9+
10+
/** @title Disabled Accordion. */
11+
@Component({
12+
selector: 'cdk-accordion-disabled-example',
13+
templateUrl: 'cdk-accordion-disabled-example.html',
14+
styleUrl: '../cdk-accordion-examples.css',
15+
standalone: true,
16+
imports: [
17+
MatIconModule,
18+
CdkAccordionGroup,
19+
CdkAccordionTrigger,
20+
CdkAccordionPanel,
21+
CdkAccordionContent,
22+
],
23+
})
24+
export class CdkAccordionDisabledExample {
25+
expandedIds = model<string[]>(['item1']);
26+
27+
expansionIcon(item: string): Signal<string> {
28+
return computed(() => (this.expandedIds().includes(item) ? 'expand_less' : 'expand_more'));
29+
}
30+
}

‎src/components-examples/cdk-experimental/accordion/cdk-accordion/cdk-accordion-example.css renamed to ‎src/components-examples/cdk-experimental/accordion/cdk-accordion-examples.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* Common styles for CDK Accordion examples */
12
.example-accordion-controls {
23
display: flex;
34
flex-wrap: wrap;

‎src/components-examples/cdk-experimental/accordion/cdk-accordion-multi-expansion/cdk-accordion-multi-expansion-example.html

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<div
2+
cdkAccordionGroup
3+
class="example-accordion-group"
4+
[multiExpandable]="true"
5+
[(value)]="expandedIds"
6+
>
7+
<div class="example-accordion">
8+
<h3 class="example-accordion-header">
9+
<button cdkAccordionTrigger value="item1">
10+
Item 1 Trigger
11+
<mat-icon aria-hidden="true">{{expansionIcon('item1')()}}</mat-icon>
12+
</button>
13+
</h3>
14+
<div cdkAccordionPanel value="item1" class="example-accordion-panel">
15+
<ng-template cdkAccordionContent>
16+
<p>This is the content for Item 1. Multiple items can be expanded.</p>
17+
<button>Focusable Button</button>
18+
</ng-template>
19+
</div>
20+
</div>
21+
22+
<div class="example-accordion">
23+
<h3 class="example-accordion-header">
24+
<button cdkAccordionTrigger value="item2">
25+
Item 2 Trigger
26+
<mat-icon aria-hidden="true">{{expansionIcon('item2')()}}</mat-icon>
27+
</button>
28+
</h3>
29+
<div cdkAccordionPanel value="item2" class="example-accordion-panel">
30+
<ng-template cdkAccordionContent>
31+
<p>This is the content for Item 2.</p>
32+
<label>Input inside panel: <input type="text"></label>
33+
</ng-template>
34+
</div>
35+
</div>
36+
37+
<div class="example-accordion">
38+
<h3 class="example-accordion-header">
39+
<button cdkAccordionTrigger value="item3">
40+
Item 3 Trigger
41+
<mat-icon aria-hidden="true">{{expansionIcon('item3')()}}</mat-icon>
42+
</button>
43+
</h3>
44+
<div
45+
cdkAccordionPanel
46+
value="item3"
47+
class="example-accordion-panel"
48+
>
49+
<ng-template cdkAccordionContent>
50+
<p>This is the content for Item 3.</p>
51+
</ng-template>
52+
</div>
53+
</div>
54+
55+
<div class="example-accordion">
56+
<h3 class="example-accordion-header">
57+
<button cdkAccordionTrigger value="item4">
58+
Item 4 Trigger
59+
<mat-icon aria-hidden="true">{{expansionIcon('item4')()}}</mat-icon>
60+
</button>
61+
</h3>
62+
<div
63+
cdkAccordionPanel
64+
value="item4"
65+
class="example-accordion-panel"
66+
>
67+
<ng-template cdkAccordionContent>
68+
<p>This is the content for Item 4</p>
69+
</ng-template>
70+
</div>
71+
</div>
72+
73+
<div class="example-accordion">
74+
<h3 class="example-accordion-header">
75+
<button cdkAccordionTrigger value="item5">
76+
Item 5 Trigger
77+
<mat-icon aria-hidden="true">{{expansionIcon('item5')()}}</mat-icon>
78+
</button>
79+
</h3>
80+
<div
81+
cdkAccordionPanel
82+
value="item5"
83+
class="example-accordion-panel"
84+
>
85+
<ng-template cdkAccordionContent>
86+
<p>This is the content for Item 5</p>
87+
</ng-template>
88+
</div>
89+
</div>
90+
</div>

‎src/components-examples/cdk-experimental/accordion/cdk-accordion-multi-expansion/cdk-accordion-multi-expansion-example.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {Component, computed, model, Signal} from '@angular/core';
2+
import {MatIconModule} from '@angular/material/icon';
3+
import {
4+
CdkAccordionGroup,
5+
CdkAccordionTrigger,
6+
CdkAccordionPanel,
7+
CdkAccordionContent,
8+
} from '@angular/cdk-experimental/accordion';
9+
10+
/** @title Accordion with multi-expansion. */
11+
@Component({
12+
selector: 'cdk-accordion-multi-expansion-example',
13+
templateUrl: 'cdk-accordion-multi-expansion-example.html',
14+
styleUrl: '../cdk-accordion-examples.css',
15+
standalone: true,
16+
imports: [
17+
MatIconModule,
18+
CdkAccordionGroup,
19+
CdkAccordionTrigger,
20+
CdkAccordionPanel,
21+
CdkAccordionContent,
22+
],
23+
})
24+
export class CdkAccordionMultiExpansionExample {
25+
expandedIds = model<string[]>([]);
26+
27+
expansionIcon(item: string): Signal<string> {
28+
return computed(() => (this.expandedIds().includes(item) ? 'expand_less' : 'expand_more'));
29+
}
30+
}

‎src/components-examples/cdk-experimental/accordion/cdk-accordion-single-expansion/cdk-accordion-single-expansion-example.html

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<div
2+
cdkAccordionGroup
3+
class="example-accordion-group"
4+
[multiExpandable]="false"
5+
[(value)]="expandedIds"
6+
>
7+
<div class="example-accordion">
8+
<h3 class="example-accordion-header">
9+
<button cdkAccordionTrigger value="item1">
10+
Item 1 Trigger
11+
<mat-icon aria-hidden="true">{{expansionIcon('item1')()}}</mat-icon>
12+
</button>
13+
</h3>
14+
<div cdkAccordionPanel value="item1" class="example-accordion-panel">
15+
<ng-template cdkAccordionContent>
16+
<p>This is the content for Item 1.</p>
17+
<button>Focusable Button</button>
18+
</ng-template>
19+
</div>
20+
</div>
21+
22+
<div class="example-accordion">
23+
<h3 class="example-accordion-header">
24+
<button cdkAccordionTrigger value="item2">
25+
Item 2 Trigger
26+
<mat-icon aria-hidden="true">{{expansionIcon('item2')()}}</mat-icon>
27+
</button>
28+
</h3>
29+
<div cdkAccordionPanel value="item2" class="example-accordion-panel">
30+
<ng-template cdkAccordionContent>
31+
<p>This is the content for Item 2.</p>
32+
<label>Input inside panel: <input type="text"></label>
33+
</ng-template>
34+
</div>
35+
</div>
36+
37+
<div class="example-accordion">
38+
<h3 class="example-accordion-header">
39+
<button cdkAccordionTrigger value="item3">
40+
Item 3 Trigger
41+
<mat-icon aria-hidden="true">{{expansionIcon('item3')()}}</mat-icon>
42+
</button>
43+
</h3>
44+
<div
45+
cdkAccordionPanel
46+
value="item3"
47+
class="example-accordion-panel"
48+
>
49+
<ng-template cdkAccordionContent>
50+
<p>This is the content for Item 3.</p>
51+
</ng-template>
52+
</div>
53+
</div>
54+
55+
<div class="example-accordion">
56+
<h3 class="example-accordion-header">
57+
<button cdkAccordionTrigger value="item4">
58+
Item 4 Trigger
59+
<mat-icon aria-hidden="true">{{expansionIcon('item4')()}}</mat-icon>
60+
</button>
61+
</h3>
62+
<div
63+
cdkAccordionPanel
64+
value="item4"
65+
class="example-accordion-panel"
66+
>
67+
<ng-template cdkAccordionContent>
68+
<p>This is the content for Item 4</p>
69+
</ng-template>
70+
</div>
71+
</div>
72+
73+
<div class="example-accordion">
74+
<h3 class="example-accordion-header">
75+
<button cdkAccordionTrigger value="item5">
76+
Item 5 Trigger
77+
<mat-icon aria-hidden="true">{{expansionIcon('item5')()}}</mat-icon>
78+
</button>
79+
</h3>
80+
<div
81+
cdkAccordionPanel
82+
value="item5"
83+
class="example-accordion-panel"
84+
>
85+
<ng-template cdkAccordionContent>
86+
<p>This is the content for Item 5</p>
87+
</ng-template>
88+
</div>
89+
</div>
90+
</div>

‎src/components-examples/cdk-experimental/accordion/cdk-accordion-single-expansion/cdk-accordion-single-expansion-example.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {Component, computed, model, Signal} from '@angular/core';
2+
import {MatIconModule} from '@angular/material/icon';
3+
import {
4+
CdkAccordionGroup,
5+
CdkAccordionTrigger,
6+
CdkAccordionPanel,
7+
CdkAccordionContent,
8+
} from '@angular/cdk-experimental/accordion';
9+
10+
/** @title Accordion with single expansion. */
11+
@Component({
12+
selector: 'cdk-accordion-single-expansion-example',
13+
templateUrl: 'cdk-accordion-single-expansion-example.html',
14+
styleUrl: '../cdk-accordion-examples.css',
15+
standalone: true,
16+
imports: [
17+
MatIconModule,
18+
CdkAccordionGroup,
19+
CdkAccordionTrigger,
20+
CdkAccordionPanel,
21+
CdkAccordionContent,
22+
],
23+
})
24+
export class CdkAccordionSingleExpansionExample {
25+
expandedIds = model<string[]>([]);
26+
27+
expansionIcon(item: string): Signal<string> {
28+
return computed(() => (this.expandedIds().includes(item) ? 'expand_less' : 'expand_more'));
29+
}
30+
}

‎src/components-examples/cdk-experimental/accordion/index.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1-
export {CdkAccordionExample} from './cdk-accordion/cdk-accordion-example';
1+
export {CdkAccordionConfigurableExample} from './cdk-accordion-configurable/cdk-accordion-configurable-example';
2+
export {CdkAccordionSingleExpansionExample} from './cdk-accordion-single-expansion/cdk-accordion-single-expansion-example';
3+
export {CdkAccordionMultiExpansionExample} from './cdk-accordion-multi-expansion/cdk-accordion-multi-expansion-example';
4+
export {CdkAccordionDisabledFocusableExample} from './cdk-accordion-disabled-focusable/cdk-accordion-disabled-focusable-example';
5+
export {CdkAccordionDisabledSkippedExample} from './cdk-accordion-disabled-skipped/cdk-accordion-disabled-skipped-example';
6+
export {CdkAccordionDisabledExample} from './cdk-accordion-disabled/cdk-accordion-disabled-example';

‎src/dev-app/cdk-experimental-accordion/BUILD.bazel

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ package(default_visibility = ["//visibility:public"])
55
ng_project(
66
name = "cdk-experimental-accordion",
77
srcs = glob(["**/*.ts"]),
8-
assets = ["cdk-accordion-demo.html"],
8+
assets = [
9+
"cdk-accordion-demo.html",
10+
"cdk-accordion-demo.css",
11+
],
912
deps = ["//src/components-examples/cdk-experimental/accordion"],
1013
)

‎src/dev-app/cdk-experimental-accordion/cdk-accordion-demo.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.example-accordion-grid {
2+
display: grid;
3+
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
4+
gap: 20px;
5+
}
6+
7+
.example-accordion-container {
8+
display: flex;
9+
flex-direction: column;
10+
justify-content: flex-start;
11+
}
12+
13+
.example-accordion-container,
14+
.example-configurable-accordion-container {
15+
border: 1px solid #555;
16+
border-radius: 5px;
17+
padding: 20px;
18+
}
19+
20+
.example-configurable-accordion-container {
21+
margin-top: 40px;
22+
}
23+
24+
h4 {
25+
height: 36px;
26+
margin-top: 0;
27+
}

‎src/dev-app/cdk-experimental-accordion/cdk-accordion-demo.html

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,38 @@
11
<div>
2-
<h4>Accordion using UI Patterns</h4>
3-
<cdk-accordion-example></cdk-accordion-example>
2+
<div class="example-accordion-grid">
3+
<div class="example-accordion-container">
4+
<h4>Single expansion - Able to expand and collapse accordion panels.</h4>
5+
<cdk-accordion-single-expansion-example></cdk-accordion-single-expansion-example>
6+
</div>
7+
8+
<div class="example-accordion-container">
9+
<h4>Multi expansion - Able to expand and collapse multiple accordion panels</h4>
10+
<cdk-accordion-multi-expansion-example></cdk-accordion-multi-expansion-example>
11+
</div>
12+
13+
<div class="example-accordion-container">
14+
<h4>
15+
Disabled Accordions are Focusable - Able to navigate to a disabled accordion. Disabled
16+
accordions are not expandable.
17+
</h4>
18+
<cdk-accordion-disabled-focusable-example></cdk-accordion-disabled-focusable-example>
19+
</div>
20+
21+
<div class="example-accordion-container">
22+
<h4>
23+
Disabled Accordions are Skipped - Disabled accordions are skipped over and not expandable.
24+
</h4>
25+
<cdk-accordion-disabled-skipped-example></cdk-accordion-disabled-skipped-example>
26+
</div>
27+
28+
<div class="example-accordion-container">
29+
<h4>Disabled - Focus should land on the accordion group instead of an accordion trigger.</h4>
30+
<cdk-accordion-disabled-example></cdk-accordion-disabled-example>
31+
</div>
32+
</div>
33+
34+
<div class="example-configurable-accordion-container">
35+
<h4>Configurable Accordion</h4>
36+
<cdk-accordion-configurable-example></cdk-accordion-configurable-example>
37+
</div>
438
</div>

‎src/dev-app/cdk-experimental-accordion/cdk-accordion-demo.ts

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,28 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88

9-
import {ChangeDetectionStrategy, Component} from '@angular/core';
10-
import {CdkAccordionExample} from '@angular/components-examples/cdk-experimental/accordion';
9+
import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
10+
import {
11+
CdkAccordionConfigurableExample,
12+
CdkAccordionDisabledExample,
13+
CdkAccordionDisabledFocusableExample,
14+
CdkAccordionDisabledSkippedExample,
15+
CdkAccordionMultiExpansionExample,
16+
CdkAccordionSingleExpansionExample,
17+
} from '@angular/components-examples/cdk-experimental/accordion';
1118

1219
@Component({
1320
templateUrl: 'cdk-accordion-demo.html',
14-
imports: [CdkAccordionExample],
21+
styleUrl: 'cdk-accordion-demo.css',
22+
imports: [
23+
CdkAccordionConfigurableExample,
24+
CdkAccordionSingleExpansionExample,
25+
CdkAccordionMultiExpansionExample,
26+
CdkAccordionDisabledFocusableExample,
27+
CdkAccordionDisabledSkippedExample,
28+
CdkAccordionDisabledExample,
29+
],
30+
encapsulation: ViewEncapsulation.None,
1531
changeDetection: ChangeDetectionStrategy.OnPush,
1632
})
1733
export class CdkExperimentalAccordionDemo {}

0 commit comments

Comments
 (0)
Please sign in to comment.