OrionTour

<o-tour> est un composant personnalisable permettant de guider pas à pas l'utilisateur sur votre projet.
Le composant <o-tour> doit être combiné avec <o-tour-step>.
Pendant le tour, la barre de défilement disparaît et un contraste est ajouté pour mettre en surbrillance la cible de l'étape.

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

Le composant <o-tour-step> représente une étape du tour. Il peut cibler un élément de la page, ou arraparaître au centre de la page ni aucune cible n'est spécifiée.

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

Comment créer un tour ?

Créer un fichier ExempleTour.vue.
Ce fichier va contenir les différentes étapes de votre tour.

<template>
	<o-tour ref="_tour">
		<o-tour-step target="tour1">
			<div>Contenu de l'étape</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>>();

//Enregistrez votre tour avec useTour()
onMounted(() => {
	useTour('_tour', _tour.value);
});
</script>

Enregistrez le tour dans le layout de votre application
Dans le fichier layout, ajoutez ces lignes:

<exemple-tour />

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

Utilisez les refs pour accéder au tour et le lancer

<template>
	<o-page title="Tour">
		<o-button id="target1" color="info" @click="startTour">
			Démarrer le tour !
		</o-button>
	</o-page>
</template>

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

// Accéder au tour et démarrez le !
function startTour() {
	useTour('_tour').start();
}
</script>

Astuce

Il est possible de démarrer le tour à une étape spécifique, pour cela ajoutez simplement l'index voulu en tant que paramètre en appelant la fonction useTour('_tour').start(2)