first commit
This commit is contained in:
Inshal
410
resources/js/views/demos/components/tooltip/demoCodeTooltip.js
Normal file
410
resources/js/views/demos/components/tooltip/demoCodeTooltip.js
Normal file
@@ -0,0 +1,410 @@
|
||||
export const delayOnHover = { ts: `<template>
|
||||
<!-- Delay on open -->
|
||||
<VBtn variant="outlined">
|
||||
<span>Open Delay On Hover</span> <VTooltip
|
||||
open-delay="500"
|
||||
location="top"
|
||||
activator="parent"
|
||||
>
|
||||
<span>Open Delay On Hover</span>
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<!-- Delay on open -->
|
||||
<VBtn variant="outlined">
|
||||
<span>Open Delay On Hover</span> <VTooltip
|
||||
open-delay="500"
|
||||
location="top"
|
||||
activator="parent"
|
||||
>
|
||||
<span>Open Delay On Hover</span>
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const events = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<!-- open on hover -->
|
||||
<VBtn variant="outlined">
|
||||
<span>Open On Hover</span>
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Open On Hover
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
|
||||
<!-- open on click -->
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
>
|
||||
<span>Open On click</span>
|
||||
|
||||
<VTooltip
|
||||
open-on-click
|
||||
:open-on-hover="false"
|
||||
location="top"
|
||||
activator="parent"
|
||||
>
|
||||
Open On click
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
|
||||
<!-- open on focus -->
|
||||
<VBtn variant="outlined">
|
||||
<span>Open On Hover + Focus</span>
|
||||
<VTooltip
|
||||
open-on-focus
|
||||
location="top"
|
||||
activator="parent"
|
||||
>
|
||||
Open On Hover + Focus
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<!-- open on hover -->
|
||||
<VBtn variant="outlined">
|
||||
<span>Open On Hover</span>
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Open On Hover
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
|
||||
<!-- open on click -->
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
>
|
||||
<span>Open On click</span>
|
||||
|
||||
<VTooltip
|
||||
open-on-click
|
||||
:open-on-hover="false"
|
||||
location="top"
|
||||
activator="parent"
|
||||
>
|
||||
Open On click
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
|
||||
<!-- open on focus -->
|
||||
<VBtn variant="outlined">
|
||||
<span>Open On Hover + Focus</span>
|
||||
<VTooltip
|
||||
open-on-focus
|
||||
location="top"
|
||||
activator="parent"
|
||||
>
|
||||
Open On Hover + Focus
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const location = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn variant="tonal">
|
||||
Tooltip on End
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="end"
|
||||
>
|
||||
End Tooltip
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
|
||||
<VBtn variant="tonal">
|
||||
Tooltip on Start
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="start"
|
||||
>
|
||||
Start Tooltip
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
|
||||
<VBtn variant="tonal">
|
||||
Tooltip on Top
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Top Tooltip
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
|
||||
<VBtn variant="tonal">
|
||||
Tooltip on Bottom
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="bottom"
|
||||
>
|
||||
Bottom Tooltip
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn variant="tonal">
|
||||
Tooltip on End
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="end"
|
||||
>
|
||||
End Tooltip
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
|
||||
<VBtn variant="tonal">
|
||||
Tooltip on Start
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="start"
|
||||
>
|
||||
Start Tooltip
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
|
||||
<VBtn variant="tonal">
|
||||
Tooltip on Top
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Top Tooltip
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
|
||||
<VBtn variant="tonal">
|
||||
Tooltip on Bottom
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="bottom"
|
||||
>
|
||||
Bottom Tooltip
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const tooltipOnVariousElements = { ts: `<script setup lang="ts">
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn>
|
||||
Button
|
||||
<VTooltip
|
||||
location="top"
|
||||
activator="parent"
|
||||
>
|
||||
Tooltip
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
|
||||
<VAvatar color="info">
|
||||
<VImg :src="avatar4" />
|
||||
<VTooltip
|
||||
location="top"
|
||||
activator="parent"
|
||||
>
|
||||
Tooltip on Avatar
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VTooltip location="top">
|
||||
<template #activator="{ props }">
|
||||
<VIcon
|
||||
v-bind="props"
|
||||
size="30"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
</template>
|
||||
<span>Tooltip on Icon</span>
|
||||
</VTooltip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn>
|
||||
Button
|
||||
<VTooltip
|
||||
location="top"
|
||||
activator="parent"
|
||||
>
|
||||
Tooltip
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
|
||||
<VAvatar color="info">
|
||||
<VImg :src="avatar4" />
|
||||
<VTooltip
|
||||
location="top"
|
||||
activator="parent"
|
||||
>
|
||||
Tooltip on Avatar
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VTooltip location="top">
|
||||
<template #activator="{ props }">
|
||||
<VIcon
|
||||
v-bind="props"
|
||||
size="30"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
</template>
|
||||
<span>Tooltip on Icon</span>
|
||||
</VTooltip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const transition = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<!-- Scale transition -->
|
||||
<VBtn>
|
||||
scale transition
|
||||
<VTooltip
|
||||
location="top"
|
||||
transition="scale-transition"
|
||||
activator="parent"
|
||||
>
|
||||
<span>Scale Transition</span>
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
|
||||
<!-- Scroll x transition -->
|
||||
<VBtn>
|
||||
scroll X transition
|
||||
<VTooltip
|
||||
location="top"
|
||||
activator="parent"
|
||||
transition="scroll-x-transition"
|
||||
>
|
||||
<span>Scroll X Transition</span>
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
|
||||
<!-- Scroll y transition -->
|
||||
<VBtn>
|
||||
scroll y transition
|
||||
<VTooltip
|
||||
location="top"
|
||||
activator="parent"
|
||||
transition="scroll-y-transition"
|
||||
>
|
||||
<span>Scroll Y Transition</span>
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<!-- Scale transition -->
|
||||
<VBtn>
|
||||
scale transition
|
||||
<VTooltip
|
||||
location="top"
|
||||
transition="scale-transition"
|
||||
activator="parent"
|
||||
>
|
||||
<span>Scale Transition</span>
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
|
||||
<!-- Scroll x transition -->
|
||||
<VBtn>
|
||||
scroll X transition
|
||||
<VTooltip
|
||||
location="top"
|
||||
activator="parent"
|
||||
transition="scroll-x-transition"
|
||||
>
|
||||
<span>Scroll X Transition</span>
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
|
||||
<!-- Scroll y transition -->
|
||||
<VBtn>
|
||||
scroll y transition
|
||||
<VTooltip
|
||||
location="top"
|
||||
activator="parent"
|
||||
transition="scroll-y-transition"
|
||||
>
|
||||
<span>Scroll Y Transition</span>
|
||||
</VTooltip>
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const vModelSupport = { ts: `<script lang="ts" setup>
|
||||
const isTooltipVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn @click="isTooltipVisible = !isTooltipVisible">
|
||||
toggle tooltip
|
||||
</VBtn>
|
||||
|
||||
<VTooltip
|
||||
:model-value="isTooltipVisible"
|
||||
location="top"
|
||||
>
|
||||
<template #activator="{ props }">
|
||||
<VIcon
|
||||
v-bind="props"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</template>
|
||||
<span>Programmatic tooltip</span>
|
||||
</VTooltip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const isTooltipVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn @click="isTooltipVisible = !isTooltipVisible">
|
||||
toggle tooltip
|
||||
</VBtn>
|
||||
|
||||
<VTooltip
|
||||
:model-value="isTooltipVisible"
|
||||
location="top"
|
||||
>
|
||||
<template #activator="{ props }">
|
||||
<VIcon
|
||||
v-bind="props"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</template>
|
||||
<span>Programmatic tooltip</span>
|
||||
</VTooltip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
Reference in New Issue
Block a user