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: {
		clickable?: (boolean | Function) | undefined;
		closable?: boolean | undefined;
		end?: {
			label?: string | undefined;
			callback?: (() => any) | undefined;
			clean?: (() => any) | undefined;
		} | undefined;
		hideFinish?: boolean | undefined;
		next?: {
			label?: string | undefined;
			callback?: (() => any) | undefined;
			clean?: (() => any) | undefined;
		} | undefined;
		previous?: {
			label?: string | undefined;
			callback?: (() => any) | undefined;
			clean?: (() => any) | undefined;
		} | undefined;
		size?: string | undefined;
		target?: (string | Function | boolean) | undefined;
		timeout?: number | undefined;
		title?: string | undefined;
	};
}[]

getCurrentIndex

() => number

setCurrent

(val: number) => void

setCurrentStepPublicInstance

(instance: Undef<OrionTourStepSetupService["publicInstance"]>) => void

start

(index?: number) => void

stop

() => void

_el

() => HTMLElement | undefined

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

endOrion.Tour.TourObject = undefined

hideFinishboolean = undefined

nextOrion.Tour.TourObject = undefined

previousOrion.Tour.TourObject = undefined

sizestring = 'md'

targetstring | boolean | Function = undefined

timeoutnumber = 3000

titlestring = undefined

Slots

default

No bindings

actions

next: () => void

previous: () => void

PublicInstance

() => Promise<void>

stop

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

_el

() => HTMLElement | 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)