Tour

Sahifadagi elementlarni ajratib ko‘rsatib, qadamba-qadam yo‘riqnomalarni namoyish etadigan boshlab beruvchi walkthrough komponenti. Onboarding, yangi imkoniyatlarni kashf qilish va darsliklar uchun juda qulay.

Basic

"Start Tour" tugmasini bosib, silliq o‘tishlar bilan ajratilgan elementlarni bosqichma-bosqich ko‘rib chiqing.

<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

Har bir qadamda popover pozitsiyasini placement parametri orqali boshqaring: top, bottom, left yoki right. Agar ko‘rsatilmasa, eng mos joy avtomatik aniqlanadi.

<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

Foydalanuvchilarni murakkab layoutlar bo‘ylab yo‘naltirish uchun karta shaklidagi UI elementlarini nishonga oling.

Create Project

Start something new

Team Settings

Manage members

Analytics

View insights

<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

Har bir qadamning kontentini to‘liq moslashtirish uchun default slotdan foydalaning. Slotga step, index, total, next, prev va close uzatiladi.

<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>

Keyboard Navigation

Tour qutichadan chiqqan holda klaviatura navigatsiyasini qo‘llab-quvvatlaydi:

• O‘ng / Pastki strelka — Keyingi qadam
• Chap / Yuqori strelka — Oldingi qadam
• Escape — Tour’ni yopish

API

VxTour Props

Prop	Type	Default	Description
v-model	boolean	false	Tour ko‘rinishini boshqaradi
steps	TourStep[]	[]	Qadamlar ta’rifi massivi
current	number	0	Joriy qadam indeksi
maskClosable	boolean	true	Qorong‘i overlay bosilganda tour’ni yopish
showSkip	boolean	true	"Skip" tugmasini ko‘rsatish
padding	number	10	Ajratilgan element atrofidagi padding (px)
scrollIntoView	boolean	true	Nishonni avtomatik ko‘rinish maydoniga scroll qilish

TourStep

Property	Type	Required	Description
target	string | () => HTMLElement	Yes	CSS selektor yoki nishon elementni qaytaruvchi funksiya
title	string	No	Qadam sarlavhasi
description	string	No	Qadam tavsifi matni
placement	'top' | 'bottom' | 'left' | 'right'	No	Popover joylashuvi (ko‘rsatilmasa avtomatik aniqlanadi)

Events

Event	Payload	Description
update:modelValue	boolean	Tour ochiq/yopiq holati o‘zgardi
update:current	number	Joriy qadam indeksi o‘zgardi
change	number	Qadam o‘zgardi (yangi indeks)
finish	—	Foydalanuvchi oxirgi qadamda "Finish" bosdi
skip	—	Foydalanuvchi "Skip" bosdi

Slots

Slot	Props	Description
default	{ step, index, total, isFirst, isLast, next, prev, close }	Qadamning maxsus kontenti
footer	{ index, total, isFirst, isLast, next, prev, close }	Maxsus footer (nuqtalar va nav tugmalar o‘rniga)