Skip to content

Commit 37408ad

Browse files
wagnermacielwagnermaciel
committed
feat(cdk-experimental/nav): demo for the CdkNav
1 parent 1ba4988 commit 37408ad

File tree

12 files changed

+160
-1
lines changed

12 files changed

+160
-1
lines changed

‎src/cdk-experimental/nav/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ load("//tools:defaults.bzl", "ng_project")
33
package(default_visibility = ["//visibility:public"])
44

55
ng_project(
6-
name = "listbox",
6+
name = "nav",
77
srcs = glob(
88
["**/*.ts"],
99
exclude = ["**/*.spec.ts"],

‎src/components-examples/cdk-experimental/nav/BUILD.bazel

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
load("//tools:defaults.bzl", "ng_project")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_project(
6+
name = "nav",
7+
srcs = glob(["**/*.ts"]),
8+
assets = glob([
9+
"**/*.html",
10+
"**/*.css",
11+
]),
12+
deps = [
13+
"//:node_modules/@angular/core",
14+
"//:node_modules/@angular/forms",
15+
"//src/cdk-experimental/nav",
16+
"//src/material/checkbox",
17+
"//src/material/form-field",
18+
"//src/material/select",
19+
],
20+
)
21+
22+
filegroup(
23+
name = "source-files",
24+
srcs = glob([
25+
"**/*.html",
26+
"**/*.css",
27+
"**/*.ts",
28+
]),
29+
)

‎src/components-examples/cdk-experimental/nav/cdk-nav/cdk-nav-example.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.example-nav {
2+
border: 1px solid var(--mat-sys-outline);
3+
padding: 10px;
4+
display: flex;
5+
flex-direction: column;
6+
width: 200px;
7+
gap: 4px; /* Add gap like listbox */
8+
}
9+
10+
.example-link {
11+
padding: 8px 12px;
12+
cursor: pointer;
13+
text-decoration: none;
14+
border: 1px solid var(--mat-sys-outline);
15+
border-radius: var(--mat-sys-corner-extra-small);
16+
display: block; /* Ensure links take full width */
17+
outline: none; /* Remove default browser focus outline */
18+
position: relative; /* For potential future pseudo-elements */
19+
}
20+
21+
/* Style for hover and keyboard focus (cdk-active) */
22+
.example-link.cdk-active:not([aria-disabled='true']),
23+
.example-link:hover:not([aria-disabled='true']) {
24+
outline: 1px solid var(--mat-sys-outline);
25+
background: var(--mat-sys-surface-container);
26+
}
27+
28+
/* Style for focus-visible (programmatic/keyboard focus) */
29+
.example-link:focus-visible:not([aria-disabled='true']) {
30+
outline: 2px solid var(--mat-sys-primary);
31+
background: var(--mat-sys-surface-container);
32+
}
33+
34+
/* Style for the selected link (using aria-current="page") */
35+
.example-link[aria-current='page']:not([aria-disabled='true']) {
36+
background-color: var(--mat-sys-secondary-container);
37+
font-weight: bold;
38+
}
39+
40+
.example-link[aria-disabled='true'] {
41+
color: var(--mat-sys-on-surface);
42+
opacity: 0.3;
43+
cursor: not-allowed;
44+
}

‎src/components-examples/cdk-experimental/nav/cdk-nav/cdk-nav-example.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<nav class="example-nav" cdkNav [(value)]="selectedValue">
2+
@for (link of links; track link.path) {
3+
<a
4+
class="example-link"
5+
cdkLink
6+
[value]="link.path"
7+
[disabled]="link.disabled">
8+
{{ link.label }}
9+
</a>
10+
}
11+
</nav>
12+
13+
<p>
14+
Selected Value: {{ selectedValue().join(', ') }}
15+
</p>

‎src/components-examples/cdk-experimental/nav/cdk-nav/cdk-nav-example.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
9+
import {ChangeDetectionStrategy, Component, model} from '@angular/core';
10+
import {CdkLink, CdkNav} from '@angular/cdk-experimental/nav';
11+
12+
@Component({
13+
selector: 'cdk-nav-example',
14+
templateUrl: 'cdk-nav-example.html',
15+
styleUrl: 'cdk-nav-example.css',
16+
standalone: true,
17+
imports: [CdkNav, CdkLink],
18+
changeDetection: ChangeDetectionStrategy.OnPush,
19+
})
20+
export class CdkNavExample {
21+
selectedValue = model<string[]>(['/home']); // Default selected value
22+
23+
links = [
24+
{label: 'Home', path: '/home'},
25+
{label: 'Settings', path: '/settings'},
26+
{label: 'Profile', path: '/profile', disabled: true},
27+
{label: 'Admin', path: '/admin'},
28+
];
29+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {CdkNavExample} from './cdk-nav/cdk-nav-example';

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ ng_project(
3535
"//src/dev-app/cdk-dialog",
3636
"//src/dev-app/cdk-experimental-combobox",
3737
"//src/dev-app/cdk-experimental-listbox",
38+
"//src/dev-app/cdk-experimental-nav",
3839
"//src/dev-app/cdk-experimental-tabs",
3940
"//src/dev-app/cdk-listbox",
4041
"//src/dev-app/cdk-menu",

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
load("//tools:defaults.bzl", "ng_project")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_project(
6+
name = "cdk-experimental-nav",
7+
srcs = glob(["**/*.ts"]),
8+
assets = ["cdk-nav-demo.html"],
9+
deps = [
10+
"//:node_modules/@angular/core",
11+
"//src/components-examples/cdk-experimental/nav",
12+
],
13+
)

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div>
2+
<h4>Listbox using UI Patterns</h4>
3+
<cdk-nav-example></cdk-nav-example>
4+
</div>

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
9+
import {ChangeDetectionStrategy, Component} from '@angular/core';
10+
import {CdkNavExample} from '@angular/components-examples/cdk-experimental/nav';
11+
12+
@Component({
13+
templateUrl: 'cdk-nav-demo.html',
14+
imports: [CdkNavExample],
15+
changeDetection: ChangeDetectionStrategy.OnPush,
16+
})
17+
export class CdkExperimentalNavDemo {}

‎src/dev-app/dev-app/dev-app-layout.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export class DevAppLayout {
6161
{name: 'CDK Dialog', route: '/cdk-dialog'},
6262
{name: 'CDK Experimental Combobox', route: '/cdk-experimental-combobox'},
6363
{name: 'CDK Experimental Listbox', route: '/cdk-experimental-listbox'},
64+
{name: 'CDK Experimental Nav', route: '/cdk-experimental-nav'},
6465
{name: 'CDK Experimental Tabs', route: '/cdk-experimental-tabs'},
6566
{name: 'CDK Listbox', route: '/cdk-listbox'},
6667
{name: 'CDK Menu', route: '/cdk-menu'},

‎src/dev-app/routes.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,11 @@ export const DEV_APP_ROUTES: Routes = [
5050
loadComponent: () =>
5151
import('./cdk-experimental-listbox/cdk-listbox-demo').then(m => m.CdkExperimentalListboxDemo),
5252
},
53+
{
54+
path: 'cdk-experimental-nav',
55+
loadComponent: () =>
56+
import('./cdk-experimental-nav/cdk-nav-demo').then(m => m.CdkExperimentalNavDemo),
57+
},
5358
{
5459
path: 'cdk-experimental-tabs',
5560
loadComponent: () =>

0 commit comments

Comments
 (0)