OrionTour

<o-tour> is a customizable component that allows users onboarding on your projects.
It can be used with the tag <o-tour> and must be combined with the OrionTourStep component. During the tour, the scroll will be disabled, and an overlay is added to highlight the target.

TourPlayground

Props

callbackFunction = undefined

valuenumber = undefined

PublicInstance

steps

{
	props: {
		size: string;
		target: string | boolean | Function;
		timeout: number;
		closable: boolean;
		hideFinish: boolean;
		title?: string | undefined;
		next?: Record<string, any> | undefined;
		end?: Record<string, any> | undefined;
		previous?: Record<string, any> | undefined;
		clickable?: boolean | Function | undefined;
	};
}[]

getCurrentIndex

() => number

setCurrent

(val: number) => void

setCurrentStepPublicInstance

(instance: Undef<{
	previous: () => Promise<void>;
	next: () => Promise<void>;
	stop: (fromTour?: boolean) => Promise<void>;
	_el?: (() => HTMLElement | undefined) | undefined;
}>) => void

start

(index?: number) => void

stop

() => void

_el

(() => HTMLElement | undefined) | undefined

Provide

_tour

publicInstance

Tour step

This represent a step during the tour. It can target an item on the page, or be displayed on the middle of the screen if no target is selected.

TourStepTarget TourStepSize TourStepPreviousNext

Props

clickableboolean | function = undefined

closableboolean = true

endObject = undefined

hideFinishboolean = false

nextObject = undefined

previousObject = undefined

sizestring = 'md'

targetstring | function | boolean = false

timeoutnumber = 3000

titlestring = undefined

Slots

default

No bindings

actions

next: () => void

previous: () => void

PublicInstance

() => Promise<void>

stop

(fromTour?: boolean) => Promise<void>

_el

(() => HTMLElement | undefined) | undefined

How to create a tour ?

Create a file ExampleTour.vue.
This file will contain the different steps of your tour.

<template>
	<o-tour ref="_tour">
		<o-tour-step target="tour1">
			<div>Content of your step</div>
		</o-tour-step>

		<o-tour-step> </o-tour-step>

		....
	</o-tour>
</template>

<script setup lang="ts">
import { useTour } from 'lib';
import { onMounted, ref } from 'vue';

const _tour = ref<RefDom<OrionTour>>();

//Register your tour with the useTour() function from the service
onMounted(() => {
	useTour('_tour', _tour.value);
});
</script>

Register your tour in your application's layout
In your layout file, add these lines:

<exemple-tour />

<script setup lang="ts">
import ExampleTour from '<file_path>/ExampleTour.vue';
</script>

Use refs to access the tour and launch it

<template>
	<o-page title="Tour">
		<o-button id="target1" color="info" @click="startTour">
			Start the tour
		</o-button>
	</o-page>
</template>

<script setup lang="ts">
import { useTour } from 'lib';

// Launch the tour
function startTour() {
	useTour('_tour').start();
}
</script>

TIP

It is possible to start the tour on a specific step. To do so, simply add the desired index as a parameter when calling the useTour('_tour').start(2) function.