Skip to content

Commit ace3039

Browse files
hawkeye64rstoenescu
hawkeye64
authored and
rstoenescu
committed
feat(docs): QMenu (quasarframework#3066)
1 parent 35527cd commit ace3039

File tree

8 files changed

+839
-64
lines changed

8 files changed

+839
-64
lines changed

‎docs/src/examples/QMenu/Alignment.vue‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<template>
2+
<div class="q-pa-md q-gutter-md">
3+
<div class="row justify-between">
4+
5+
<q-btn color="primary" label="Anchor/Self Menu">
6+
<q-menu
7+
anchor="top right"
8+
self="top left"
9+
>
10+
<q-list style="min-width: 100px">
11+
<q-item clickable v-close-menu>
12+
<q-item-section>anchor="top right"</q-item-section>
13+
</q-item>
14+
<q-item clickable v-close-menu>
15+
<q-item-section>self="top left"</q-item-section>
16+
</q-item>
17+
</q-list>
18+
</q-menu>
19+
</q-btn>
20+
21+
<q-btn color="primary" label="Anchor/Self Menu">
22+
<q-menu
23+
anchor="center middle"
24+
self="center middle"
25+
>
26+
<q-list style="min-width: 100px">
27+
<q-item clickable v-close-menu>
28+
<q-item-section>anchor="center middle"</q-item-section>
29+
</q-item>
30+
<q-item clickable v-close-menu>
31+
<q-item-section>self="center middle"</q-item-section>
32+
</q-item>
33+
</q-list>
34+
</q-menu>
35+
</q-btn>
36+
37+
<q-btn color="primary" label="Anchor/Self Menu">
38+
<q-menu
39+
anchor="bottom right"
40+
self="bottom left"
41+
>
42+
<q-list style="min-width: 100px">
43+
<q-item clickable v-close-menu>
44+
<q-item-section>anchor="bottom right"</q-item-section>
45+
</q-item>
46+
<q-item clickable v-close-menu>
47+
<q-item-section>self="bottom left"</q-item-section>
48+
</q-item>
49+
</q-list>
50+
</q-menu>
51+
</q-btn>
52+
53+
</div>
54+
<div class="row justify-between">
55+
56+
<q-btn color="primary" label="Offset Menu">
57+
<q-menu
58+
:offset="[0, 20]"
59+
>
60+
<q-list style="min-width: 100px">
61+
<q-item clickable v-close-menu>
62+
<q-item-section>:offset="[0, 20]"</q-item-section>
63+
</q-item>
64+
<q-item clickable v-close-menu>
65+
<q-item-section>:offset="[0, 20]"</q-item-section>
66+
</q-item>
67+
</q-list>
68+
</q-menu>
69+
</q-btn>
70+
71+
<q-btn color="primary" label="Offset Menu">
72+
<q-menu
73+
:offset="[50, 10]"
74+
>
75+
<q-list style="min-width: 100px">
76+
<q-item clickable v-close-menu>
77+
<q-item-section>:offset="[50, 10]"</q-item-section>
78+
</q-item>
79+
<q-item clickable v-close-menu>
80+
<q-item-section>:offset="[50, 10]"</q-item-section>
81+
</q-item>
82+
</q-list>
83+
</q-menu>
84+
</q-btn>
85+
86+
<q-btn color="primary" label="Offset Menu">
87+
<q-menu
88+
:offset="[-50, 10]"
89+
>
90+
<q-list style="min-width: 100px">
91+
<q-item clickable v-close-menu>
92+
<q-item-section>:offset="[-50, 10]"</q-item-section>
93+
</q-item>
94+
<q-item clickable v-close-menu>
95+
<q-item-section>:offset="[-50, 10]"</q-item-section>
96+
</q-item>
97+
</q-list>
98+
</q-menu>
99+
</q-btn>
100+
101+
</div>
102+
</div>
103+
</template>

‎docs/src/examples/QMenu/Basic.vue‎

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
<template>
2+
<div class="q-pa-md q-gutter-md">
3+
<div class="row justify-between">
4+
5+
<q-btn color="primary" label="Basic Menu">
6+
<q-menu
7+
>
8+
<q-list style="min-width: 100px">
9+
<q-item clickable>
10+
<q-item-section>New tab</q-item-section>
11+
</q-item>
12+
<q-item clickable>
13+
<q-item-section>New incognito tab</q-item-section>
14+
</q-item>
15+
<q-separator />
16+
<q-item clickable>
17+
<q-item-section>Recent tabs</q-item-section>
18+
</q-item>
19+
<q-item clickable>
20+
<q-item-section>History</q-item-section>
21+
</q-item>
22+
<q-item clickable>
23+
<q-item-section>Downloads</q-item-section>
24+
</q-item>
25+
<q-separator />
26+
<q-item clickable>
27+
<q-item-section>Settings</q-item-section>
28+
</q-item>
29+
<q-separator />
30+
<q-item clickable>
31+
<q-item-section>Help &amp; Feedback</q-item-section>
32+
</q-item>
33+
</q-list>
34+
</q-menu>
35+
</q-btn>
36+
37+
<q-btn color="secondary" label="Auto-Close Menu">
38+
<q-menu
39+
auto-close
40+
>
41+
<q-list style="min-width: 100px">
42+
<q-item clickable>
43+
<q-item-section>New tab</q-item-section>
44+
</q-item>
45+
<q-item clickable>
46+
<q-item-section>New incognito tab</q-item-section>
47+
</q-item>
48+
<q-separator />
49+
<q-item clickable>
50+
<q-item-section>Recent tabs</q-item-section>
51+
</q-item>
52+
<q-item clickable>
53+
<q-item-section>History</q-item-section>
54+
</q-item>
55+
<q-item clickable>
56+
<q-item-section>Downloads</q-item-section>
57+
</q-item>
58+
<q-separator />
59+
<q-item clickable>
60+
<q-item-section>Settings</q-item-section>
61+
</q-item>
62+
<q-separator />
63+
<q-item clickable>
64+
<q-item-section>Help &amp; Feedback</q-item-section>
65+
</q-item>
66+
</q-list>
67+
</q-menu>
68+
</q-btn>
69+
70+
</div>
71+
<div class="row justify-between">
72+
73+
<q-btn color="tertiary" label="Fit Menu" style="width: 280px;">
74+
<q-menu
75+
fit
76+
>
77+
<q-list style="min-width: 100px">
78+
<q-item clickable>
79+
<q-item-section>New tab</q-item-section>
80+
</q-item>
81+
<q-item clickable>
82+
<q-item-section>New incognito tab</q-item-section>
83+
</q-item>
84+
<q-separator />
85+
<q-item clickable>
86+
<q-item-section>Recent tabs</q-item-section>
87+
</q-item>
88+
<q-item clickable>
89+
<q-item-section>History</q-item-section>
90+
</q-item>
91+
<q-item clickable>
92+
<q-item-section>Downloads</q-item-section>
93+
</q-item>
94+
<q-separator />
95+
<q-item clickable>
96+
<q-item-section>Settings</q-item-section>
97+
</q-item>
98+
<q-separator />
99+
<q-item clickable>
100+
<q-item-section>Help &amp; Feedback</q-item-section>
101+
</q-item>
102+
</q-list>
103+
</q-menu>
104+
</q-btn>
105+
106+
<q-btn color="orange-7" label="Cover Menu">
107+
<q-menu
108+
cover
109+
>
110+
<q-list style="min-width: 100px">
111+
<q-item clickable>
112+
<q-item-section>New tab</q-item-section>
113+
</q-item>
114+
<q-item clickable>
115+
<q-item-section>New incognito tab</q-item-section>
116+
</q-item>
117+
<q-separator />
118+
<q-item clickable>
119+
<q-item-section>Recent tabs</q-item-section>
120+
</q-item>
121+
<q-item clickable>
122+
<q-item-section>History</q-item-section>
123+
</q-item>
124+
<q-item clickable>
125+
<q-item-section>Downloads</q-item-section>
126+
</q-item>
127+
<q-separator />
128+
<q-item clickable>
129+
<q-item-section>Settings</q-item-section>
130+
</q-item>
131+
<q-separator />
132+
<q-item clickable>
133+
<q-item-section>Help &amp; Feedback</q-item-section>
134+
</q-item>
135+
</q-list>
136+
</q-menu>
137+
</q-btn>
138+
139+
</div>
140+
<div class="row justify-between">
141+
142+
<q-btn color="blue-grey-7" label="touch-position Menu">
143+
<q-menu
144+
touch-position
145+
>
146+
<q-list style="min-width: 100px">
147+
<q-item clickable>
148+
<q-item-section>New tab</q-item-section>
149+
</q-item>
150+
<q-item clickable>
151+
<q-item-section>New incognito tab</q-item-section>
152+
</q-item>
153+
<q-separator />
154+
<q-item clickable>
155+
<q-item-section>Recent tabs</q-item-section>
156+
</q-item>
157+
<q-item clickable>
158+
<q-item-section>History</q-item-section>
159+
</q-item>
160+
<q-item clickable>
161+
<q-item-section>Downloads</q-item-section>
162+
</q-item>
163+
<q-separator />
164+
<q-item clickable>
165+
<q-item-section>Settings</q-item-section>
166+
</q-item>
167+
<q-separator />
168+
<q-item clickable>
169+
<q-item-section>Help &amp; Feedback</q-item-section>
170+
</q-item>
171+
</q-list>
172+
</q-menu>
173+
</q-btn>
174+
175+
<q-btn color="purple-3" label="Persistent Menu">
176+
<q-menu
177+
persistent
178+
>
179+
<q-list style="min-width: 100px">
180+
<q-item clickable>
181+
<q-item-section>New tab</q-item-section>
182+
</q-item>
183+
<q-item clickable>
184+
<q-item-section>New incognito tab</q-item-section>
185+
</q-item>
186+
<q-separator />
187+
<q-item clickable>
188+
<q-item-section>Recent tabs</q-item-section>
189+
</q-item>
190+
<q-item clickable>
191+
<q-item-section>History</q-item-section>
192+
</q-item>
193+
<q-item clickable>
194+
<q-item-section>Downloads</q-item-section>
195+
</q-item>
196+
<q-separator />
197+
<q-item clickable>
198+
<q-item-section>Settings</q-item-section>
199+
</q-item>
200+
<q-separator />
201+
<q-item clickable>
202+
<q-item-section>Help &amp; Feedback</q-item-section>
203+
</q-item>
204+
</q-list>
205+
</q-menu>
206+
</q-btn>
207+
208+
</div>
209+
<div class="row justify-between">
210+
211+
<q-btn color="primary" label="Max Height Menu">
212+
<q-menu
213+
max-height="100px"
214+
>
215+
<q-list style="min-width: 100px">
216+
<q-item clickable>
217+
<q-item-section>New tab</q-item-section>
218+
</q-item>
219+
<q-item clickable>
220+
<q-item-section>New incognito tab</q-item-section>
221+
</q-item>
222+
<q-separator />
223+
<q-item clickable>
224+
<q-item-section>Recent tabs</q-item-section>
225+
</q-item>
226+
<q-item clickable>
227+
<q-item-section>History</q-item-section>
228+
</q-item>
229+
<q-item clickable>
230+
<q-item-section>Downloads</q-item-section>
231+
</q-item>
232+
<q-separator />
233+
<q-item clickable>
234+
<q-item-section>Settings</q-item-section>
235+
</q-item>
236+
<q-separator />
237+
<q-item clickable>
238+
<q-item-section>Help &amp; Feedback</q-item-section>
239+
</q-item>
240+
</q-list>
241+
</q-menu>
242+
</q-btn>
243+
244+
<q-btn color="primary" label="Max Width Menu">
245+
<q-menu
246+
max-width="80px"
247+
>
248+
<q-list style="min-width: 100px">
249+
<q-item clickable>
250+
<q-item-section>New tab</q-item-section>
251+
</q-item>
252+
<q-item clickable>
253+
<q-item-section>New incognito tab</q-item-section>
254+
</q-item>
255+
<q-separator />
256+
<q-item clickable>
257+
<q-item-section>Recent tabs</q-item-section>
258+
</q-item>
259+
<q-item clickable>
260+
<q-item-section>History</q-item-section>
261+
</q-item>
262+
<q-item clickable>
263+
<q-item-section>Downloads</q-item-section>
264+
</q-item>
265+
<q-separator />
266+
<q-item clickable>
267+
<q-item-section>Settings</q-item-section>
268+
</q-item>
269+
<q-separator />
270+
<q-item clickable>
271+
<q-item-section>Help &amp; Feedback</q-item-section>
272+
</q-item>
273+
</q-list>
274+
</q-menu>
275+
</q-btn>
276+
277+
</div>
278+
</div>
279+
</template>

0 commit comments

Comments
 (0)