Skip to content

Commit 32c43dc

Browse files
wagnermacielwagnermaciel
authored
refactor(cdk-experimental/tabs): add use case examples (angular#31423)
1 parent bd17fb3 commit 32c43dc

24 files changed

+496
-14
lines changed

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div cdkTabs class="example-tabs">
2+
<ul cdkTabList class="example-tablist" focusMode="activedescendant" tab="tab-1">
3+
<li cdkTab value="tab-1" class="example-tab">tab 1</li>
4+
<li cdkTab value="tab-2" class="example-tab">tab 2</li>
5+
<li cdkTab value="tab-3" class="example-tab">tab 3</li>
6+
<li cdkTab value="tab-4" class="example-tab">tab 4</li>
7+
<li cdkTab value="tab-5" class="example-tab">tab 5</li>
8+
</ul>
9+
10+
<div cdkTabPanel value="tab-1" class="example-tabpanel">
11+
<ng-template cdkTabContent>Tabpanel 1</ng-template>
12+
</div>
13+
14+
<div cdkTabPanel value="tab-2" class="example-tabpanel">
15+
<ng-template cdkTabContent>Tabpanel 2</ng-template>
16+
</div>
17+
18+
<div cdkTabPanel value="tab-3" class="example-tabpanel">
19+
<ng-template cdkTabContent>Tabpanel 3</ng-template>
20+
</div>
21+
22+
<div cdkTabPanel value="tab-4" class="example-tabpanel">
23+
<ng-template cdkTabContent>Tabpanel 4</ng-template>
24+
</div>
25+
26+
<div cdkTabPanel value="tab-5" class="example-tabpanel">
27+
<ng-template cdkTabContent>Tabpanel 5</ng-template>
28+
</div>
29+
</div>

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {Component} from '@angular/core';
2+
import {
3+
CdkTab,
4+
CdkTabs,
5+
CdkTabList,
6+
CdkTabPanel,
7+
CdkTabContent,
8+
} from '@angular/cdk-experimental/tabs';
9+
10+
/** @title Active Descendant */
11+
@Component({
12+
selector: 'cdk-tabs-active-descendant-example',
13+
exportAs: 'cdkTabsActiveDescendantExample',
14+
templateUrl: 'cdk-tabs-active-descendant-example.html',
15+
styleUrls: ['../cdk-tabs-common.css'],
16+
standalone: true,
17+
imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent],
18+
})
19+
export class CdkTabsActiveDescendantExample {}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div cdkTabs class="example-tabs">
2+
<ul cdkTabList class="example-tablist" [skipDisabled]="false" tab="tab-1">
3+
<li cdkTab value="tab-1" class="example-tab">tab 1</li>
4+
<li cdkTab value="tab-2" class="example-tab">tab 2</li>
5+
<li cdkTab value="tab-3" class="example-tab" disabled>tab 3</li>
6+
<li cdkTab value="tab-4" class="example-tab" disabled>tab 4</li>
7+
<li cdkTab value="tab-5" class="example-tab">tab 5</li>
8+
</ul>
9+
10+
<div cdkTabPanel value="tab-1" class="example-tabpanel">
11+
<ng-template cdkTabContent>Tabpanel 1</ng-template>
12+
</div>
13+
14+
<div cdkTabPanel value="tab-2" class="example-tabpanel">
15+
<ng-template cdkTabContent>Tabpanel 2</ng-template>
16+
</div>
17+
18+
<div cdkTabPanel value="tab-3" class="example-tabpanel">
19+
<ng-template cdkTabContent>Tabpanel 3</ng-template>
20+
</div>
21+
22+
<div cdkTabPanel value="tab-4" class="example-tabpanel">
23+
<ng-template cdkTabContent>Tabpanel 4</ng-template>
24+
</div>
25+
26+
<div cdkTabPanel value="tab-5" class="example-tabpanel">
27+
<ng-template cdkTabContent>Tabpanel 5</ng-template>
28+
</div>
29+
</div>

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {Component} from '@angular/core';
2+
import {
3+
CdkTab,
4+
CdkTabs,
5+
CdkTabList,
6+
CdkTabPanel,
7+
CdkTabContent,
8+
} from '@angular/cdk-experimental/tabs';
9+
10+
/** @title Disabled Tabs are Focusable */
11+
@Component({
12+
selector: 'cdk-tabs-disabled-focusable-example',
13+
exportAs: 'cdkTabsDisabledFocusableExample',
14+
templateUrl: 'cdk-tabs-disabled-focusable-example.html',
15+
styleUrls: ['../cdk-tabs-common.css'],
16+
standalone: true,
17+
imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent],
18+
})
19+
export class CdkTabsDisabledFocusableExample {}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div cdkTabs class="example-tabs">
2+
<ul cdkTabList class="example-tablist" [skipDisabled]="true" tab="tab-1">
3+
<li cdkTab value="tab-1" class="example-tab">tab 1</li>
4+
<li cdkTab value="tab-2" class="example-tab">tab 2</li>
5+
<li cdkTab value="tab-3" class="example-tab" disabled>tab 3</li>
6+
<li cdkTab value="tab-4" class="example-tab" disabled>tab 4</li>
7+
<li cdkTab value="tab-5" class="example-tab">tab 5</li>
8+
</ul>
9+
10+
<div cdkTabPanel value="tab-1" class="example-tabpanel">
11+
<ng-template cdkTabContent>Tabpanel 1</ng-template>
12+
</div>
13+
14+
<div cdkTabPanel value="tab-2" class="example-tabpanel">
15+
<ng-template cdkTabContent>Tabpanel 2</ng-template>
16+
</div>
17+
18+
<div cdkTabPanel value="tab-3" class="example-tabpanel">
19+
<ng-template cdkTabContent>Tabpanel 3</ng-template>
20+
</div>
21+
22+
<div cdkTabPanel value="tab-4" class="example-tabpanel">
23+
<ng-template cdkTabContent>Tabpanel 4</ng-template>
24+
</div>
25+
26+
<div cdkTabPanel value="tab-5" class="example-tabpanel">
27+
<ng-template cdkTabContent>Tabpanel 5</ng-template>
28+
</div>
29+
</div>

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {Component} from '@angular/core';
2+
import {
3+
CdkTab,
4+
CdkTabs,
5+
CdkTabList,
6+
CdkTabPanel,
7+
CdkTabContent,
8+
} from '@angular/cdk-experimental/tabs';
9+
10+
/** @title Disabled Tabs are Skipped */
11+
@Component({
12+
selector: 'cdk-tabs-disabled-skipped-example',
13+
exportAs: 'cdkTabsDisabledSkippedExample',
14+
templateUrl: 'cdk-tabs-disabled-skipped-example.html',
15+
styleUrls: ['../cdk-tabs-common.css'],
16+
standalone: true,
17+
imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent],
18+
})
19+
export class CdkTabsDisabledSkippedExample {}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div cdkTabs class="example-tabs">
2+
<ul cdkTabList class="example-tablist" tab="tab-1" disabled>
3+
<li cdkTab value="tab-1" class="example-tab">tab 1</li>
4+
<li cdkTab value="tab-2" class="example-tab">tab 2</li>
5+
<li cdkTab value="tab-3" class="example-tab">tab 3</li>
6+
<li cdkTab value="tab-4" class="example-tab">tab 4</li>
7+
<li cdkTab value="tab-5" class="example-tab">tab 5</li>
8+
</ul>
9+
10+
<div cdkTabPanel value="tab-1" class="example-tabpanel">
11+
<ng-template cdkTabContent>Tabpanel 1</ng-template>
12+
</div>
13+
14+
<div cdkTabPanel value="tab-2" class="example-tabpanel">
15+
<ng-template cdkTabContent>Tabpanel 2</ng-template>
16+
</div>
17+
18+
<div cdkTabPanel value="tab-3" class="example-tabpanel">
19+
<ng-template cdkTabContent>Tabpanel 3</ng-template>
20+
</div>
21+
22+
<div cdkTabPanel value="tab-4" class="example-tabpanel">
23+
<ng-template cdkTabContent>Tabpanel 4</ng-template>
24+
</div>
25+
26+
<div cdkTabPanel value="tab-5" class="example-tabpanel">
27+
<ng-template cdkTabContent>Tabpanel 5</ng-template>
28+
</div>
29+
</div>

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {Component} from '@angular/core';
2+
import {
3+
CdkTab,
4+
CdkTabs,
5+
CdkTabList,
6+
CdkTabPanel,
7+
CdkTabContent,
8+
} from '@angular/cdk-experimental/tabs';
9+
10+
/** @title Disabled */
11+
@Component({
12+
selector: 'cdk-tabs-disabled-example',
13+
exportAs: 'cdkTabsDisabledExample',
14+
templateUrl: 'cdk-tabs-disabled-example.html',
15+
styleUrls: ['../cdk-tabs-common.css'],
16+
standalone: true,
17+
imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent],
18+
})
19+
export class CdkTabsDisabledExample {}

