Steps

Ko‘p bosqichli ish jarayonlari uchun qadam indikatori komponenti. Gorizontal va vertikal joylashuv, belgilar, tavsiflar, xato holatlar, bosiladigan navigatsiya, bir nechta o‘lchamlar va to‘liq CSS sozlamalarini qo‘llab-quvvatlaydi.

Basic

Account

Profile

Review

Done

vue

<script setup>
import { ref } from 'vue'
import { VxSteps } from 'veloxui'

const current = ref(1)

const items = [
  { key: 'account', title: 'Account' },
  { key: 'profile', title: 'Profile' },
  { key: 'review', title: 'Review' },
  { key: 'done', title: 'Done' },
]
</script>

<template>
  <VxSteps :items="items" :current="current" />
</template>

With Descriptions

AccountCreate your account credentials

ProfileFill in your personal details

ReviewVerify all information

DoneSetup complete

vue

<VxSteps :items="[
  { key: 'account', title: 'Account', description: 'Create your account credentials' },
  { key: 'profile', title: 'Profile', description: 'Fill in your personal details' },
  { key: 'review', title: 'Review', description: 'Verify all information' },
  { key: 'done', title: 'Done', description: 'Setup complete' },
]" :current="1" />

With Icons

Account

Settings

Upload

Complete

vue

<VxSteps :items="[
  { key: 'account', title: 'Account', icon: 'user' },
  { key: 'settings', title: 'Settings', icon: 'settings' },
  { key: 'upload', title: 'Upload', icon: 'upload' },
  { key: 'done', title: 'Complete', icon: 'check' },
]" :current="2" />

Error State

Qadam elementini xato holatda ko‘rsatish uchun error: true ni o‘rnating.

Account

Verification

Done

vue

<VxSteps :items="[
  { key: 'account', title: 'Account' },
  { key: 'verify', title: 'Verification', error: true },
  { key: 'done', title: 'Done' },
]" :current="1" />

Clickable

Har qanday qadamga bosishga ruxsat berish uchun clickableni o‘rnating. Ikki tomonlama bog‘lash uchun v-model:currentdan foydalaning.

AccountCreate your account credentials

ProfileFill in your personal details

ReviewVerify all information

DoneSetup complete

Joriy qadam: 1

vue

<VxSteps v-model:current="current" :items="items" clickable />

Vertical

Order PlacedYour order has been submitted

ProcessingWe are preparing your order

ShippedPackage is on its way

DeliveredPackage has arrived

vue

<script setup>
import { ref } from 'vue'
import { VxSteps } from 'veloxui'

const current = ref(1)

const items = [
  { key: 'order', title: 'Order Placed', description: 'Your order has been submitted' },
  { key: 'processing', title: 'Processing', description: 'We are preparing your order' },
  { key: 'shipped', title: 'Shipped', description: 'Package is on its way' },
  { key: 'delivered', title: 'Delivered', description: 'Package has arrived' },
]
</script>

<template>
  <VxSteps :items="items" :current="current" direction="vertical" />
</template>

Sizes

Uchta o‘lcham: sm, md (sukut bo‘yicha) va lg.

Account

Profile

Review

Done

Account

Profile

Review

Done

Account

Profile

Review

Done

vue

<VxSteps :items="items" :current="2" size="sm" />
<VxSteps :items="items" :current="2" size="md" />
<VxSteps :items="items" :current="2" size="lg" />

Square Variant

Doiralar o‘rniga yumaloq kvadrat indikatorlar uchun variant="square" dan foydalaning.

AccountCreate your account credentials

ProfileFill in your personal details

ReviewVerify all information

DoneSetup complete

AccountCreate your account credentials

ProfileFill in your personal details

ReviewVerify all information

DoneSetup complete

vue

<VxSteps :items="items" :current="1" variant="square" clickable />
<VxSteps :items="items" :current="2" variant="square" direction="vertical" />

Custom Dot Size & Line Width

