useTour New

Uso

Use o composable useTour, importado automaticamente, para conduzir um tour guiado com um único Popover cuja âncora se move entre as etapas. O composable controla o estado das etapas e resolve o target de cada etapa em uma reference que você vincula ao <NPopover>, enquanto você mantém controle total sobre o conteúdo e a navegação.

Cada etapa exige um target no qual o popover se ancora. Ele aceita um seletor CSS, um elemento, um elemento virtual (qualquer coisa com getBoundingClientRect) ou um ref/getter que retorne um deles. Passe null para ancorar a etapa no centro da viewport. Qualquer outro campo de uma etapa (title, body, side, …) é repassado sem alterações e fica disponível via current.

<script setup lang="ts">
const card = useTemplateRef('card')

const tour = useTour([
  { target: '#cta', title: 'Get started' },
  { target: () => card.value, title: 'Profile', side: 'right' },
  { target: null, title: 'All set' }
])
</script>

<template>
  <NButton @click="tour.start()">Start tour</NButton>

  <NPopover :open="tour.open.value" :reference="tour.reference.value" :dismissible="false">
    <template #content>
      <!-- your content + buttons -->
      <NButton :disabled="!tour.hasPrev.value" @click="tour.prev()">Back</NButton>
      <NButton @click="tour.next()">{{ tour.hasNext.value ? 'Next' : 'Finish' }}</NButton>
    </template>
  </NPopover>
</template>

• Built on the Popover's reactive reference prop, so the popover smoothly repositions when the active step changes.
• The active target is scrolled into view automatically when a step becomes active.
• Since you render the content yourself, there is no extra theme or locale to maintain.

API

useTour(steps, options?)

Parâmetros

Retorno