49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
|
<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="tabler-brand-twitter"
|
||
|
|
/>
|
||
|
|
</VBadge>
|
||
|
|
|
||
|
|
<VBadge
|
||
|
|
content="5"
|
||
|
|
transition="scale-transition"
|
||
|
|
:model-value="showInstagramBadgeOnHover"
|
||
|
|
>
|
||
|
|
<VIcon
|
||
|
|
ref="tRefInstagramBadge"
|
||
|
|
size="25"
|
||
|
|
icon="tabler-brand-instagram"
|
||
|
|
/>
|
||
|
|
</VBadge>
|
||
|
|
|
||
|
|
<VBadge
|
||
|
|
content="1"
|
||
|
|
transition="slide-x-transition"
|
||
|
|
:model-value="showWhatsappBadgeOnHover"
|
||
|
|
>
|
||
|
|
<VIcon
|
||
|
|
ref="tRefWhatsappBadge"
|
||
|
|
size="25"
|
||
|
|
icon="tabler-brand-whatsapp"
|
||
|
|
/>
|
||
|
|
</VBadge>
|
||
|
|
</div>
|
||
|
|
</template>
|