O‘lcham presetlari qiymatlarini bekor qilish uchun dot-size va line-width proplaridan foydalaning.

Account

Profile

Review

Done

Account

Profile

Review

Done

vue

<VxSteps :items="items" :current="1" :dot-size="40" :line-width="2" />
<VxSteps :items="items" :current="1" :dot-size="20" :line-width="2" />

Custom Colors (CSS Variables)

O‘rab oluvchi klass ustidagi CSS custom propertylari orqali har qanday vizual jihatni bekor qiling.

AccountCreate your account credentials

ProfileFill in your personal details

ReviewVerify all information

DoneSetup complete

AccountCreate your account credentials

ProfileFill in your personal details

ReviewVerify all information

DoneSetup complete

vue

<template>
  <div class="steps-green-theme">
    <VxSteps :items="items" :current="1" clickable />
  </div>
</template>

<style>
.steps-green-theme .vx-steps {
  --vx-steps-active-bg: #16a34a;
  --vx-steps-active-border: #16a34a;
  --vx-steps-active-color: #fff;
  --vx-steps-active-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
  --vx-steps-completed-bg: #16a34a;
  --vx-steps-completed-border: #16a34a;
  --vx-steps-completed-color: #fff;
  --vx-steps-line-done-color: #16a34a;
}
</style>

Custom Slots

Sarlavhalar, tavsiflar, belgilarni to‘liq sozlash va har bir qadam uchun qo‘shimcha kontent qo‘shish uchun slotlardan foydalaning.

Account Create your account credentials

Profile JoriyFill in your personal details

Review Verify all information

Done Setup complete

vue

<VxSteps :items="items" :current="current" clickable direction="vertical">
  <!-- Custom title for all steps -->
  <template #title="{ item, status }">
    <span :style="{ fontWeight: status === 'active' ? 700 : 400 }">
      {{ item.title }}
      <VxTag v-if="status === 'active'" size="sm">Current</VxTag>
    </span>
  </template>

  <!-- Extra content only for the 'review' step -->
  <template #content-review="{ status }">
    <div v-if="status === 'active'" style="padding: 12px; background: var(--muted); border-radius: 8px;">
      Please review all your information before proceeding.
    </div>
  </template>
</VxSteps>

Content Panel

Qadamlar paneli ostida har bir qadamga xos kontentni ko‘rsatish uchun panel-{key} slotlardan foydalaning. Faol qadamning paneli avtomatik ravishda ko‘rsatiladi.

Account

Profile

Confirm

Hisobingizni yarating

Profilingiz

✓

Hammasi tayyor!

Hisobingiz yaratildi.

vue

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

const current = ref(0)

const items = [
  { key: 'account', title: 'Account' },
  { key: 'profile', title: 'Profile' },
  { key: 'confirm', title: 'Confirm' },
]

function next() {
  if (current.value < items.length - 1) current.value++
}
function prev() {
  if (current.value > 0) current.value--
}
</script>

<template>
  <VxSteps :items="items" :current="current" clickable>
    <template #panel-account>
      <div style="padding: 20px; border: 1px solid var(--border); border-radius: 10px;">
        <VxInput placeholder="Email address" />
        <VxInput placeholder="Password" type="password" />
        <VxButton size="sm" @click="next">Next</VxButton>
      </div>
    </template>
    <template #panel-profile>
      <div style="padding: 20px; border: 1px solid var(--border); border-radius: 10px;">
        <VxInput placeholder="Full name" />
        <VxButton variant="outline" size="sm" @click="prev">Back</VxButton>
        <VxButton size="sm" @click="next">Next</VxButton>
      </div>
    </template>
    <template #panel-confirm>
      <div style="text-align: center;">All done!</div>
    </template>
  </VxSteps>
</template>

Vertical Content Panel

Kontent paneli vertikal yo‘nalish bilan ham ishlaydi — u qadamlar yonida render qilinadi.

InformationBasic details

AddressShipping address