‎src/components-examples/cdk-experimental/tabs/cdk-explicit-selection/cdk-tabs-explicit-selection-example.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div cdkTabs class="example-tabs">
2+
<ul cdkTabList class="example-tablist" selectionMode="explicit" tab="tab-1">
3+
<li cdkTab value="tab-1" class="example-tab">tab 1</li>
4+
<li cdkTab value="tab-2" class="example-tab">tab 2</li>
5+
<li cdkTab value="tab-3" class="example-tab">tab 3</li>
6+
<li cdkTab value="tab-4" class="example-tab">tab 4</li>
7+
<li cdkTab value="tab-5" class="example-tab">tab 5</li>
8+
</ul>
9+
10+
<div cdkTabPanel value="tab-1" class="example-tabpanel">
11+
<ng-template cdkTabContent>Tabpanel 1</ng-template>
12+
</div>
13+
14+
<div cdkTabPanel value="tab-2" class="example-tabpanel">
15+
<ng-template cdkTabContent>Tabpanel 2</ng-template>
16+
</div>
17+
18+
<div cdkTabPanel value="tab-3" class="example-tabpanel">
19+
<ng-template cdkTabContent>Tabpanel 3</ng-template>
20+
</div>
21+
22+
<div cdkTabPanel value="tab-4" class="example-tabpanel">
23+
<ng-template cdkTabContent>Tabpanel 4</ng-template>
24+
</div>
25+
26+
<div cdkTabPanel value="tab-5" class="example-tabpanel">
27+
<ng-template cdkTabContent>Tabpanel 5</ng-template>
28+
</div>
29+
</div>

