menu.vue
2.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<script setup>
import * as demoCode from '@/views/demos/components/menu/demoCodeMenu'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p>
Remember to put the element that activates the menu in the activator slot.
</p>
<DemoMenuBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Custom transitions -->
<AppCardCode
title="Custom transitions"
:code="demoCode.customTransitions"
>
<p>Vuetify comes with 3 standard transitions, <code>scale</code>, <code>slide-x</code> and <code>slide-y</code>. Use <code>transition</code> prop to add transition to a menu.</p>
<DemoMenuCustomTransitions />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Location -->
<AppCardCode
title="Location"
:code="demoCode.location"
>
<p>Menu can be offset relative to the activator by using the <code>location</code> prop.</p>
<DemoMenuLocation />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Open on hover -->
<AppCardCode
title="Open on hover"
:code="demoCode.openOnHover"
>
<p>Menus can be accessed using hover instead of clicking with the <code>open-on-hover</code> prop.</p>
<DemoMenuOpenOnHover />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Popover -->
<AppCardCode
title="Popover"
:code="demoCode.popover"
>
<p>A menu can be configured to be static when opened, allowing it to function as a popover. This can be useful when there are multiple interactive items within the menu contents.</p>
<DemoMenuPopover />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Activator and tooltip -->
<AppCardCode
title="Activator and tooltip"
:code="demoCode.activatorAndTooltip"
>
<p>With the new <code>v-slot</code> syntax, nested activators such as those seen with a <code>v-menu</code> and <code>v-tooltip</code> attached to the same activator button, need a particular setup in order to function correctly</p>
<DemoMenuActivatorAndTooltip />
</AppCardCode>
</VCol>
</VRow>
</template>