first commit

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

@@ -0,0 +1,56 @@
+<script setup>
+import avatar1 from '@images/avatars/avatar-1.png'
+</script>
+
+<template>
+  <div class="demo-space-x d-flex align-center flex-wrap">
+    <!-- default -->
+    <VBadge content="1">
+      <VBtn variant="tonal">
+        Default
+      </VBtn>
+    </VBadge>
+
+    <!-- bordered -->
+    <VBadge
+      content="5"
+      bordered
+    >
+      <VBtn variant="tonal">
+        Border
+      </VBtn>
+    </VBadge>
+
+    <!-- dot -->
+    <VBadge
+      dot
+      location="bottom end"
+      offset-x="3"
+      offset-y="3"
+    >
+      <VAvatar size="48">
+        <VImg :src="avatar1" />
+      </VAvatar>
+    </VBadge>
+
+    <!-- inline -->
+    <VBadge
+      inline
+      content="5"
+    >
+      <VAvatar size="48">
+        <VImg :src="avatar1" />
+      </VAvatar>
+    </VBadge>
+
+    <!-- Rounded -->
+    <VBadge
+      rounded="sm"
+      content="5"
+    >
+      <VAvatar size="48">
+        <VImg :src="avatar1" />
+      </VAvatar>
+    </VBadge>
+  </div>
+</template>