‎src/components-examples/cdk-experimental/tabs/cdk-explicit-selection/cdk-tabs-explicit-selection-example.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {Component} from '@angular/core';
2+
import {
3+
CdkTab,
4+
CdkTabs,
5+
CdkTabList,
6+
CdkTabPanel,
7+
CdkTabContent,
8+
} from '@angular/cdk-experimental/tabs';
9+
10+
/** @title Explicit selection */
11+
@Component({
12+
selector: 'cdk-tabs-explicit-selection-example',
13+
exportAs: 'cdkTabsExplicitSelectionExample',
14+
templateUrl: 'cdk-tabs-explicit-selection-example.html',
15+
styleUrls: ['../cdk-tabs-common.css'],
16+
standalone: true,
17+
imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent],
18+
})
19+
export class CdkTabsExplicitSelectionExample {}

‎src/components-examples/cdk-experimental/tabs/cdk-rtl-vertical/cdk-tabs-rtl-vertical-example.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div cdkTabs class="example-tabs">
2+
<ul cdkTabList class="example-tablist" orientation="vertical" tab="tab-1">
3+
<li cdkTab value="tab-1" class="example-tab">tab 1</li>
4+
<li cdkTab value="tab-2" class="example-tab">tab 2</li>
5+
<li cdkTab value="tab-3" class="example-tab">tab 3</li>
6+
<li cdkTab value="tab-4" class="example-tab">tab 4</li>
7+
<li cdkTab value="tab-5" class="example-tab">tab 5</li>
8+
</ul>
9+
10+
<div cdkTabPanel value="tab-1" class="example-tabpanel">
11+
<ng-template cdkTabContent>Tabpanel 1</ng-template>
12+
</div>
13+
14+
<div cdkTabPanel value="tab-2" class="example-tabpanel">
15+
<ng-template cdkTabContent>Tabpanel 2</ng-template>
16+
</div>
17+
18+
<div cdkTabPanel value="tab-3" class="example-tabpanel">
19+
<ng-template cdkTabContent>Tabpanel 3</ng-template>
20+
</div>
21+
22+
<div cdkTabPanel value="tab-4" class="example-tabpanel">
23+
<ng-template cdkTabContent>Tabpanel 4</ng-template>
24+
</div>
25+
26+
<div cdkTabPanel value="tab-5" class="example-tabpanel">
27+
<ng-template cdkTabContent>Tabpanel 5</ng-template>
28+
</div>
29+
</div>

‎src/components-examples/cdk-experimental/tabs/cdk-rtl-vertical/cdk-tabs-rtl-vertical-example.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import {Component} from '@angular/core';
2+
import {
3+
CdkTab,
4+
CdkTabs,
5+
CdkTabList,
6+
CdkTabPanel,
7+
CdkTabContent,
8+
} from '@angular/cdk-experimental/tabs';
9+
10+
/** * @title RTL & Vertical */
11+
@Component({
12+
selector: 'cdk-tabs-rtl-vertical-example',
13+
exportAs: 'cdkTabsRtlVerticalExample',
14+
templateUrl: 'cdk-tabs-rtl-vertical-example.html',
15+
styleUrls: ['../cdk-tabs-common.css'],
16+
standalone: true,
17+
imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent],
18+
})
19+
export class CdkTabsRtlVerticalExample {
20+
selectedIndex = 0;
21+
}

‎src/components-examples/cdk-experimental/tabs/cdk-selection-follows-focus/cdk-tabs-selection-follows-focus-example.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div cdkTabs class="example-tabs">
2+
<ul cdkTabList class="example-tablist" selectionMode="follow" tab="tab-1">
3+
<li cdkTab value="tab-1" class="example-tab">tab 1</li>
4+
<li cdkTab value="tab-2" class="example-tab">tab 2</li>
5+
<li cdkTab value="tab-3" class="example-tab">tab 3</li>
6+
<li cdkTab value="tab-4" class="example-tab">tab 4</li>
7+
<li cdkTab value="tab-5" class="example-tab">tab 5</li>
8+
</ul>
9+
10+
<div cdkTabPanel value="tab-1" class="example-tabpanel">
11+
<ng-template cdkTabContent>Tabpanel 1</ng-template>
12+
</div>
13+
14+
<div cdkTabPanel value="tab-2" class="example-tabpanel">
15+
<ng-template cdkTabContent>Tabpanel 2</ng-template>
16+
</div>
17+
18+
<div cdkTabPanel value="tab-3" class="example-tabpanel">
19+
<ng-template cdkTabContent>Tabpanel 3</ng-template>
20+
</div>
21+
22+
<div cdkTabPanel value="tab-4" class="example-tabpanel">
23+
<ng-template cdkTabContent>Tabpanel 4</ng-template>
24+
</div>
25+
26+
<div cdkTabPanel value="tab-5" class="example-tabpanel">
27+
<ng-template cdkTabContent>Tabpanel 5</ng-template>
28+
</div>
29+
</div>

‎src/components-examples/cdk-experimental/tabs/cdk-selection-follows-focus/cdk-tabs-selection-follows-focus-example.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {Component} from '@angular/core';
2+
import {
3+
CdkTab,
4+
CdkTabs,
5+
CdkTabList,
6+
CdkTabPanel,
7+
CdkTabContent,
8+
} from '@angular/cdk-experimental/tabs';
9+
10+
/** @title Selection Follows Focus */
11+
@Component({
12+
selector: 'cdk-tabs-selection-follows-focus-example',
13+
exportAs: 'cdkTabsSelectionFollowsFocusExample',
14+
templateUrl: 'cdk-tabs-selection-follows-focus-example.html',
15+
styleUrls: ['../cdk-tabs-common.css'],
16+
standalone: true,
17+
imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent],
18+
})
19+
export class CdkTabsSelectionFollowsFocusExample {}

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

File renamed without changes.

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

File renamed without changes.

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,13 @@ import {MatFormFieldModule} from '@angular/material/form-field';
1111
import {MatSelectModule} from '@angular/material/select';
1212
import {FormControl, ReactiveFormsModule} from '@angular/forms';
1313

14-
/** @title Tabs using UI Patterns. */
14+
/** @title Configurable Tabs. */
1515
@Component({
16-
selector: 'cdk-tabs-example',
17-
exportAs: 'cdkTabsExample',
18-
templateUrl: 'cdk-tabs-example.html',
19-
styleUrl: 'cdk-tabs-example.css',
16+
selector: 'cdk-tabs-configurable-example',
17+
exportAs: 'cdkTabsConfigurableExample',
18+
templateUrl: 'cdk-tabs-configurable-example.html',
19+
styleUrls: ['../cdk-tabs-common.css'],
20+
standalone: true,
2021
imports: [
2122
CdkTabs,
2223
CdkTabList,
@@ -29,7 +30,7 @@ import {FormControl, ReactiveFormsModule} from '@angular/forms';
2930
ReactiveFormsModule,
3031
],
3132
})
32-
export class CdkTabsExample {
33+
export class CdkTabsConfigurableExample {
3334
orientation: 'vertical' | 'horizontal' = 'horizontal';
3435
focusMode: 'roving' | 'activedescendant' = 'roving';
3536
selectionMode: 'explicit' | 'follow' = 'follow';

0 commit comments

Comments
 (0)