Skip to content

Commit b4309e5

Browse files
andy9775andy9775
authored
refactor(cdk-experimental/menu): refactor the dev-app to include context menu and inline menu (#20228)
Refactor the dev-app to include inline menu and nested context menus and clean up the menu bar example.
1 parent c79dc6f commit b4309e5

File tree

2 files changed

+105
-26
lines changed

2 files changed

+105
-26
lines changed

‎src/dev-app/cdk-experimental-menu/cdk-menu-demo.css

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
1-
.example-menu-bar {
1+
.example-menu {
22
display: flex;
3-
flex-direction: row;
4-
list-style: none;
3+
flex-direction: column;
4+
}
5+
6+
.example-menu-container + .example-menu-container {
7+
/* add some buffer for the opened menu */
8+
margin-top: 140px;
9+
}
10+
11+
.example-menu-inline > button {
12+
display: block;
13+
}
14+
15+
.example-context {
16+
/* delineate where the context is */
17+
border: solid 2px black;
18+
padding: 6px;
519
}

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

Lines changed: 88 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,88 @@
1-
<ul cdkMenuBar class="example-menu-bar">
2-
<li role="none"><button id="file_button" cdkMenuItem [cdkMenuTriggerFor]="file">File</button></li>
3-
<li role="none"><button id="edit_button" cdkMenuItem [cdkMenuTriggerFor]="edit">Edit</button></li>
4-
</ul>
5-
6-
<ng-template cdkMenuPanel #file="cdkMenuPanel">
7-
<ul cdkMenu [cdkMenuPanel]="file" id="file_menu">
8-
<li role="none"><button id="share_button" cdkMenuItem>Share</button></li>
9-
<li role="none"><button id="open_button" cdkMenuItem>Open</button></li>
10-
<li role="none"><button id="rename_button" cdkMenuItem>Rename</button></li>
11-
<li role="none"><button id="print_button" cdkMenuItem>Print</button></li>
12-
</ul>
13-
</ng-template>
14-
15-
<ng-template cdkMenuPanel #edit="cdkMenuPanel">
16-
<ul cdkMenu [cdkMenuPanel]="edit" id="edit_menu">
17-
<li role="none"><button id="undo_button" cdkMenuItem>Undo</button></li>
18-
<li role="none"><button id="redo_button" cdkMenuItem>Redo</button></li>
19-
<li role="none"><button id="cut_button" cdkMenuItem>Cut</button></li>
20-
<li role="none"><button id="copy_button" cdkMenuItem>Copy</button></li>
21-
<li role="none"><button id="paste_button" cdkMenuItem>Paste</button></li>
22-
</ul>
23-
</ng-template>
1+
<div class="example-menu-container">
2+
<h3>MenuBar Example</h3>
3+
4+
<div cdkMenuBar>
5+
<button id="file_button" cdkMenuItem [cdkMenuTriggerFor]="file">File</button>
6+
<button id="edit_button" cdkMenuItem [cdkMenuTriggerFor]="edit">Edit</button>
7+
</div>
8+
9+
<ng-template cdkMenuPanel #file="cdkMenuPanel">
10+
<div cdkMenu class="example-menu" [cdkMenuPanel]="file" id="file_menu">
11+
<button id="share_button" cdkMenuItem [cdkMenuTriggerFor]="share">Share</button>
12+
<button id="open_button" cdkMenuItem>Open</button>
13+
<button id="rename_button" cdkMenuItem>Rename</button>
14+
<button id="print_button" cdkMenuItem>Print</button>
15+
</div>
16+
</ng-template>
17+
18+
<ng-template cdkMenuPanel #edit="cdkMenuPanel">
19+
<div cdkMenu class="example-menu" [cdkMenuPanel]="edit" id="edit_menu">
20+
<button id="undo_button" cdkMenuItem>Undo</button>
21+
<button id="redo_button" cdkMenuItem>Redo</button>
22+
<button id="cut_button" cdkMenuItem>Cut</button>
23+
<button id="copy_button" cdkMenuItem>Copy</button>
24+
<button id="paste_button" cdkMenuItem>Paste</button>
25+
</div>
26+
</ng-template>
27+
<ng-template cdkMenuPanel #share="cdkMenuPanel">
28+
<div cdkMenu class="example-menu" [cdkMenuPanel]="share" id="share_menu">
29+
<button id="undo_button" cdkMenuItem>GVC</button>
30+
<button id="redo_button" cdkMenuItem>Gmail</button>
31+
<button id="redo_button" cdkMenuItem>Twitter</button>
32+
</div>
33+
</ng-template>
34+
</div>
35+
36+
<div class="example-menu-container">
37+
<h3>Inline Menu Example</h3>
38+
39+
<div cdkMenu class="example-menu" class="example-menu-inline">
40+
<button cdkMenuItem>Inbox</button>
41+
<button cdkMenuItem>Starred</button>
42+
<button cdkMenuItem>Snoozed</button>
43+
<button cdkMenuItem>Important</button>
44+
<button cdkMenuItem>Chats</button>
45+
<button cdkMenuItem>Sent</button>
46+
</div>
47+
</div>
48+
49+
<div class="example-menu-container">
50+
<h3>Context Menu Example</h3>
51+
52+
<div class="example-context" [cdkContextMenuTriggerFor]="outer">
53+
<h4>Outer Context</h4>
54+
55+
Lucas ipsum dolor sit amet maul jade jawa ben wookiee binks lando jinn baba tatooine. Jade biggs
56+
padmé sebulba cade dagobah. Baba lars mothma yoda. Bothan calrissian c-3p0 maul fisto lando
57+
obi-wan. Skywalker solo darth bothan droid obi-wan ahsoka. Maul solo obi-wan calrissian antilles
58+
yavin chewbacca lando. Mustafar ponda kit jango. C-3p0 skywalker baba grievous moff. Hutt ben
59+
darth solo skywalker bothan skywalker maul organa. Grievous cade antilles utapau skywalker
60+
grievous antilles chewbacca.
61+
62+
<div class="example-context" [cdkContextMenuTriggerFor]="inner">
63+
<h4>Inner Context</h4>
64+
65+
R2-d2 skywalker hutt luke calamari kit antilles jawa. Fett ackbar secura gonk. Jawa dagobah
66+
sidious jabba mace tusken raider fett calamari kashyyyk. Yoda ponda fett moff binks darth
67+
organa lando. Dantooine hutt bothan yoda watto leia padmé. Calrissian mustafar ewok c-3po
68+
twi'lek yoda. Dantooine lars watto ewok dantooine. Aayla amidala dantooine luke bespin bespin
69+
obi-wan boba. Moff darth ventress jabba darth aayla. Mara mustafar darth amidala darth fisto
70+
wampa darth mara. Lando kessel wampa sidious.
71+
</div>
72+
</div>
73+
74+
<ng-template cdkMenuPanel #outer="cdkMenuPanel">
75+
<div cdkMenu class="example-menu" [cdkMenuPanel]="outer" id="outer_menu">
76+
<button id="undo_button" cdkMenuItem>Undo</button>
77+
<button id="redo_button" cdkMenuItem>Redo</button>
78+
</div>
79+
</ng-template>
80+
81+
<ng-template cdkMenuPanel #inner="cdkMenuPanel">
82+
<div cdkMenu class="example-menu" [cdkMenuPanel]="inner" id="inner_menu">
83+
<button id="cut_button" cdkMenuItem>Cut</button>
84+
<button id="copy_button" cdkMenuItem>Copy</button>
85+
<button id="paste_button" cdkMenuItem>Paste</button>
86+
</div>
87+
</ng-template>
88+
</div>

0 commit comments

Comments
 (0)