Skip to content

Commit 25c31fd

Browse files
wagnermacielgoogle-labs-jules[bot]
wagnermaciel
and
google-labs-jules[bot]
authored
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>

0 commit comments

Comments
 (0)