search

pulsardev / vue-tour

Vue Tour is a lightweight, simple and customizable guided tour plugin for use with Vue.js. It provides a quick and easy way to guide your users through your application.
https://pulsardev.github.io/vue-tour
MIT License
2.4k stars 275 forks source link

Show progress bar or stepper #204

Open Sh1ftOo opened 3 years ago

Sh1ftOo commented 3 years ago

I use <v-tour name="myTour" :steps="steps" :options="tourOptions"></v-tour> construction in the vue-tour. I want to add progress bar or stepper to the vue-tour template, but I don't know how to do it.

console.log(this.$tours["myTour"]) show me currentStep and numberOfSteps. But I can't to add any element in vue-tour template. How can I do this?

mmorainville commented 3 years ago

Hi @Sh1ftOo,

The template of any step is fully customizable. It's one of the main features of vue-tour. You can see the documentation to do that here: https://github.com/pulsardev/vue-tour/wiki/Customizing-the-Template.

So in your case you could put the loader in either header or actions slot without worrying about the content.

But if you want to add it to the content slot you may have some issues as the step.content is not available in the content slot's scope.

We'll add it to the roadmap for v2.1.x.

Note for anyone you want to do a PR: https://github.com/pulsardev/vue-tour/blob/master/src/components/VStep.vue#L9

<slot name="content" :content="step.content">
...
</slot>