first commit

resources/js/views/demos/components/badge/DemoBadgeShowOnHover.vue

@@ -0,0 +1,48 @@
+<script setup>
+const tRefInstagramBadge = ref()
+const tRefTwitterBadge = ref()
+const tRefWhatsappBadge = ref()
+const showTwitterBadgeOnHover = useElementHover(tRefTwitterBadge)
+const showInstagramBadgeOnHover = useElementHover(tRefInstagramBadge)
+const showWhatsappBadgeOnHover = useElementHover(tRefWhatsappBadge)
+</script>
+
+<template>
+  <div class="demo-space-x">
+    <VBadge
+      content="3"
+      transition="slide-x-transition"
+      :model-value="showTwitterBadgeOnHover"
+    >
+      <VIcon
+        ref="tRefTwitterBadge"
+        size="25"
+        icon="ri-twitter-line"
+      />
+    </VBadge>
+
+    <VBadge
+      content="5"
+      transition="scale-transition"
+      :model-value="showInstagramBadgeOnHover"
+    >
+      <VIcon
+        ref="tRefInstagramBadge"
+        size="25"
+        icon="ri-instagram-line"
+      />
+    </VBadge>
+
+    <VBadge
+      content="1"
+      transition="slide-x-transition"
+      :model-value="showWhatsappBadgeOnHover"
+    >
+      <VIcon
+        ref="tRefWhatsappBadge"
+        size="25"
+        icon="ri-whatsapp-line"
+      />
+    </VBadge>
+  </div>
+</template>