Skip to content

Commit d295fbe

Browse files
wagnermacielwagnermaciel
committed
feat(aria/menu): add examples for aria menu
* Adds four examples for the new ARIA menu directives: - A menubar example demonstrating a typical application menu. - A menu trigger example showing a simple icon button that opens a menu. - A standalone menu example. - A context menu example that opens on right-click. * Also includes a set of simple wrapper directives to apply basic popover styles and behavior to the examples.
1 parent 7e4f908 commit d295fbe

File tree

16 files changed

+888
-1
lines changed

16 files changed

+888
-1
lines changed

‎src/components-examples/aria/menu/BUILD.bazel‎

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

‎src/components-examples/aria/menu/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export {MenuBarExample} from './menu-bar/menu-bar-example';
2+
export {MenuContextExample} from './menu-context/menu-context-example';
3+
export {MenuTriggerExample} from './menu-trigger/menu-trigger-example';
4+
export {MenuStandaloneExample} from './menu-standalone/menu-standalone-example';

‎src/components-examples/aria/menu/menu-bar/menu-bar-example.html‎

Lines changed: 300 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,300 @@
1+
<div menu-bar>
2+
<div menu-bar-item value="File" [submenu]="fileMenu" #fileItem="ngMenuItem">File</div>
3+
4+
<div menu [parent]="fileItem" #fileMenu="ngMenu">
5+
<div menu-item value="New">
6+
<span menu-item-icon>article</span>
7+
<span menu-item-text>New</span>
8+
<span menu-item-shortcut>⌘N</span>
9+
</div>
10+
11+
<div menu-item value="Open">
12+
<span menu-item-icon>folder</span>
13+
<span menu-item-text>Open</span>
14+
<span menu-item-shortcut>⌘O</span>
15+
</div>
16+
17+
<div menu-item value="Make a copy">
18+
<span menu-item-icon>file_copy</span>
19+
<span menu-item-text>Make a copy</span>
20+
</div>
21+
22+
<div role="separator" class="example-menu-item-separator"></div>
23+
24+
<div menu-item value="Share" #shareItem="ngMenuItem" [submenu]="shareMenu">
25+
<span menu-item-icon>person_add</span>
26+
<span menu-item-text>Share</span>
27+
<span menu-item-icon class="example-arrow">arrow_right</span>
28+
</div>
29+
30+
<div menu [parent]="shareItem" #shareMenu="ngMenu">
31+
<div menu-item value="Share with others">
32+
<span menu-item-icon>person_add</span>
33+
<span menu-item-text>Share with others</span>
34+
</div>
35+
36+
<div menu-item value="Publish to web">
37+
<span menu-item-icon>public</span>
38+
<span menu-item-text>Publish to web</span>
39+
</div>
40+
</div>
41+
42+
<div menu-item value="Download">
43+
<span menu-item-icon>download</span>
44+
<span menu-item-text>Download</span>
45+
</div>
46+
47+
<div menu-item value="Print">
48+
<span menu-item-icon>print</span>
49+
<span menu-item-text>Print</span>
50+
</div>
51+
52+
<div role="separator" class="example-menu-item-separator"></div>
53+
54+
<div menu-item value="Rename">
55+
<span menu-item-icon>edit</span>
56+
<span menu-item-text>Rename</span>
57+
</div>
58+
59+
<div menu-item value="Delete">
60+
<span menu-item-icon>delete</span>
61+
<span menu-item-text>Move to trash</span>
62+
</div>
63+
</div>
64+
65+
<div menu-bar-item value="Edit" #editItem="ngMenuItem" [submenu]="editMenu">Edit</div>
66+
67+
<div menu [parent]="editItem" #editMenu="ngMenu">
68+
<div menu-item value="Undo">
69+
<span menu-item-icon>undo</span>
70+
<span menu-item-text>Undo</span>
71+
<span menu-item-shortcut>⌘Z</span>
72+
</div>
73+
74+
<div menu-item value="Redo">
75+
<span menu-item-icon>redo</span>
76+
<span menu-item-text>Redo</span>
77+
<span menu-item-shortcut>⌘Y</span>
78+
</div>
79+
80+
<div role="separator" class="example-menu-item-separator"></div>
81+
82+
<div menu-item value="Cut">
83+
<span menu-item-icon>content_cut</span>
84+
<span menu-item-text>Cut</span>
85+
<span menu-item-shortcut>⌘X</span>
86+
</div>
87+
88+
<div menu-item value="Copy">
89+
<span menu-item-icon>content_copy</span>
90+
<span menu-item-text>Copy</span>
91+
<span menu-item-shortcut>⌘C</span>
92+
</div>
93+
94+
<div menu-item value="Paste">
95+
<span menu-item-icon>content_paste</span>
96+
<span menu-item-text>Paste</span>
97+
<span menu-item-shortcut>⌘V</span>
98+
</div>
99+
100+
<div role="separator" class="example-menu-item-separator"></div>
101+
102+
<div menu-item value="Find and replace">
103+
<span menu-item-icon>find_replace</span>
104+
<span menu-item-text>Find and replace</span>
105+
<span menu-item-shortcut>⇧⌘H</span>
106+
</div>
107+
</div>
108+
109+
<div menu-bar-item value="View" #viewItem="ngMenuItem" [submenu]="viewMenu">View</div>
110+
111+
<div menu [parent]="viewItem" #viewMenu="ngMenu">
112+
<div menu-item value="Show print layout" [disabled]="true">
113+
<span menu-item-icon>check</span>
114+
<span menu-item-text>Show print layout</span>
115+
</div>
116+
117+
<div menu-item value="Show ruler" [disabled]="true">
118+
<span menu-item-icon>check</span>
119+
<span menu-item-text>Show ruler</span>
120+
</div>
121+
122+
<div role="separator" class="example-menu-item-separator"></div>
123+
124+
<div menu-item value="Zoom in">
125+
<span menu-item-text>Zoom in</span>
126+
<span menu-item-shortcut>⌘+</span>
127+
</div>
128+
129+
<div menu-item value="Zoom out">
130+
<span menu-item-text>Zoom out</span>
131+
<span menu-item-shortcut>⌘-</span>
132+
</div>
133+
134+
<div role="separator" class="example-menu-item-separator"></div>
135+
136+
<div menu-item value="Full screen">
137+
<span menu-item-text>Full screen</span>
138+
</div>
139+
</div>
140+
141+
<div menu-bar-item value="Insert" [submenu]="insertMenu" #insertItem="ngMenuItem">Insert</div>
142+
143+
<div menu [parent]="insertItem" #insertMenu="ngMenu">
144+
<div menu-item value="Image" #imageItem="ngMenuItem" [submenu]="imageMenu">
145+
<span menu-item-icon>image</span>
146+
<span menu-item-text>Image</span>
147+
<span menu-item-icon class="example-arrow">arrow_right</span>
148+
</div>
149+
150+
<div menu [parent]="imageItem" #imageMenu="ngMenu">
151+
<div menu-item value="Upload from computer">
152+
<span menu-item-icon>upload</span>
153+
<span menu-item-text>Upload from computer</span>
154+
</div>
155+
156+
<div menu-item value="Search the web">
157+
<span menu-item-icon>search</span>
158+
<span menu-item-text>Search the web</span>
159+
</div>
160+
161+
<div menu-item value="By URL">
162+
<span menu-item-icon>link</span>
163+
<span menu-item-text>By URL</span>
164+
</div>
165+
</div>
166+
167+
<div menu-item value="Table">
168+
<span menu-item-icon>table_chart</span>
169+
<span menu-item-text>Table</span>
170+
</div>
171+
172+
<div menu-item value="Chart" #chartItem="ngMenuItem" [submenu]="chartMenu">
173+
<span menu-item-icon>insert_chart</span>
174+
<span menu-item-text>Chart</span>
175+
<span menu-item-icon class="example-arrow">arrow_right</span>
176+
</div>
177+
178+
<div menu [parent]="chartItem" #chartMenu="ngMenu">
179+
<div menu-item value="Bar">
180+
<span menu-item-icon>bar_chart</span>
181+
<span menu-item-text>Bar</span>
182+
</div>
183+
184+
<div menu-item value="Column">
185+
<span menu-item-icon>insert_chart</span>
186+
<span menu-item-text>Column</span>
187+
</div>
188+
189+
<div menu-item value="Line">
190+
<span menu-item-icon>show_chart</span>
191+
<span menu-item-text>Line</span>
192+
</div>
193+
194+
<div menu-item value="Pie">
195+
<span menu-item-icon>pie_chart</span>
196+
<span menu-item-text>Pie</span>
197+
</div>
198+
</div>
199+
200+
<div menu-item value="Horizontal line">
201+
<span menu-item-icon>horizontal_rule</span>
202+
<span menu-item-text>Horizontal line</span>
203+
</div>
204+
</div>
205+
206+
<div menu-bar-item value="Format" [submenu]="formatMenu" #formatItem="ngMenuItem">Format</div>
207+
208+
<div menu [parent]="formatItem" #formatMenu="ngMenu">
209+
<div menu-item value="Text" [submenu]="textMenu" #textItem="ngMenuItem">
210+
<span menu-item-icon>format_bold</span>
211+
<span menu-item-text>Text</span>
212+
<span menu-item-icon class="example-arrow">arrow_right</span>
213+
</div>
214+
215+
<div menu #textMenu="ngMenu" [parent]="textItem">
216+
<div menu-item value="Bold">
217+
<span menu-item-icon>format_bold</span>
218+
<span menu-item-text>Bold</span>
219+
<span menu-item-shortcut>⌘B</span>
220+
</div>
221+
222+
<div menu-item value="Italic">
223+
<span menu-item-icon>format_italic</span>
224+
<span menu-item-text>Italic</span>
225+
<span menu-item-shortcut>⌘I</span>
226+
</div>
227+
228+
<div menu-item value="Underline">
229+
<span menu-item-icon>format_underlined</span>
230+
<span menu-item-text>Underline</span>
231+
<span menu-item-shortcut>⌘U</span>
232+
</div>
233+
234+
<div menu-item value="Strikethrough">
235+
<span menu-item-icon>strikethrough_s</span>
236+
<span menu-item-text>Strikethrough</span>
237+
<span menu-item-shortcut>⇧⌘X</span>
238+
</div>
239+
240+
<div role="separator" class="example-menu-item-separator"></div>
241+
242+
<div menu-item value="Size" [submenu]="sizeMenu" #sizeItem="ngMenuItem">
243+
<span menu-item-text>Size</span>
244+
<span menu-item-icon class="example-arrow">arrow_right</span>
245+
</div>
246+
247+
<div menu #sizeMenu="ngMenu" [parent]="sizeItem">
248+
<div menu-item value="Increase font size">
249+
<span menu-item-text>Increase font size</span>
250+
<span menu-item-shortcut>⇧⌘.</span>
251+
</div>
252+
253+
<div menu-item value="Decrease font size">
254+
<span menu-item-text>Decrease font size</span>
255+
<span menu-item-shortcut>⇧⌘,</span>
256+
</div>
257+
</div>
258+
</div>
259+
260+
<div menu-item value="Paragraph styles" [submenu]="paragraphMenu" #paragraphItem="ngMenuItem">
261+
<span menu-item-icon>format_align_justify</span>
262+
<span menu-item-text>Paragraph styles</span>
263+
<span menu-item-icon class="example-arrow">arrow_right</span>
264+
</div>
265+
266+
<div menu #paragraphMenu="ngMenu" [parent]="paragraphItem">
267+
<div menu-item value="Normal text">Normal text</div>
268+
<div menu-item value="Heading 1">Heading 1</div>
269+
<div menu-item value="Heading 2">Heading 2</div>
270+
</div>
271+
272+
<div menu-item [submenu]="alignMenu" value="Align & indent" #alignItem="ngMenuItem">
273+
<span menu-item-icon>format_indent_increase</span>
274+
<span menu-item-text>Align & indent</span>
275+
<span menu-item-icon class="example-arrow">arrow_right</span>
276+
</div>
277+
278+
<div menu #alignMenu="ngMenu" [parent]="alignItem">
279+
<div menu-item value="Align left">
280+
<span menu-item-icon>format_align_left</span>
281+
<span menu-item-text>Align left</span>
282+
</div>
283+
284+
<div menu-item value="Align center">
285+
<span menu-item-icon>format_align_center</span>
286+
<span menu-item-text>Align center</span>
287+
</div>
288+
289+
<div menu-item value="Align right">
290+
<span menu-item-icon>format_align_right</span>
291+
<span menu-item-text>Align right</span>
292+
</div>
293+
294+
<div menu-item value="Justify">
295+
<span menu-item-icon>format_align_justify</span>
296+
<span menu-item-text>Justify</span>
297+
</div>
298+
</div>
299+
</div>
300+
</div>

‎src/components-examples/aria/menu/menu-bar/menu-bar-example.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {Component} from '@angular/core';
2+
import {
3+
SimpleMenu,
4+
SimpleMenuBar,
5+
SimpleMenuBarItem,
6+
SimpleMenuItem,
7+
SimpleMenuItemIcon,
8+
SimpleMenuItemShortcut,
9+
SimpleMenuItemText,
10+
} from '../simple-menu';
11+
12+
/** @title Menu bar example. */
13+
@Component({
14+
selector: 'menu-bar-example',
15+
exportAs: 'MenuBarExample',
16+
templateUrl: 'menu-bar-example.html',
17+
styleUrl: '../menu-example.css',
18+
standalone: true,
19+
imports: [
20+
SimpleMenu,
21+
SimpleMenuBar,
22+
SimpleMenuBarItem,
23+
SimpleMenuItem,
24+
SimpleMenuItemIcon,
25+
SimpleMenuItemText,
26+
SimpleMenuItemShortcut,
27+
],
28+
})
29+
export class MenuBarExample {}

0 commit comments

Comments
 (0)