menu-badge-dot.vue 597 B

12345678910111213141516171819202122232425262728
  1. <script setup lang="ts">
  2. import type { CSSProperties } from 'vue';
  3. interface Props {
  4. dotClass?: string;
  5. dotStyle?: CSSProperties;
  6. }
  7. withDefaults(defineProps<Props>(), {
  8. dotClass: '',
  9. dotStyle: () => ({}),
  10. });
  11. </script>
  12. <template>
  13. <span class="relative mr-1 flex size-1.5">
  14. <span
  15. :class="dotClass"
  16. :style="dotStyle"
  17. class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
  18. >
  19. </span>
  20. <span
  21. :class="dotClass"
  22. :style="dotStyle"
  23. class="relative inline-flex size-1.5 rounded-full"
  24. ></span>
  25. </span>
  26. </template>