PaymentPayment method

Asosiy ma’lumotlar

Yetkazib berish manzili

To‘lov usuli

vue

<VxSteps :items="items" :current="current" direction="vertical" clickable>
  <template #panel-info>
    <!-- Your form content here -->
  </template>
  <template #panel-address>
    <!-- Address form -->
  </template>
  <template #panel-payment>
    <!-- Payment form -->
  </template>
</VxSteps>

Simple Wizard

Faqat Keyingi / Orqaga tugmalari bilan minimal sehrgar (kontent panelisiz).

Choose Plan

Billing

Confirm

vue

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

const current = ref(0)

const items = [
  { key: 'plan', title: 'Choose Plan' },
  { key: 'billing', title: 'Billing' },
  { key: 'confirm', title: 'Confirm' },
]

function next() {
  if (current.value < items.length - 1) current.value++
}
function prev() {
  if (current.value > 0) current.value--
}
</script>

<template>
  <VxSteps :items="items" :current="current" />
  <div style="margin-top: 20px; display: flex; gap: 8px; justify-content: flex-end;">
    <VxButton variant="outline" size="sm" :disabled="current === 0" @click="prev">Back</VxButton>
    <VxButton size="sm" @click="next" :disabled="current === items.length - 1">Next</VxButton>
  </div>
</template>

API

VxSteps Props

Prop	Type	Default	Description
`items`	`StepItem[]`	`[]`	Qadam elementlari
`current`	`number`	`0`	Faol qadam indeksi (noldan boshlanadi)
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Joylashuv yo‘nalishi
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Qadam indikatori o‘lchami
`variant`	`'circle' \| 'square'`	`'circle'`	Indikator shakli
`clickable`	`boolean`	`false`	Navigatsiya uchun qadamlarni bosishga ruxsat berish
`dot-size`	`number \| string`	—	Indikator o‘lchamini bekor qilish (masalan, `40` yoki `'40px'`)
`line-width`	`number \| string`	—	Chiziq qalinligini bekor qilish (masalan, `2` yoki `'2px'`)
`root-class`	`string \| string[] \| object`	—	Ildizdagi class

StepItem

Property	Type	Required	Description
`key`	`string`	Yes	Noyob identifikator
`title`	`string`	Yes	Qadam sarlavhasi
`description`	`string`	No	Qadam tavsif matni
`icon`	`string \| Component`	No	Moslashtirilgan belgi (raqamni almashtiradi)
`disabled`	`boolean`	No	Bu qadamni o‘chirish
`error`	`boolean`	No	Xato holatini ko‘rsatish

Slots

Slot	Props	Description
`icon`	`{ item, status, index }`	Barcha qadamlar uchun moslashtirilgan indikator
`icon-{key}`	`{ item, status, index }`	Muayyan qadam uchun moslashtirilgan indikator
`title`	`{ item, status, index }`	Barcha qadamlar uchun moslashtirilgan sarlavha
`title-{key}`	`{ item, status, index }`	Muayyan qadam uchun moslashtirilgan sarlavha
`description`	`{ item, status, index }`	Barcha qadamlar uchun moslashtirilgan tavsif
`description-{key}`	`{ item, status, index }`	Muayyan qadam uchun moslashtirilgan tavsif
`content-{key}`	`{ item, status, index }`	Muayyan qadam matni ostidagi qo‘shimcha kontent maydoni
`line`	`{ index, status, done }`	Qadamlar orasidagi moslashtirilgan chiziq ulagichi
`panel`	`{ item, status, index }`	Barcha qadamlar uchun standart kontent paneli
`panel-{key}`	`{ item, status, index }`	Muayyan qadam uchun kontent paneli (faol bo‘lganda ko‘rsatiladi)

Events

Event	Payload	Description
`update:current`	`(index: number)`	Qadam o‘zgardi (clickable rejimi)
`click`	`(index, item)`	Qadam bosildi

CSS Custom Properties

