diff --git a/src/components-examples/aria/toolbar/index.ts b/src/components-examples/aria/toolbar/index.ts index ca0f7592339f..42e92a97467b 100644 --- a/src/components-examples/aria/toolbar/index.ts +++ b/src/components-examples/aria/toolbar/index.ts @@ -1,3 +1,4 @@ export {ToolbarBasicHorizontalExample} from './toolbar-basic-horizontal/toolbar-basic-horizontal-example'; +export {ToolbarBasicVerticalExample} from './toolbar-basic-vertical/toolbar-basic-vertical-example'; export {ToolbarConfigurableExample} from './toolbar-configurable/toolbar-configurable-example'; export {ToolbarSkipDisabledExample} from './toolbar-skip-disabled/toolbar-skip-disabled-example'; diff --git a/src/components-examples/aria/toolbar/toolbar-basic-vertical/toolbar-basic-vertical-example.html b/src/components-examples/aria/toolbar/toolbar-basic-vertical/toolbar-basic-vertical-example.html new file mode 100644 index 000000000000..eec277e9de26 --- /dev/null +++ b/src/components-examples/aria/toolbar/toolbar-basic-vertical/toolbar-basic-vertical-example.html @@ -0,0 +1,43 @@ +
+
+ + + + + +
+
diff --git a/src/components-examples/aria/toolbar/toolbar-basic-vertical/toolbar-basic-vertical-example.ts b/src/components-examples/aria/toolbar/toolbar-basic-vertical/toolbar-basic-vertical-example.ts new file mode 100644 index 000000000000..fec7482882d1 --- /dev/null +++ b/src/components-examples/aria/toolbar/toolbar-basic-vertical/toolbar-basic-vertical-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 Vertical Toolbar Example */ +@Component({ + selector: 'toolbar-basic-vertical-example', + templateUrl: 'toolbar-basic-vertical-example.html', + styleUrl: '../toolbar-common.css', + imports: [RadioButton, RadioGroup, Toolbar, ToolbarWidget], +}) +export class ToolbarBasicVerticalExample { + 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.html b/src/dev-app/aria-toolbar/toolbar-demo.html index c339fb73e877..33908326501f 100644 --- a/src/dev-app/aria-toolbar/toolbar-demo.html +++ b/src/dev-app/aria-toolbar/toolbar-demo.html @@ -1,16 +1,20 @@
-

Toolbar Basic Horizontal

- +

Toolbar Basic Horizontal

+
-

Toolbar Skip Disabled

- +

Toolbar Skip Disabled

+ +
+
+

Toolbar Basic Vertical

+
-

Configurable CDK Toolbar

- +

Configurable CDK Toolbar

+
-
\ No newline at end of file + diff --git a/src/dev-app/aria-toolbar/toolbar-demo.ts b/src/dev-app/aria-toolbar/toolbar-demo.ts index a8acb63ce1c2..535db0baa8c7 100644 --- a/src/dev-app/aria-toolbar/toolbar-demo.ts +++ b/src/dev-app/aria-toolbar/toolbar-demo.ts @@ -9,13 +9,19 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; import { ToolbarBasicHorizontalExample, + ToolbarBasicVerticalExample, ToolbarConfigurableExample, ToolbarSkipDisabledExample, } from '@angular/components-examples/aria/toolbar'; @Component({ templateUrl: 'toolbar-demo.html', - imports: [ToolbarBasicHorizontalExample, ToolbarConfigurableExample, ToolbarSkipDisabledExample], + imports: [ + ToolbarBasicHorizontalExample, + ToolbarBasicVerticalExample, + ToolbarConfigurableExample, + ToolbarSkipDisabledExample, + ], styleUrl: './toolbar-demo.css', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush,