Skip to content

Commit 32c43dc

Browse files
wagnermacielwagnermaciel
authored
refactor(cdk-experimental/tabs): add use case examples (#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 {}

0 commit comments

Comments
 (0)