diff --git a/src/components-examples/cdk-experimental/tabs/cdk-active-descendant/cdk-tabs-active-descendant-example.html b/src/components-examples/cdk-experimental/tabs/cdk-active-descendant/cdk-tabs-active-descendant-example.html new file mode 100644 index 000000000000..5acc11b6e1a4 --- /dev/null +++ b/src/components-examples/cdk-experimental/tabs/cdk-active-descendant/cdk-tabs-active-descendant-example.html @@ -0,0 +1,29 @@ +
+ + +
+ Tabpanel 1 +
+ +
+ Tabpanel 2 +
+ +
+ Tabpanel 3 +
+ +
+ Tabpanel 4 +
+ +
+ Tabpanel 5 +
+
diff --git a/src/components-examples/cdk-experimental/tabs/cdk-active-descendant/cdk-tabs-active-descendant-example.ts b/src/components-examples/cdk-experimental/tabs/cdk-active-descendant/cdk-tabs-active-descendant-example.ts new file mode 100644 index 000000000000..bfc9ecefd36c --- /dev/null +++ b/src/components-examples/cdk-experimental/tabs/cdk-active-descendant/cdk-tabs-active-descendant-example.ts @@ -0,0 +1,19 @@ +import {Component} from '@angular/core'; +import { + CdkTab, + CdkTabs, + CdkTabList, + CdkTabPanel, + CdkTabContent, +} from '@angular/cdk-experimental/tabs'; + +/** @title Active Descendant */ +@Component({ + selector: 'cdk-tabs-active-descendant-example', + exportAs: 'cdkTabsActiveDescendantExample', + templateUrl: 'cdk-tabs-active-descendant-example.html', + styleUrls: ['../cdk-tabs-common.css'], + standalone: true, + imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent], +}) +export class CdkTabsActiveDescendantExample {} diff --git a/src/components-examples/cdk-experimental/tabs/cdk-disabled-focusable/cdk-tabs-disabled-focusable-example.html b/src/components-examples/cdk-experimental/tabs/cdk-disabled-focusable/cdk-tabs-disabled-focusable-example.html new file mode 100644 index 000000000000..3bb4cd1b2981 --- /dev/null +++ b/src/components-examples/cdk-experimental/tabs/cdk-disabled-focusable/cdk-tabs-disabled-focusable-example.html @@ -0,0 +1,29 @@ +
+ + +
+ Tabpanel 1 +
+ +
+ Tabpanel 2 +
+ +
+ Tabpanel 3 +
+ +
+ Tabpanel 4 +
+ +
+ Tabpanel 5 +
+
diff --git a/src/components-examples/cdk-experimental/tabs/cdk-disabled-focusable/cdk-tabs-disabled-focusable-example.ts b/src/components-examples/cdk-experimental/tabs/cdk-disabled-focusable/cdk-tabs-disabled-focusable-example.ts new file mode 100644 index 000000000000..4cbe1f93624a --- /dev/null +++ b/src/components-examples/cdk-experimental/tabs/cdk-disabled-focusable/cdk-tabs-disabled-focusable-example.ts @@ -0,0 +1,19 @@ +import {Component} from '@angular/core'; +import { + CdkTab, + CdkTabs, + CdkTabList, + CdkTabPanel, + CdkTabContent, +} from '@angular/cdk-experimental/tabs'; + +/** @title Disabled Tabs are Focusable */ +@Component({ + selector: 'cdk-tabs-disabled-focusable-example', + exportAs: 'cdkTabsDisabledFocusableExample', + templateUrl: 'cdk-tabs-disabled-focusable-example.html', + styleUrls: ['../cdk-tabs-common.css'], + standalone: true, + imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent], +}) +export class CdkTabsDisabledFocusableExample {} diff --git a/src/components-examples/cdk-experimental/tabs/cdk-disabled-skipped/cdk-tabs-disabled-skipped-example.html b/src/components-examples/cdk-experimental/tabs/cdk-disabled-skipped/cdk-tabs-disabled-skipped-example.html new file mode 100644 index 000000000000..5cdaae50ad84 --- /dev/null +++ b/src/components-examples/cdk-experimental/tabs/cdk-disabled-skipped/cdk-tabs-disabled-skipped-example.html @@ -0,0 +1,29 @@ +
+ + +
+ Tabpanel 1 +
+ +
+ Tabpanel 2 +
+ +
+ Tabpanel 3 +
+ +
+ Tabpanel 4 +
+ +
+ Tabpanel 5 +
+
diff --git a/src/components-examples/cdk-experimental/tabs/cdk-disabled-skipped/cdk-tabs-disabled-skipped-example.ts b/src/components-examples/cdk-experimental/tabs/cdk-disabled-skipped/cdk-tabs-disabled-skipped-example.ts new file mode 100644 index 000000000000..9690f0864bc2 --- /dev/null +++ b/src/components-examples/cdk-experimental/tabs/cdk-disabled-skipped/cdk-tabs-disabled-skipped-example.ts @@ -0,0 +1,19 @@ +import {Component} from '@angular/core'; +import { + CdkTab, + CdkTabs, + CdkTabList, + CdkTabPanel, + CdkTabContent, +} from '@angular/cdk-experimental/tabs'; + +/** @title Disabled Tabs are Skipped */ +@Component({ + selector: 'cdk-tabs-disabled-skipped-example', + exportAs: 'cdkTabsDisabledSkippedExample', + templateUrl: 'cdk-tabs-disabled-skipped-example.html', + styleUrls: ['../cdk-tabs-common.css'], + standalone: true, + imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent], +}) +export class CdkTabsDisabledSkippedExample {} diff --git a/src/components-examples/cdk-experimental/tabs/cdk-disabled/cdk-tabs-disabled-example.html b/src/components-examples/cdk-experimental/tabs/cdk-disabled/cdk-tabs-disabled-example.html new file mode 100644 index 000000000000..47cba0cba4f4 --- /dev/null +++ b/src/components-examples/cdk-experimental/tabs/cdk-disabled/cdk-tabs-disabled-example.html @@ -0,0 +1,29 @@ +
+ + +
+ Tabpanel 1 +
+ +
+ Tabpanel 2 +
+ +
+ Tabpanel 3 +
+ +
+ Tabpanel 4 +
+ +
+ Tabpanel 5 +
+
diff --git a/src/components-examples/cdk-experimental/tabs/cdk-disabled/cdk-tabs-disabled-example.ts b/src/components-examples/cdk-experimental/tabs/cdk-disabled/cdk-tabs-disabled-example.ts new file mode 100644 index 000000000000..1b0ddbf6cf5e --- /dev/null +++ b/src/components-examples/cdk-experimental/tabs/cdk-disabled/cdk-tabs-disabled-example.ts @@ -0,0 +1,19 @@ +import {Component} from '@angular/core'; +import { + CdkTab, + CdkTabs, + CdkTabList, + CdkTabPanel, + CdkTabContent, +} from '@angular/cdk-experimental/tabs'; + +/** @title Disabled */ +@Component({ + selector: 'cdk-tabs-disabled-example', + exportAs: 'cdkTabsDisabledExample', + templateUrl: 'cdk-tabs-disabled-example.html', + styleUrls: ['../cdk-tabs-common.css'], + standalone: true, + imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent], +}) +export class CdkTabsDisabledExample {} diff --git a/src/components-examples/cdk-experimental/tabs/cdk-explicit-selection/cdk-tabs-explicit-selection-example.html b/src/components-examples/cdk-experimental/tabs/cdk-explicit-selection/cdk-tabs-explicit-selection-example.html new file mode 100644 index 000000000000..ad82d44cf4a0 --- /dev/null +++ b/src/components-examples/cdk-experimental/tabs/cdk-explicit-selection/cdk-tabs-explicit-selection-example.html @@ -0,0 +1,29 @@ +
+ + +
+ Tabpanel 1 +
+ +
+ Tabpanel 2 +
+ +
+ Tabpanel 3 +
+ +
+ Tabpanel 4 +
+ +
+ Tabpanel 5 +
+
diff --git a/src/components-examples/cdk-experimental/tabs/cdk-explicit-selection/cdk-tabs-explicit-selection-example.ts b/src/components-examples/cdk-experimental/tabs/cdk-explicit-selection/cdk-tabs-explicit-selection-example.ts new file mode 100644 index 000000000000..5cbb27c0d31f --- /dev/null +++ b/src/components-examples/cdk-experimental/tabs/cdk-explicit-selection/cdk-tabs-explicit-selection-example.ts @@ -0,0 +1,19 @@ +import {Component} from '@angular/core'; +import { + CdkTab, + CdkTabs, + CdkTabList, + CdkTabPanel, + CdkTabContent, +} from '@angular/cdk-experimental/tabs'; + +/** @title Explicit selection */ +@Component({ + selector: 'cdk-tabs-explicit-selection-example', + exportAs: 'cdkTabsExplicitSelectionExample', + templateUrl: 'cdk-tabs-explicit-selection-example.html', + styleUrls: ['../cdk-tabs-common.css'], + standalone: true, + imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent], +}) +export class CdkTabsExplicitSelectionExample {} diff --git a/src/components-examples/cdk-experimental/tabs/cdk-rtl-vertical/cdk-tabs-rtl-vertical-example.html b/src/components-examples/cdk-experimental/tabs/cdk-rtl-vertical/cdk-tabs-rtl-vertical-example.html new file mode 100644 index 000000000000..a409d56e66fa --- /dev/null +++ b/src/components-examples/cdk-experimental/tabs/cdk-rtl-vertical/cdk-tabs-rtl-vertical-example.html @@ -0,0 +1,29 @@ +
+ + +
+ Tabpanel 1 +
+ +
+ Tabpanel 2 +
+ +
+ Tabpanel 3 +
+ +
+ Tabpanel 4 +
+ +
+ Tabpanel 5 +
+
diff --git a/src/components-examples/cdk-experimental/tabs/cdk-rtl-vertical/cdk-tabs-rtl-vertical-example.ts b/src/components-examples/cdk-experimental/tabs/cdk-rtl-vertical/cdk-tabs-rtl-vertical-example.ts new file mode 100644 index 000000000000..19cac48ffc8e --- /dev/null +++ b/src/components-examples/cdk-experimental/tabs/cdk-rtl-vertical/cdk-tabs-rtl-vertical-example.ts @@ -0,0 +1,21 @@ +import {Component} from '@angular/core'; +import { + CdkTab, + CdkTabs, + CdkTabList, + CdkTabPanel, + CdkTabContent, +} from '@angular/cdk-experimental/tabs'; + +/** * @title RTL & Vertical */ +@Component({ + selector: 'cdk-tabs-rtl-vertical-example', + exportAs: 'cdkTabsRtlVerticalExample', + templateUrl: 'cdk-tabs-rtl-vertical-example.html', + styleUrls: ['../cdk-tabs-common.css'], + standalone: true, + imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent], +}) +export class CdkTabsRtlVerticalExample { + selectedIndex = 0; +} diff --git a/src/components-examples/cdk-experimental/tabs/cdk-selection-follows-focus/cdk-tabs-selection-follows-focus-example.html b/src/components-examples/cdk-experimental/tabs/cdk-selection-follows-focus/cdk-tabs-selection-follows-focus-example.html new file mode 100644 index 000000000000..50ab7ecb51b6 --- /dev/null +++ b/src/components-examples/cdk-experimental/tabs/cdk-selection-follows-focus/cdk-tabs-selection-follows-focus-example.html @@ -0,0 +1,29 @@ +
+ + +
+ Tabpanel 1 +
+ +
+ Tabpanel 2 +
+ +
+ Tabpanel 3 +
+ +
+ Tabpanel 4 +
+ +
+ Tabpanel 5 +
+
diff --git a/src/components-examples/cdk-experimental/tabs/cdk-selection-follows-focus/cdk-tabs-selection-follows-focus-example.ts b/src/components-examples/cdk-experimental/tabs/cdk-selection-follows-focus/cdk-tabs-selection-follows-focus-example.ts new file mode 100644 index 000000000000..3ecfe8a1cb07 --- /dev/null +++ b/src/components-examples/cdk-experimental/tabs/cdk-selection-follows-focus/cdk-tabs-selection-follows-focus-example.ts @@ -0,0 +1,19 @@ +import {Component} from '@angular/core'; +import { + CdkTab, + CdkTabs, + CdkTabList, + CdkTabPanel, + CdkTabContent, +} from '@angular/cdk-experimental/tabs'; + +/** @title Selection Follows Focus */ +@Component({ + selector: 'cdk-tabs-selection-follows-focus-example', + exportAs: 'cdkTabsSelectionFollowsFocusExample', + templateUrl: 'cdk-tabs-selection-follows-focus-example.html', + styleUrls: ['../cdk-tabs-common.css'], + standalone: true, + imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent], +}) +export class CdkTabsSelectionFollowsFocusExample {} diff --git a/src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.css b/src/components-examples/cdk-experimental/tabs/cdk-tabs-common.css similarity index 100% rename from src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.css rename to src/components-examples/cdk-experimental/tabs/cdk-tabs-common.css diff --git a/src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.html b/src/components-examples/cdk-experimental/tabs/cdk-tabs-configurable/cdk-tabs-configurable-example.html similarity index 100% rename from src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.html rename to src/components-examples/cdk-experimental/tabs/cdk-tabs-configurable/cdk-tabs-configurable-example.html diff --git a/src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.ts b/src/components-examples/cdk-experimental/tabs/cdk-tabs-configurable/cdk-tabs-configurable-example.ts similarity index 77% rename from src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.ts rename to src/components-examples/cdk-experimental/tabs/cdk-tabs-configurable/cdk-tabs-configurable-example.ts index 5179f4b053c6..d423d9d16b35 100644 --- a/src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.ts +++ b/src/components-examples/cdk-experimental/tabs/cdk-tabs-configurable/cdk-tabs-configurable-example.ts @@ -11,12 +11,13 @@ import {MatFormFieldModule} from '@angular/material/form-field'; import {MatSelectModule} from '@angular/material/select'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; -/** @title Tabs using UI Patterns. */ +/** @title Configurable Tabs. */ @Component({ - selector: 'cdk-tabs-example', - exportAs: 'cdkTabsExample', - templateUrl: 'cdk-tabs-example.html', - styleUrl: 'cdk-tabs-example.css', + selector: 'cdk-tabs-configurable-example', + exportAs: 'cdkTabsConfigurableExample', + templateUrl: 'cdk-tabs-configurable-example.html', + styleUrls: ['../cdk-tabs-common.css'], + standalone: true, imports: [ CdkTabs, CdkTabList, @@ -29,7 +30,7 @@ import {FormControl, ReactiveFormsModule} from '@angular/forms'; ReactiveFormsModule, ], }) -export class CdkTabsExample { +export class CdkTabsConfigurableExample { orientation: 'vertical' | 'horizontal' = 'horizontal'; focusMode: 'roving' | 'activedescendant' = 'roving'; selectionMode: 'explicit' | 'follow' = 'follow'; diff --git a/src/components-examples/cdk-experimental/tabs/cdk-vertical-orientation/cdk-tabs-vertical-example.html b/src/components-examples/cdk-experimental/tabs/cdk-vertical-orientation/cdk-tabs-vertical-example.html new file mode 100644 index 000000000000..a409d56e66fa --- /dev/null +++ b/src/components-examples/cdk-experimental/tabs/cdk-vertical-orientation/cdk-tabs-vertical-example.html @@ -0,0 +1,29 @@ +
+ + +
+ Tabpanel 1 +
+ +
+ Tabpanel 2 +
+ +
+ Tabpanel 3 +
+ +
+ Tabpanel 4 +
+ +
+ Tabpanel 5 +
+
diff --git a/src/components-examples/cdk-experimental/tabs/cdk-vertical-orientation/cdk-tabs-vertical-example.ts b/src/components-examples/cdk-experimental/tabs/cdk-vertical-orientation/cdk-tabs-vertical-example.ts new file mode 100644 index 000000000000..05d7ab55a440 --- /dev/null +++ b/src/components-examples/cdk-experimental/tabs/cdk-vertical-orientation/cdk-tabs-vertical-example.ts @@ -0,0 +1,19 @@ +import {Component} from '@angular/core'; +import { + CdkTab, + CdkTabs, + CdkTabList, + CdkTabPanel, + CdkTabContent, +} from '@angular/cdk-experimental/tabs'; + +/** @title Vertical */ +@Component({ + selector: 'cdk-tabs-vertical-example', + exportAs: 'cdkTabsVerticalExample', + templateUrl: 'cdk-tabs-vertical-example.html', + styleUrls: ['../cdk-tabs-common.css'], + standalone: true, + imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent], +}) +export class CdkTabsVerticalExample {} diff --git a/src/components-examples/cdk-experimental/tabs/index.ts b/src/components-examples/cdk-experimental/tabs/index.ts index 2a00cbe51c55..cbd4adba90e6 100644 --- a/src/components-examples/cdk-experimental/tabs/index.ts +++ b/src/components-examples/cdk-experimental/tabs/index.ts @@ -1 +1,9 @@ -export {CdkTabsExample} from './cdk-tabs/cdk-tabs-example'; +export {CdkTabsConfigurableExample} from './cdk-tabs-configurable/cdk-tabs-configurable-example'; +export {CdkTabsExplicitSelectionExample} from './cdk-explicit-selection/cdk-tabs-explicit-selection-example'; +export {CdkTabsSelectionFollowsFocusExample} from './cdk-selection-follows-focus/cdk-tabs-selection-follows-focus-example'; +export {CdkTabsVerticalExample} from './cdk-vertical-orientation/cdk-tabs-vertical-example'; +export {CdkTabsRtlVerticalExample} from './cdk-rtl-vertical/cdk-tabs-rtl-vertical-example'; +export {CdkTabsActiveDescendantExample} from './cdk-active-descendant/cdk-tabs-active-descendant-example'; +export {CdkTabsDisabledFocusableExample} from './cdk-disabled-focusable/cdk-tabs-disabled-focusable-example'; +export {CdkTabsDisabledSkippedExample} from './cdk-disabled-skipped/cdk-tabs-disabled-skipped-example'; +export {CdkTabsDisabledExample} from './cdk-disabled/cdk-tabs-disabled-example'; diff --git a/src/dev-app/cdk-experimental-tabs/BUILD.bazel b/src/dev-app/cdk-experimental-tabs/BUILD.bazel index fdb482cdf87e..b8c1ac443d0d 100644 --- a/src/dev-app/cdk-experimental-tabs/BUILD.bazel +++ b/src/dev-app/cdk-experimental-tabs/BUILD.bazel @@ -5,6 +5,9 @@ package(default_visibility = ["//visibility:public"]) ng_project( name = "cdk-experimental-tabs", srcs = glob(["**/*.ts"]), - assets = ["cdk-tabs-demo.html"], + assets = [ + "cdk-tabs-demo.html", + "cdk-tabs-demo.css", + ], deps = ["//src/components-examples/cdk-experimental/tabs"], ) diff --git a/src/dev-app/cdk-experimental-tabs/cdk-tabs-demo.css b/src/dev-app/cdk-experimental-tabs/cdk-tabs-demo.css new file mode 100644 index 000000000000..200d521a2ed7 --- /dev/null +++ b/src/dev-app/cdk-experimental-tabs/cdk-tabs-demo.css @@ -0,0 +1,20 @@ +.example-tabs-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); + gap: 20px; +} + +.example-tabs-container { + width: 500px; + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.example-configurable-tabs-container { + padding-top: 40px; +} + +h4 { + height: 36px; +} diff --git a/src/dev-app/cdk-experimental-tabs/cdk-tabs-demo.html b/src/dev-app/cdk-experimental-tabs/cdk-tabs-demo.html index 8f53b8076db1..475787820d83 100644 --- a/src/dev-app/cdk-experimental-tabs/cdk-tabs-demo.html +++ b/src/dev-app/cdk-experimental-tabs/cdk-tabs-demo.html @@ -1,4 +1,46 @@ -
-

Tabs using UI Patterns

- -
\ No newline at end of file +
+
+

Explicit Selection - Able to navigate between tabs and select tabs.

+ +
+ +
+

Selection Follows Focus - Navigating between tabs also changes the selected tab.

+ +
+ +
+

Horizontal Orientation - Able to navigate between tabs.

+ +
+ +
+

RTL & Horizontal Orientation - Able to navigate between tabs.

+ +
+ +
+

Active Descendant - Able to navigate between tabs.

+ +
+ +
+

Disabled Tabs are Focusable - Able to navigate to a disabled tab. Disabled tabs are not selectable.

+ +
+ +
+

Disabled Tabs are Skipped - Disabled tabs are skipped over. Disabled tabs are not selectable.

+ +
+ +
+

Disabled - Focus should land on the tablist instead of a tab.

+ +
+
+ +
+

Configurable Tabs

+ +
diff --git a/src/dev-app/cdk-experimental-tabs/cdk-tabs-demo.ts b/src/dev-app/cdk-experimental-tabs/cdk-tabs-demo.ts index 39de3f744db4..1f82baa58411 100644 --- a/src/dev-app/cdk-experimental-tabs/cdk-tabs-demo.ts +++ b/src/dev-app/cdk-experimental-tabs/cdk-tabs-demo.ts @@ -7,11 +7,33 @@ */ import {ChangeDetectionStrategy, Component} from '@angular/core'; -import {CdkTabsExample} from '@angular/components-examples/cdk-experimental/tabs'; +import { + CdkTabsConfigurableExample, + CdkTabsExplicitSelectionExample, + CdkTabsSelectionFollowsFocusExample, + CdkTabsVerticalExample, + CdkTabsRtlVerticalExample, + CdkTabsActiveDescendantExample, + CdkTabsDisabledFocusableExample, + CdkTabsDisabledSkippedExample, + CdkTabsDisabledExample, +} from '@angular/components-examples/cdk-experimental/tabs'; @Component({ + selector: 'cdk-experimental-tabs-demo', templateUrl: 'cdk-tabs-demo.html', - imports: [CdkTabsExample], + styleUrls: ['cdk-tabs-demo.css'], + imports: [ + CdkTabsConfigurableExample, + CdkTabsExplicitSelectionExample, + CdkTabsSelectionFollowsFocusExample, + CdkTabsVerticalExample, + CdkTabsRtlVerticalExample, + CdkTabsActiveDescendantExample, + CdkTabsDisabledFocusableExample, + CdkTabsDisabledSkippedExample, + CdkTabsDisabledExample, + ], changeDetection: ChangeDetectionStrategy.OnPush, }) export class CdkExperimentalTabsDemo {}