first commit
This commit is contained in:
Inshal
@@ -0,0 +1,46 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="success"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="warning"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="error"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
63
resources/js/views/demos/components/badge/DemoBadgeColor.vue
Normal file
63
resources/js/views/demos/components/badge/DemoBadgeColor.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
dot
|
||||
color="primary"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="secondary"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="success"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="info"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="warning"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="error"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup>
|
||||
const notifications = ref()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex align-center">
|
||||
<VBadge
|
||||
:content="notifications"
|
||||
:model-value="!!notifications"
|
||||
color="success"
|
||||
class="me-5"
|
||||
>
|
||||
<VIcon
|
||||
size="40"
|
||||
icon="ri-vuejs-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<div class="demo-space-x">
|
||||
<VBtn @click="notifications = (notifications || 0) + 1">
|
||||
Send Message
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="notifications = 0"
|
||||
>
|
||||
Clear Notifications
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
25
resources/js/views/demos/components/badge/DemoBadgeIcon.vue
Normal file
25
resources/js/views/demos/components/badge/DemoBadgeIcon.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<!-- avatar -->
|
||||
<VBadge>
|
||||
<template #badge>
|
||||
<VIcon icon="ri-error-warning-line" />
|
||||
</template>
|
||||
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- icon -->
|
||||
<VBadge icon="ri-lock-unlock-line">
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
content="99"
|
||||
max="99"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="100"
|
||||
max="99"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="1000"
|
||||
max="999"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<!-- 👉 Top End -->
|
||||
<VBadge
|
||||
content="1"
|
||||
location="end top"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 Bottom Start -->
|
||||
<VBadge
|
||||
location="bottom start"
|
||||
content="2"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 Bottom End -->
|
||||
<VBadge
|
||||
location="bottom end"
|
||||
content="3"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 top Start -->
|
||||
<VBadge
|
||||
location="top start"
|
||||
content="4"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
@@ -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>
|
||||
56
resources/js/views/demos/components/badge/DemoBadgeStyle.vue
Normal file
56
resources/js/views/demos/components/badge/DemoBadgeStyle.vue
Normal file
@@ -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>
|
||||
36
resources/js/views/demos/components/badge/DemoBadgeTabs.vue
Normal file
36
resources/js/views/demos/components/badge/DemoBadgeTabs.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<script setup>
|
||||
const tabs = [
|
||||
{
|
||||
badge: '3',
|
||||
content: 'Item One',
|
||||
},
|
||||
{
|
||||
badge: '1',
|
||||
content: 'Item Two',
|
||||
},
|
||||
{
|
||||
badge: '2',
|
||||
content: 'Item Three',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTabs
|
||||
grow
|
||||
height="52"
|
||||
>
|
||||
<VTab
|
||||
v-for="tab in tabs"
|
||||
:key="tab.content"
|
||||
:value="tab.content"
|
||||
>
|
||||
<VBadge
|
||||
:content="tab.badge"
|
||||
floating
|
||||
>
|
||||
{{ tab.content }}
|
||||
</VBadge>
|
||||
</VTab>
|
||||
</VTabs>
|
||||
</template>
|
||||
41
resources/js/views/demos/components/badge/DemoBadgeTonal.vue
Normal file
41
resources/js/views/demos/components/badge/DemoBadgeTonal.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
content="5"
|
||||
class="v-badge--tonal"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- default -->
|
||||
<VBadge
|
||||
content="1"
|
||||
class="v-badge--tonal"
|
||||
color="error"
|
||||
>
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
color="error"
|
||||
>
|
||||
Default
|
||||
</VBtn>
|
||||
</VBadge>
|
||||
|
||||
<!-- icon -->
|
||||
<VBadge
|
||||
icon="ri-lock-unlock-line"
|
||||
color="info"
|
||||
class="v-badge--tonal"
|
||||
>
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
889
resources/js/views/demos/components/badge/demoCodeBadge.js
Normal file
889
resources/js/views/demos/components/badge/demoCodeBadge.js
Normal file
@@ -0,0 +1,889 @@
|
||||
export const avatarStatus = { ts: `<script setup lang="ts">
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="success"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="warning"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="error"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="success"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="warning"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="error"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const color = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
dot
|
||||
color="primary"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="secondary"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="success"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="info"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="warning"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="error"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
dot
|
||||
color="primary"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="secondary"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="success"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="info"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="warning"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="error"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const dynamicNotifications = { ts: `<script lang="ts" setup>
|
||||
const notifications = ref<number>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex align-center">
|
||||
<VBadge
|
||||
:content="notifications"
|
||||
:model-value="!!notifications"
|
||||
color="success"
|
||||
class="me-5"
|
||||
>
|
||||
<VIcon
|
||||
size="40"
|
||||
icon="ri-vuejs-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<div class="demo-space-x">
|
||||
<VBtn @click="notifications = (notifications || 0) + 1">
|
||||
Send Message
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="notifications = 0"
|
||||
>
|
||||
Clear Notifications
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const notifications = ref()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex align-center">
|
||||
<VBadge
|
||||
:content="notifications"
|
||||
:model-value="!!notifications"
|
||||
color="success"
|
||||
class="me-5"
|
||||
>
|
||||
<VIcon
|
||||
size="40"
|
||||
icon="ri-vuejs-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<div class="demo-space-x">
|
||||
<VBtn @click="notifications = (notifications || 0) + 1">
|
||||
Send Message
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="notifications = 0"
|
||||
>
|
||||
Clear Notifications
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const icon = { ts: `<script setup lang="ts">
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<!-- avatar -->
|
||||
<VBadge>
|
||||
<template #badge>
|
||||
<VIcon icon="ri-error-warning-line" />
|
||||
</template>
|
||||
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- icon -->
|
||||
<VBadge icon="ri-lock-unlock-line">
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<!-- avatar -->
|
||||
<VBadge>
|
||||
<template #badge>
|
||||
<VIcon icon="ri-error-warning-line" />
|
||||
</template>
|
||||
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- icon -->
|
||||
<VBadge icon="ri-lock-unlock-line">
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const maximumValue = { ts: `<script setup lang="ts">
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
content="99"
|
||||
max="99"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="100"
|
||||
max="99"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="1000"
|
||||
max="999"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
content="99"
|
||||
max="99"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="100"
|
||||
max="99"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="1000"
|
||||
max="999"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const position = { ts: `<script setup lang="ts">
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<!-- 👉 Top End -->
|
||||
<VBadge
|
||||
content="1"
|
||||
location="end top"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 Bottom Start -->
|
||||
<VBadge
|
||||
location="bottom start"
|
||||
content="2"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 Bottom End -->
|
||||
<VBadge
|
||||
location="bottom end"
|
||||
content="3"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 top Start -->
|
||||
<VBadge
|
||||
location="top start"
|
||||
content="4"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<!-- 👉 Top End -->
|
||||
<VBadge
|
||||
content="1"
|
||||
location="end top"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 Bottom Start -->
|
||||
<VBadge
|
||||
location="bottom start"
|
||||
content="2"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 Bottom End -->
|
||||
<VBadge
|
||||
location="bottom end"
|
||||
content="3"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 top Start -->
|
||||
<VBadge
|
||||
location="top start"
|
||||
content="4"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const showOnHover = { ts: `<script lang="ts" 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>
|
||||
`, js: `<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>
|
||||
` }
|
||||
|
||||
export const style = { ts: `<script setup lang="ts">
|
||||
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>
|
||||
`, js: `<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>
|
||||
` }
|
||||
|
||||
export const tabs = { ts: `<script setup lang="ts">
|
||||
const tabs = [
|
||||
{
|
||||
badge: '3',
|
||||
content: 'Item One',
|
||||
},
|
||||
{
|
||||
badge: '1',
|
||||
content: 'Item Two',
|
||||
},
|
||||
{
|
||||
badge: '2',
|
||||
content: 'Item Three',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTabs
|
||||
grow
|
||||
height="52"
|
||||
>
|
||||
<VTab
|
||||
v-for="tab in tabs"
|
||||
:key="tab.content"
|
||||
:value="tab.content"
|
||||
>
|
||||
<VBadge
|
||||
:content="tab.badge"
|
||||
floating
|
||||
>
|
||||
{{ tab.content }}
|
||||
</VBadge>
|
||||
</VTab>
|
||||
</VTabs>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const tabs = [
|
||||
{
|
||||
badge: '3',
|
||||
content: 'Item One',
|
||||
},
|
||||
{
|
||||
badge: '1',
|
||||
content: 'Item Two',
|
||||
},
|
||||
{
|
||||
badge: '2',
|
||||
content: 'Item Three',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTabs
|
||||
grow
|
||||
height="52"
|
||||
>
|
||||
<VTab
|
||||
v-for="tab in tabs"
|
||||
:key="tab.content"
|
||||
:value="tab.content"
|
||||
>
|
||||
<VBadge
|
||||
:content="tab.badge"
|
||||
floating
|
||||
>
|
||||
{{ tab.content }}
|
||||
</VBadge>
|
||||
</VTab>
|
||||
</VTabs>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const tonal = { ts: `<script setup lang="ts">
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
content="5"
|
||||
class="v-badge--tonal"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- default -->
|
||||
<VBadge
|
||||
content="1"
|
||||
class="v-badge--tonal"
|
||||
color="error"
|
||||
>
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
color="error"
|
||||
>
|
||||
Default
|
||||
</VBtn>
|
||||
</VBadge>
|
||||
|
||||
<!-- icon -->
|
||||
<VBadge
|
||||
icon="ri-lock-unlock-line"
|
||||
color="info"
|
||||
class="v-badge--tonal"
|
||||
>
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
content="5"
|
||||
class="v-badge--tonal"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- default -->
|
||||
<VBadge
|
||||
content="1"
|
||||
class="v-badge--tonal"
|
||||
color="error"
|
||||
>
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
color="error"
|
||||
>
|
||||
Default
|
||||
</VBtn>
|
||||
</VBadge>
|
||||
|
||||
<!-- icon -->
|
||||
<VBadge
|
||||
icon="ri-lock-unlock-line"
|
||||
color="info"
|
||||
class="v-badge--tonal"
|
||||
>
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
Reference in New Issue
Block a user