Tour Onboarding

Biblioteca de components para criação de fluxos onboarding.

npm install tour-onboarding

Para começar vamos trazer o component do card de instrução e algumas importações:

<OnboardingTourCard />

import {
	OnboardingTourCard, // Componente de instrução
	initOnboardingTour, // Função de incialização do tour
	TourConfig, // Acesso as configurações do onboarding (opcional)
} from 'tour-onboarding';

Podemos configurar ações quando o usuário avançar ou retornar os passos do onboarding usando os eventos next e prev.

<OnboardingTourCard @next="nextStepTour" @prev="prevStepTour" />

Importar estilos no main.js

import 'tour-onboarding/src/style/main.scss';

Agora vamos passar a classe t-step-01 para os components que desejamos ser o foco de cada passo do onboarding e ajustar a numeração de cada passo: t-step-01, t-step-02...

<div class="t-step-01"> Component do passo 01 </div>

<div class="t-step-02"> Component do passo 02 </div>

Para inciar o tour devemos chamar a função initOnboarding no hook mounted do vue passando um array de passos no parametro da função como no exemplo abaixo:

A função deve ser chamada no hook mounted pois a montagem (renderização) do componente foi finalizada. Neste ponto, podemos acessar os elementos do DOM recém-criados.

async mounted() {
	await initOnboardingTour({
		steps: [
			{
				text: 'Texto do passo 1',
				step: 1,
				position: 'bottom',
			},
			{
				text: 'Texto do passo 2',
				step: 2,
				position: 'bottom',
			},
			{
				text: 'Texto do passo 2',
				step: 3,
				position: 'top',
			}
		]
	});
}

O campo position indica a posição do balão de instução.

Para destacar mais components no passo atual do onboarding podemos usar a classe t-step-component-01, a numeração do passo também deve ser ajustada (t-step-component-02, t-step-component-03...).

PS: A margem do component de instrução está padronizada sendo necessário um ajuste na biblioteca para torna-lá dinâmica. (Uma lógica parecida com a de posição).