Jose Olarte III
7 months ago
1 changed files with 104 additions and 0 deletions
@ -0,0 +1,104 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<VOnboardingWrapper ref="wrapper" :steps="steps"> |
||||
|
<template #default="{ previous, next, step, exit, isFirst, isLast, index }"> |
||||
|
<VOnboardingStep> |
||||
|
<div class="bg-white shadow sm:rounded-lg"> |
||||
|
<div class="px-4 py-5 sm:p-6"> |
||||
|
<div class="sm:flex sm:items-center sm:justify-between"> |
||||
|
<div v-if="step.content"> |
||||
|
<h3 v-if="step.content.title" class="text-lg font-medium leading-6 text-gray-900">{{ step.content.title }}</h3> |
||||
|
<div v-if="step.content.description" class="mt-2 max-w-xl text-sm text-gray-500"> |
||||
|
<p>{{ step.content.description }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="mt-5 space-x-4 sm:mt-0 sm:ml-6 sm:flex sm:flex-shrink-0 sm:items-center relative"> |
||||
|
<span class="absolute right-0 bottom-full mb-2 mr-2 text-gray-600 font-medium text-xs">{{ `${index + 1}/${steps.length}` }}</span> |
||||
|
<template v-if="!isFirst"> |
||||
|
<button @click="previous" type="button" class="inline-flex items-center justify-center rounded-md border border-transparent bg-yellow-100 px-4 py-2 font-medium text-yellow-700 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 sm:text-sm">Previous</button> |
||||
|
</template> |
||||
|
<button @click="next" type="button" class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:text-sm">{{ isLast ? 'Finish' : 'Next' }}</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</VOnboardingStep> |
||||
|
</template> |
||||
|
</VOnboardingWrapper> |
||||
|
<span id="foo">Howdy, My Friend!</span> |
||||
|
<button id="bar">Click me for no reason</button> |
||||
|
<button @click="() => goToStep(1)">Click to go second step</button> |
||||
|
<div> |
||||
|
<button @click="start">Start Onboarding</button> |
||||
|
<button @click="finish">Finish Onboarding</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { defineComponent, ref } from 'vue' |
||||
|
import { VOnboardingWrapper, VOnboardingStep, useVOnboarding } from 'v-onboarding' |
||||
|
export default defineComponent ({ |
||||
|
components: { |
||||
|
VOnboardingWrapper, |
||||
|
VOnboardingStep |
||||
|
}, |
||||
|
setup() { |
||||
|
const wrapper = ref(null) |
||||
|
const { start, goToStep, finish } = useVOnboarding(wrapper) |
||||
|
const steps = [ |
||||
|
{ |
||||
|
attachTo: { element: '#foo' }, |
||||
|
content: { title: "Welcome!" } |
||||
|
}, |
||||
|
{ |
||||
|
attachTo: { element: '#bar' }, |
||||
|
content: { |
||||
|
title: "Testing v-onboarding..", |
||||
|
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation." |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
return { |
||||
|
wrapper, |
||||
|
steps, |
||||
|
start, |
||||
|
finish, |
||||
|
goToStep |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
|
<style> |
||||
|
[data-v-onboarding-wrapper] [data-popper-arrow]::before { |
||||
|
content: ''; |
||||
|
background: var(--v-onboarding-step-arrow-background, white); |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
transition: transform 0.2s ease-out,visibility 0.2s ease-out; |
||||
|
visibility: visible; |
||||
|
transform: translateX(0px) rotate(45deg); |
||||
|
transform-origin: center; |
||||
|
width: var(--v-onboarding-step-arrow-size, 10px); |
||||
|
height: var(--v-onboarding-step-arrow-size, 10px); |
||||
|
position: absolute; |
||||
|
z-index: -1; |
||||
|
} |
||||
|
|
||||
|
[data-v-onboarding-wrapper] [data-popper-placement^='top'] > [data-popper-arrow] { |
||||
|
bottom: 5px; |
||||
|
} |
||||
|
|
||||
|
[data-v-onboarding-wrapper] [data-popper-placement^='right'] > [data-popper-arrow] { |
||||
|
left: -4px; |
||||
|
} |
||||
|
|
||||
|
[data-v-onboarding-wrapper] [data-popper-placement^='bottom'] > [data-popper-arrow] { |
||||
|
top: -4px; |
||||
|
} |
||||
|
|
||||
|
[data-v-onboarding-wrapper] [data-popper-placement^='left'] > [data-popper-arrow] { |
||||
|
right: -4px; |
||||
|
} |
||||
|
</style> |
Loading…
Reference in new issue