Tour

Компонент пошагового гида, который подсвечивает элементы на странице и показывает пошаговые инструкции. Отлично подходит для онбординга, знакомства с функциями и обучающих туров.

Basic

Нажмите «Start Tour», чтобы пройти по подсвеченным элементам с плавными переходами.

vue

<script setup>
import { ref } from 'vue'
import { VxTour, VxButton, VxInput } from 'veloxui'

const showTour = ref(false)
const steps = [
  {
    target: '#dashboard-btn',
    title: 'Dashboard',
    description: 'Access your main dashboard with key metrics.',
  },
  {
    target: '#settings-btn',
    title: 'Settings',
    description: 'Configure your preferences and security options.',
  },
  {
    target: '#search-input',
    title: 'Search',
    description: 'Find anything across your workspace.',
  },
]
</script>

<template>
  <VxButton id="dashboard-btn" type="primary">Dashboard</VxButton>
  <VxButton id="settings-btn">Settings</VxButton>
  <VxInput id="search-input" placeholder="Search..." />

  <VxButton @click="showTour = true">Start Tour</VxButton>
  <VxTour v-model="showTour" :steps="steps" />
</template>

Placement

Управляйте положением поповера на каждом шаге через опцию placement: top, bottom, left или right. Если не указано, лучшая позиция определяется автоматически.

vue

<script setup>
import { ref } from 'vue'
import { VxTour, VxButton } from 'veloxui'

const showTour = ref(false)
const steps = [
  { target: '#btn-top', title: 'Top', description: 'Popover above.', placement: 'top' },
  { target: '#btn-right', title: 'Right', description: 'Popover to the right.', placement: 'right' },
  { target: '#btn-bottom', title: 'Bottom', description: 'Popover below.', placement: 'bottom' },
  { target: '#btn-left', title: 'Left', description: 'Popover to the left.', placement: 'left' },
]
</script>

<template>
  <VxButton id="btn-top">Top</VxButton>
  <VxButton id="btn-right">Right</VxButton>
  <VxButton id="btn-bottom">Bottom</VxButton>
  <VxButton id="btn-left">Left</VxButton>
  <VxButton @click="showTour = true">Start Tour</VxButton>
  <VxTour v-model="showTour" :steps="steps" />
</template>

Connected Cards

Указывайте карточные элементы интерфейса, чтобы провести пользователя через сложные макеты.

Create Project

Start something new

Team Settings

Manage members

Analytics

View insights

vue

<script setup>
import { ref } from 'vue'
import { VxTour, VxButton } from 'veloxui'

const showTour = ref(false)
const steps = [
  { target: '#create-card', title: 'Create Project', description: 'Start a new project.' },
  { target: '#team-card', title: 'Team Settings', description: 'Manage your team.' },
  { target: '#analytics-card', title: 'Analytics', description: 'View performance insights.' },
]
</script>

<template>
  <div id="create-card">...</div>
  <div id="team-card">...</div>
  <div id="analytics-card">...</div>
  <VxButton @click="showTour = true">Start Tour</VxButton>
  <VxTour v-model="showTour" :steps="steps" />
</template>

Custom Content

Используйте слот по умолчанию, чтобы полностью настроить содержимое каждого шага. Слот получает step, index, total, next, prev и close.

vue

<script setup>
import { ref } from 'vue'
import { VxTour, VxButton } from 'veloxui'

const showTour = ref(false)
const steps = [
  { target: '#home', title: 'Welcome!', description: 'Let us show you around.' },
  { target: '#actions', title: 'Quick Actions', description: 'Access frequent actions here.' },
]
</script>

<template>
  <VxTour v-model="showTour" :steps="steps">
    <!-- Custom step content via default slot -->
    <template #default="{ step, index, total, next, prev, close }">
      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px;">
        <span class="step-badge">{{ index + 1 }}</span>
        <span class="step-title">{{ step?.title }}</span>
      </div>
      <p>{{ step?.description }}</p>
    </template>
  </VxTour>
</template>

Тур поддерживает навигацию с клавиатуры из коробки:

Arrow Right / Down — Следующий шаг
Arrow Left / Up — Предыдущий шаг
Escape — Закрыть тур

API

VxTour Props

Prop	Type	Default	Description
`v-model`	`boolean`	`false`	Управляет видимостью тура
`steps`	`TourStep[]`	`[]`	Массив описаний шагов
`current`	`number`	`0`	Индекс текущего шага
`maskClosable`	`boolean`	`true`	Закрывать тур по клику на тёмную подложку
`showSkip`	`boolean`	`true`	Показывать кнопку «Skip»
`padding`	`number`	`10`	Отступ вокруг подсвеченного элемента (px)
`scrollIntoView`	`boolean`	`true`	Автопрокрутка цели в область видимости

TourStep

Property	Type	Required	Description
`target`	`string \| () => HTMLElement`	Yes	CSS-селектор или функция, возвращающая целевой элемент
`title`	`string`	No	Заголовок шага
`description`	`string`	No	Текст описания шага
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	No	Позиция поповера (автоопределение при отсутствии)

Events

Event	Payload	Description
`update:modelValue`	`boolean`	Состояние открытия/закрытия тура изменилось
`update:current`	`number`	Индекс текущего шага изменён
`change`	`number`	Шаг изменился (новый индекс)
`finish`	—	Пользователь нажал «Finish» на последнем шаге
`skip`	—	Пользователь нажал «Skip»

Slots

Slot	Props	Description
`default`	`{ step, index, total, isFirst, isLast, next, prev, close }`	Пользовательское содержимое шага
`footer`	`{ index, total, isFirst, isLast, next, prev, close }`	Пользовательский футер (заменяет точки и кнопки навигации)

Tour ​

Basic ​

Placement ​

Connected Cards ​

Custom Content ​

Keyboard Navigation ​

API ​

VxTour Props ​

TourStep ​

Events ​

Slots ​