diff --git a/src/components-examples/aria/toolbar/BUILD.bazel b/src/components-examples/aria/toolbar/BUILD.bazel index a8bdcbc956b1..aac5f1eb7eed 100644 --- a/src/components-examples/aria/toolbar/BUILD.bazel +++ b/src/components-examples/aria/toolbar/BUILD.bazel @@ -14,6 +14,7 @@ ng_project( "//:node_modules/@angular/forms", "//src/aria/radio-group", "//src/aria/toolbar", + "//src/cdk/a11y", "//src/material/checkbox", "//src/material/form-field", "//src/material/select", diff --git a/src/components-examples/aria/toolbar/index.ts b/src/components-examples/aria/toolbar/index.ts index 24091f68e8bd..96b07f6ac29c 100644 --- a/src/components-examples/aria/toolbar/index.ts +++ b/src/components-examples/aria/toolbar/index.ts @@ -1 +1,2 @@ +export {ToolbarBasicHorizontalExample} from './toolbar-basic-horizontal/toolbar-basic-horizontal-example'; export {ToolbarConfigurableExample} from './toolbar-configurable/toolbar-configurable-example'; diff --git a/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html new file mode 100644 index 000000000000..454d7ffd4f5f --- /dev/null +++ b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html @@ -0,0 +1,43 @@ +
+
+ + + + + +
+
diff --git a/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts new file mode 100644 index 000000000000..45af7aac691d --- /dev/null +++ b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts @@ -0,0 +1,28 @@ +import {Component} from '@angular/core'; +import {Toolbar, ToolbarWidget} from '@angular/aria/toolbar'; +import {RadioGroup, RadioButton} from '@angular/aria/radio-group'; +import {LiveAnnouncer} from '@angular/cdk/a11y'; + +/** @title Basic Horizontal Toolbar Example */ +@Component({ + selector: 'toolbar-basic-horizontal-example', + templateUrl: 'toolbar-basic-horizontal-example.html', + styleUrl: '../toolbar-common.css', + imports: [RadioButton, RadioGroup, Toolbar, ToolbarWidget], +}) +export class ToolbarBasicHorizontalExample { + constructor(private _liveAnnouncer: LiveAnnouncer) {} + alignments = [ + {value: 'left', label: 'Left'}, + {value: 'center', label: 'Center'}, + {value: 'right', label: 'Right'}, + ]; + format(tool: string) { + console.log(`Tool activated: ${tool}`); + this._liveAnnouncer.announce(`${tool} applied`, 'polite'); + } + test(action: string) { + console.log(`Action triggered: ${action}`); + this._liveAnnouncer.announce(`${action} button activated`, 'polite'); + } +} diff --git a/src/dev-app/aria-toolbar/toolbar-demo.css b/src/dev-app/aria-toolbar/toolbar-demo.css index 20307209d88a..7164c58accca 100644 --- a/src/dev-app/aria-toolbar/toolbar-demo.css +++ b/src/dev-app/aria-toolbar/toolbar-demo.css @@ -1,6 +1,6 @@ .example-radio-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); gap: 20px; } @@ -18,3 +18,7 @@ h4 { height: 36px; } + +.example-toolbar-container { + width: 100%; +} diff --git a/src/dev-app/aria-toolbar/toolbar-demo.html b/src/dev-app/aria-toolbar/toolbar-demo.html index 46fc505f461a..91333482212c 100644 --- a/src/dev-app/aria-toolbar/toolbar-demo.html +++ b/src/dev-app/aria-toolbar/toolbar-demo.html @@ -1,7 +1,11 @@
-
-

Configurable CDK Toolbar

+
+

Toolbar Basic Horizontal

+ +
+
+

Configurable CDK Toolbar

diff --git a/src/dev-app/aria-toolbar/toolbar-demo.ts b/src/dev-app/aria-toolbar/toolbar-demo.ts index 1c26818b393d..a2d3a11f3c8a 100644 --- a/src/dev-app/aria-toolbar/toolbar-demo.ts +++ b/src/dev-app/aria-toolbar/toolbar-demo.ts @@ -7,11 +7,14 @@ */ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; -import {ToolbarConfigurableExample} from '@angular/components-examples/aria/toolbar'; +import { + ToolbarBasicHorizontalExample, + ToolbarConfigurableExample, +} from '@angular/components-examples/aria/toolbar'; @Component({ templateUrl: 'toolbar-demo.html', - imports: [ToolbarConfigurableExample], + imports: [ToolbarBasicHorizontalExample, ToolbarConfigurableExample], styleUrl: './toolbar-demo.css', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush,