Compare commits
6 Commits
master
...
v-onboardi
| Author | SHA1 | Date |
|---|---|---|
 Trent Larson
|
cf8f0e3ab7 | 4 months ago |
Jose Olarte III
|
05601f1e15 | 11 months ago |
|
Jose Olarte III
|
2e795b71ac | 11 months ago |
|
Jose Olarte III
|
948eb2ef26 | 11 months ago |
|
Jose Olarte III
|
7d611725c4 | 11 months ago |
|
Jose Olarte III
|
def6cafc17 | 11 months ago |
5 changed files with 359 additions and 25 deletions
@ -0,0 +1,164 @@ |
|||
<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="flex justify-between"> |
|||
<span |
|||
class="text-lg font-medium leading-normal text-gray-900" |
|||
> |
|||
{{ step.content.title }} |
|||
</span> |
|||
<button |
|||
@click="exit" |
|||
class="inline-flex align-center justify-center w-6 h-6 shrink-0 rounded-full" |
|||
> |
|||
<svg |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
class="h-4 w-4" |
|||
fill="none" |
|||
viewBox="0 0 24 24" |
|||
stroke="currentColor" |
|||
> |
|||
<path |
|||
stroke-linecap="round" |
|||
stroke-linejoin="round" |
|||
stroke-width="2" |
|||
d="M6 18L18 6M6 6l12 12" |
|||
></path> |
|||
</svg> |
|||
</button> |
|||
</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> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Vue, Component } from "vue-facing-decorator"; |
|||
import { ref } from "vue"; |
|||
import { |
|||
VOnboardingWrapper, |
|||
VOnboardingStep, |
|||
useVOnboarding, |
|||
} from "v-onboarding"; |
|||
|
|||
@Component({ |
|||
components: { |
|||
VOnboardingWrapper, |
|||
VOnboardingStep, |
|||
}, |
|||
}) |
|||
export default class OnboardingDialog extends Vue { |
|||
setup() { |
|||
const wrapper = ref(null); |
|||
const { start, goToStep, finish } = useVOnboarding(wrapper); |
|||
const steps = [ |
|||
{ |
|||
attachTo: { element: "#headingRecordSomething" }, |
|||
content: { title: "Welcome!" }, |
|||
}, |
|||
{ |
|||
attachTo: { element: "#headingLatestActivity" }, |
|||
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