first commit

resources/js/views/demos/components/menu/DemoMenuCustomTransitions.vue

@@ -0,0 +1,50 @@
+<script setup>
+const items = [
+  {
+    title: 'Option 1',
+    value: 'Option 1',
+  },
+  {
+    title: 'Option 2',
+    value: 'Option 2',
+  },
+  {
+    title: 'Option 3',
+    value: 'Option 3',
+  },
+]
+</script>
+
+<template>
+  <div class="demo-space-x">
+    <VMenu transition="scale-transition">
+      <template #activator="{ props }">
+        <VBtn v-bind="props">
+          Scale Transition
+        </VBtn>
+      </template>
+
+      <VList :items="items" />
+    </VMenu>
+
+    <VMenu transition="slide-x-transition">
+      <template #activator="{ props }">
+        <VBtn v-bind="props">
+          Slide X Transition
+        </VBtn>
+      </template>
+
+      <VList :items="items" />
+    </VMenu>
+
+    <VMenu transition="slide-y-transition">
+      <template #activator="{ props }">
+        <VBtn v-bind="props">
+          Slide Y Transition
+        </VBtn>
+      </template>
+
+      <VList :items="items" />
+    </VMenu>
+  </div>
+</template>