Ranglar, o‘lchamlar va oraliqni sozlash uchun .vx-steps elementida yoki ota o‘rovchida ularni bekor qiling.

Variable	Default	Description
`--vx-steps-dot-size`	O‘lcham preseti	Indikator kengligi/balandligi
`--vx-steps-dot-radius`	`50%` / `8px`	Indikator border-radius qiymati
`--vx-steps-dot-font-size`	O‘lcham preseti	Nuqta ichidagi raqam font-size qiymati
`--vx-steps-dot-font-weight`	`600`	Nuqta ichidagi raqam font-weight qiymati
`--vx-steps-dot-bg`	`var(--background)`	Keyingi nuqta foni
`--vx-steps-dot-border`	`var(--border)`	Keyingi nuqta chegarasi
`--vx-steps-dot-color`	`var(--muted-foreground)`	Keyingi nuqta matn rangi
`--vx-steps-active-bg`	`var(--primary)`	Faol nuqta foni
`--vx-steps-active-border`	`var(--primary)`	Faol nuqta chegarasi
`--vx-steps-active-color`	`var(--primary-foreground)`	Faol nuqta matn rangi
`--vx-steps-active-shadow`	halqa yaltirashi	Faol nuqta box-shadow qiymati
`--vx-steps-completed-bg`	`var(--primary)`	Bajarilgan nuqta foni
`--vx-steps-completed-border`	`var(--primary)`	Bajarilgan nuqta chegarasi
`--vx-steps-completed-color`	`var(--primary-foreground)`	Bajarilgan nuqta matn rangi
`--vx-steps-error-bg`	`var(--background)`	Xato nuqta foni
`--vx-steps-error-border`	`var(--destructive)`	Xato nuqta chegarasi
`--vx-steps-error-color`	`var(--destructive)`	Xato nuqta matn rangi
`--vx-steps-line-color`	`var(--border)`	Tugallanmagan chiziq rangi
`--vx-steps-line-done-color`	`var(--primary)`	Bajarilgan chiziq rangi
`--vx-steps-line-width`	`1px`	Chiziq qalinligi
`--vx-steps-title-size`	O‘lcham preseti	Sarlavha font-size qiymati
`--vx-steps-title-weight`	`500`	Sarlavha font-weight qiymati
`--vx-steps-title-color`	`var(--foreground)`	Sarlavha rangi
`--vx-steps-title-upcoming-color`	`var(--muted-foreground)`	Keyingi sarlavha rangi
`--vx-steps-title-error-color`	`var(--destructive)`	Xato sarlavha rangi
`--vx-steps-desc-size`	O‘lcham preseti	Tavsif font-size qiymati
`--vx-steps-desc-color`	`var(--muted-foreground)`	Tavsif rangi
`--vx-steps-text-gap`	`8px`	Indikator va matn orasidagi oraliq (gorizontal)
`--vx-steps-line-gap`	`24px`	Qadamlar orasidagi vertikal oraliq
`--vx-steps-panel-gap`	`24px`	Qadamlar paneli va kontent paneli orasidagi oraliq
`--vx-steps-panel-padding`	`0`	Kontent paneli padding qiymati

Steps ​

Basic ​

With Descriptions ​

With Icons ​

Error State ​

Clickable ​

Vertical ​

Sizes ​

Square Variant ​

Custom Dot Size & Line Width ​

Custom Colors (CSS Variables) ​

Custom Slots ​

Content Panel ​

Vertical Content Panel ​

Simple Wizard ​

API ​

VxSteps Props ​

StepItem ​

Slots ​

Events ​

CSS Custom Properties ​

Steps

Basic

With Descriptions

With Icons

Error State

Clickable

Vertical

Sizes

Square Variant

Custom Dot Size & Line Width

Custom Colors (CSS Variables)

Custom Slots

Content Panel

Vertical Content Panel

Simple Wizard

API

VxSteps Props

StepItem

Slots

Events

CSS Custom Properties