Compare commits
6 Commits
master
...
v-onboardi
| Author | SHA1 | Date |
|---|---|---|
 Trent Larson
|
baa5b4337e | 3 weeks ago |
Jose Olarte III
|
26fe64b1cc | 7 months ago |
|
Jose Olarte III
|
cd010298d4 | 7 months ago |
|
Jose Olarte III
|
d4ca18b1aa | 7 months ago |
|
Jose Olarte III
|
c1a34c4103 | 7 months ago |
|
Jose Olarte III
|
1e767fd340 | 7 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